layui动态表格生成
<div class="layui-tab-content"> <div class="layui-tab-item layui-show layui-form"> <div class="product-list-cen" style="clear: both;"> <table class="layui-table" lay-even lay-filter="productList"> <thead> <tr> <th lay-data="{checkbox:true}"></th> <!--<th lay-data="{field:'ids',sort:'true',width:'4%',display: none;}"></th>--> <th lay-data="{field:'id',sort:'true',width:'4%'}">序号</th> <th lay-data="{field:'ids',sort:'true',width:'10%'}">编号</th> <th lay-data="{field:'name',width:'50%'}">内容</th> <th lay-data="{field:'beginTime',width:'10%'}">状态</th> <th lay-data="{field:'endTime',sort:'true',width:'14%'}">时间</th> <th lay-data="{field:'opeartion'}">操作</th> </tr> </thead> <tbody> [#list list as siteMsgObj] <tr> <td></td> <!--<td style="display: none;">${siteMsgObj.msgId!}</td>--> <td>${siteMsgObj_index+1}</td> <td>${siteMsgObj.msgId!}</td> <td><div class='product-table-cell-box'><div class='text-box'><p style="text-align: center;">${siteMsgObj.subject!}<p></div></div></td> <td>[#if siteMsgObj.readflag?? && siteMsgObj.readflag =="1"]已读[#else]未读[/#if]</td> <td>${siteMsgObj.addtime!}</td> <td> <a class="operation edit" href="javascript:void(0)" onclick="editorActivity('/thtml/memberfront/member/siteMsg/toReadReceivedMsgPage.thtml?msgId=${siteMsgObj.msgId!}&r=${.now}&tpl_page=/shop/shop_siteMsg.html')"><i class="iconfont icon-see"></i>查看</a> <a class="operation delete" href="javascript:void(0)" onclick="deletData('${siteMsgObj.msgId!}')"><i class="iconfont icon-delete"></i>删除</a> </td> </tr> [/#list] </tbody> </table> <div id="paging"></div> </div><!--product-list-cen--> </div><!--layui-tab-item--> </div>
<script type="text/javascript"> layui.use(['laydate','laypage','form','table'], function(){ var laydate = layui.laydate, table = layui.table, form = layui.form, laypage = layui.laypage; //转换静态表格 table.init('productList', { page:false ,limit: ${paging.itemsPerPage!} //注意:请务必确保 limit 参数(默认:10)是与你服务端限定的数据条数一致 //支持所有基础参数 }); laypage.render({ elem: 'paging' //注意,这里的 test1 是 ID,不用加 # 号 ,limit: ${paging.itemsPerPage!} //注意:请务必确保 limit 参数(默认:10)是与你服务端限定的数据条数一致 ,curr: ${paging.currentPage!} //数据总数,从服务端得到 ,count: ${count} //数据总数,从服务端得到 ,layout:['prev','next','page','limit','skip','count'] ,jump: function(obj, first){ //obj包含了当前分页的所有参数,比如: console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。 console.log(obj.limit); //得到每页显示的条数 //首次不执行 if(!first){ var url=""; [#if type=="b2b2cOulet"] url = "/thtml/memberfront/siteMsgList.thtml?type=b2b2cOulet"; [#else] url = "/thtml/shopfront/siteMsgList.thtml"; [/#if] if(url.indexOf('?')>-1){ url = url+'&PrmPageNo='+obj.curr+'&PrmItemsPerPage='+obj.limit; } else{ url = url+'?PrmPageNo='+obj.curr+'&PrmItemsPerPage='+obj.limit; } url += "&r="+new Date(); window.location.href = url; } } }); //监听表格复选框选择 table.on('checkbox(productList)', function(obj){ //判断是否选中 if(obj.checked) { var data =""; if(obj.type =="all"){ var checkStatus = table.checkStatus('idTest'); var datas = checkStatus.data; for (var i = 0; i < datas.length; i++) { if (i== datas.length-1) { data = data+datas[i].ids ; }else{ data = datas[i].ids+ "," + data; } } }else if(obj.type =="one"){ data = obj.data.ids; } var msgIds = $("#msgIds").val(); if(msgIds=="") { $("#msgIds").val(data); } else { msgIds = msgIds + "," + data; $("#msgIds").val(msgIds); } } else { // var data = obj.data.ids; var data =""; if(obj.type =="all"){ $("#msgIds").val("");//全选取消时,ids应该为空 }else if(obj.type =="one"){ data = obj.data.ids; } var msgIds = $("#msgIds").val(); if(msgIds.indexOf(",")<0) { $("#msgIds").val(""); } else { if(msgIds.indexOf(data)==0) { msgIds = msgIds.replace(data+",",""); } else { msgIds = msgIds.replace(","+data,""); } $("#msgIds").val(msgIds); } } }); }); //标记已读 function flagRead(){ //先判断有没有选中条记录 若有记录则将选中的记录li上添加class active,若未选择则提示请选择要标记的数据 var ids = $("#msgIds").val(); if(ids.length==0) { layer.msg('请选择记录'); } else { //修改这些记录的是否已读的状态 $.post("/thtml/memberfront/member/siteMsg/editReadflags.thtml?ids="+ids,{"r":Math.random()},function(data){ if(data.done) { layer.msg('标记成功'); window.location.reload(); } else { layer.msg(data.msg); } }); } } function deletMutilData() { var ids = $("#msgIds").val(); if(ids.length==0) { layer.msg('请选择记录'); } else { layer.confirm('确定删除选中的消息?', { btn: ['确定','取消'] //按钮 }, function(){ $.post("/thtml/memberfront/member/siteMsg/deletes.thtml",{"ids":ids,"r":Math.random()},function(data){ if(data.done) { layer.msg('删除成功'); window.location.reload(); } else { layer.msg(data.msg); } }); }, function(){ return; }); } } //查看记录 function editorActivity(url){ //0 代表未审核通过时编辑 1代表审核通过后查看(不可编辑状态) layer.open({ type: 2, title: '消息详情', shadeClose: true, isOutAnim: false, area: ['100%', "100%"], content: url }); } //删除记录 function deletData(msgId){ layer.confirm('确定删除此消息?', { btn: ['确定','取消'] //按钮 }, function(){ $.post("/thtml/memberfront/member/siteMsg/deletes.thtml",{"ids":msgId,"r":Math.random()},function(data){ if(data.done) { layer.msg('删除成功'); window.location.reload(); } else { layer.msg(data.msg); } }); }, function(){ return; }); } </script>