- 列表中展示的数据经过sql去重处理。微信规定多图文组合最多为8个子对象。设计图文素材表时以分组编号将多图文组合关联，并排序，此处显示的记录就是按分组编号去重后排序1的记录。
2.展示多图文的详情。左侧为组成多图文的单图文，显示封面图片和标题。右侧为每个单图文的详情。点击左侧对象右边详情实时对应。
3：详情弹框代码。
大致说下从点击详情按钮到加载详情页流程，代码中easyui的相关内容请自行查阅文档。
function detail(){
var row = context.find(".easyui-datagrid").datagrid('getSelected');
$("#context_dialog_detail").dialog({title:'详情',width:1000,height:700,left:400,top:150}).dialog("refresh", toEditUrl+"/"+row.mediaGroup).dialog("open");
}后台接口：
@GetMapping(value = "/page/edit/{mediaGroup}")
public ModelAndView toDetail(@PathVariable("mediaGroup") String mediaGroup)
{
ModelAndView mv = new ModelAndView("pnimagetextpackaging/imagetextpackaging_detail");
mv.addObject("mediaGroup", mediaGroup);
//getClassRequestMappingUrl() 用于获取该controller对应的mapping地址
mv.addObject("menuCode", getClassRequestMappingUrl());
return mv;
}
/**
* 获取RequestMapping 值
*
* @return
*/
public String getClassRequestMappingUrl()
{
RequestMapping qm = this.getClass().getAnnotation(RequestMapping.class);
String[] url = qm.value();
return url[0];
}imagetextpackaging_detail.jsp代码加载数据
-
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <style> .ckbWords{ display: block; } * { margin: 0; padding: 0;} .dowebok { margin: 0 auto; list-style-type: none; zoom: 1;} .dowebok:after { content: ''; display: table; clear: both;} .dowebok li { float: left; width: 210px; height: 176px; margin: 5px 5px 0; display: inline;} .dowebok1 { border: 1px solid #d9534f;} .dowebok1 img { width: 200px; height: 200px; vertical-align: top;} .dowebok2 { border: 1px solid #FAF0E6;} .dowebok2 img { width: 210px; height: 176px; vertical-align: top;} .icon20_common {width: 20px;height: 20px;vertical-align: middle;display: inline-block} .icon20_common.sort_up_white {background: url("images/base_z318f29.png") 0 -4754px no-repeat } .icon20_common.sort_down_white { background: url("images/base_z318f29.png") 0 -4778px no-repeat } .icon20_common.del_media_white { background: url("images/base_z318f29.png") 0 -4802px no-repeat } .imglisttitle{ overflow: hidden; text-overflow: ellipsis; white-space:nowrap; width:90px; display:block;position: relative;bottom: 163px;left: 100px;color:white; } /* 第一个模板样式 */ .firsttemplate{ margin-right: 5px;cursor:pointer; } .firsttemplate>.majorcontent { width:225px;height: 122px; } .majorcontent>.j_addgoods_img { width:225px;height: 122px; } .firstmask{ display:none;position: absolute;top: 100px;width: 225px;height: 30px;background: rgba(0,0,0,0.5)!important;text-align: right; } .firsttitle{ text-align: right; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; width:90px; display:block; color: white; position: absolute; right:22px; top: 85px; } /* 后面的模板样式 */ .othertemplate{ cursor:pointer; } .othertemplate>.majorcontent { width:225px;height: 80px; } .othermajorcontent>.j_addgoods_img { width: 70px;height:70px;position: relative;bottom:10px;float: right; } .othermask{ display:none;position: relative;top:35px;width: 225px;height: 30px;line-height: 40px;background: rgba(0,0,0,0.5)!important;text-align: right; } .othertitle{ text-align: left;position: relative;top: 36px;z-index:999; } .img2{ width:225px;height: 80px; } .othertitle{ overflow: hidden; text-overflow: ellipsis; white-space:nowrap; width:90px; display:block; } .block { position: relative; width: 200px; height: 100px; margin: 0 10px; background: #ccc; border: 1px solid #ff8711; } .block:before { content: ''; display: block; position: absolute; right: 0; bottom: 0; border: 17px solid #ff8711; border-top-color: transparent; border-left-color: transparent; color: #fff; } .block:after { content: ''; display: block; width: 5px; height: 12px; position: absolute; right: 6px; bottom: 6px; border: 2px solid #fff; border-top-color: transparent; border-left-color: transparent; transform: rotate(45deg); } </style> <script type="text/javascript"> var result; $(function(){ var materialUrl = $("#menuCode").val(); var mediaGroup=$("#mediaGroup").val(); $.ajax({ async:false, type: 'GET', url: materialUrl+'/listDetail/'+mediaGroup, contentType: "application/json", dataType: "json", success: function(data) { DisplayListItems(data); result=data; }, }); //禁止输入 $("input").attr("readonly","readonly"); $("textarea").attr("readonly","readonly"); }); //鼠标点击左侧对象，右侧显示详情 $(".GoodsAdd_InfoBox_ImgBg_Img").click(function(){ //获取当前div对象的父元素 var temp = $(this).parents("ul"); //获取当前ul在所有url中下标 var indexNo = $("#leftcontent").find("ul").index(temp); //遍历ajax返回的数据，根据下标来决定右侧回显数据 $.each(result, function(index, row) { if(indexNo==index){ setData(row); } }); }); //页面初始化后加载左侧数据,每条数据都是一个ul,默认显示第一条素材详情 function DisplayListItems(list) { $.each(list, function(index, row) { if(0==index){ $(".firsttitle").text(row.title); $(".firstimg").attr("src",row.thumbLocalPath); setData(row); }else{ //获取该临时模板html var dd = $("#lefttemplate").html(); //克隆，类似于临时变量作用 var temp = $(dd).clone(); //填充数据 temp.find(".othertitle").text(row.title); temp.find(".otherimg").attr("src",row.thumbLocalPath); //添加到第一个模板中，实现左侧多模块展示 $("#leftcontent").append(temp); } }); } //填充表单数据 function setData(row){ debugger; if(row.contentSourceUrl!=""){ //radio的选中效果不能使用 // $("#checkbox").attr("checked","checked"); $("#checkbox").prop("checked",true) }else{ //如果去掉选中也不能使用 // $("#checkbox").attr("checked",false); $("#checkbox").prop("checked",false ); } $("#author").val(row.author); $("#titlex").val(row.title); $("#digest").val(row.digest); $("#contentShow").html(row.localContent); $("#contentSourceUrl").val(row.contentSourceUrl); $("#thumbLocalPath").attr('src',row.thumbLocalPath); } </script> <input type="hidden" id="menuCode" value="${menuCode }"> <input type="hidden" id="mediaGroup" value="${mediaGroup }"> <div style="margin-top: 20px;"> <table style="width: 100%;height: 100%;" > <tr> <td valign="top" style="text-align:left;width:27%;"> <div style="width:100%;height:100%;"> <div style="position: relative;height:auto;display: inline;float:left;"> <div style="overflow:scroll;width:262px; height:630px;position: fixed;margin-left: 20px;">图文列表： <!--左侧第一个模板 --> <div id="leftcontent" style="border: 1.5px solid #C9C9C9;margin-right: 5px;padding-bottom: 5px;"> <ul class="unstyled spaced2" style="padding:5px;"> <li class="text-warning green"><i class="icon-star blue"></i> <div class="GoodsAdd_InfoBox_ImgBg_ImgList j_addgoods_photo firsttemplate" > <hr style="background-color: #C9C9C9;border: none;height: 1px;display:none;width: 225px;"/> <div class="GoodsAdd_InfoBox_ImgBg_Img" > <div class="majorcontent first"> <span class="firsttitle" ></span> <img class="j_addgoods_img firstimg" src="images/img.jpg" /> </div> </div> </div> </li> </ul> </div> <!-- 临时模板，图文对象数量大于1后使用 --> <div id="lefttemplate" style="display:none;"> <ul class="unstyled spaced2" style="padding: 5px;" > <li class="text-warning green"><i class="icon-star blue"></i> <div class="GoodsAdd_InfoBox_ImgBg_ImgList j_addgoods_photo othertemplate" > <hr style="background-color: #C9C9C9;border: none;height: 1px;width: 225px;"/> <div class="GoodsAdd_InfoBox_ImgBg_Img img2"> <div class="othermajorcontent"> <span class="othertitle"></span> <img class="j_addgoods_img otherimg" src="images/img.jpg"/> </div> </div> </div> </li> </ul> </div> </div> </div> </div> </td> <td style="height:430px;width:45%;">详情： <div style="padding-left: 20px;padding-bottom: 20px;margin-right: 20px;border:1.5px #C9C9C9 solid;" id="editBlock" class="editblock"> <table style="padding-bottom: 10px;border-collapse:separate; border-spacing:7px 16px;"> <tr> <td><span>标题：</span></td> <td> <input type="text" class="easyui-validatebox" name="title" id="titlex"> </td> </tr> <tr> <td>作者：</td> <td> <input name="author" type="text" class="easyui-validatebox" id="author"/> </td> </tr> <tr> <td>摘要：</td> <td> <textarea id="digest" style="width: 320px; height:80px;"></textarea> </td> </tr> <tr> <td>正文：</td> <td> <div id="contentShow" style="height: 302px;width:500px;border: 1px solid #C9C9C9" > </div> </td> </tr> <tr> <td></td> <td> <label><input type="radio" id="checkbox" /> 原文链接 </label> <div > <input style="width:500px" class="easyui-validatebox" name="contentSourceUrl" id="contentSourceUrl"/> </div> </td> </tr> <tr> <td>封面：</td> <td> <div> <!-- <input id="thumbLocalPath" name="thumbLocalPath" type="hidden" required="required" /> --> <img id="thumbLocalPath" class="imagetextcontent" alt="无图片" src="${imageTextMaterial.thumbLocalPath}" onerror="javascript:{this.src='images/img.jpg'}" style="width: 100px; height: 100px;"/> </div> </td> </tr> </table> </div> </td> </tr> </table> </div>该ajax执行后台： 返回list对象
@ResponseBody @RequestMapping(value = "listDetail/{mediaGroup}") public List<ImageTextMaterial> listDetail(@PathVariable("mediaGroup") String mediaGroup) { return imageTextMaterialService.listData(mediaGroup); } -
总结要点：
1： 使用tr td标签实现左右布局
<tr>
<td valign="top" style="text-align:left;width:27%;">
</td>
<td style="height:430px;width:45%;">详情：
</td>
</tr>2： radio的选中与取消必须使用prop方法。具体的说明请看博客https://blog.csdn.net/qq_29542611/article/details/73385002
3：ajax同步获取list数据后，js遍历list
4： 正文部分获取的内容是html标签格式的富文本内容，浏览器自动解析
5：左右数据的对应回显
2340
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
