zoukankan      html  css  js  c++  java
  • 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','4%',display: none;}"></th>-->
                                            <th lay-data="{field:'id',sort:'true','4%'}">序号</th>
                                            <th lay-data="{field:'ids',sort:'true','10%'}">编号</th>
                                            <th lay-data="{field:'name','50%'}">内容</th>
                                            <th lay-data="{field:'beginTime','10%'}">状态</th>
                                            <th lay-data="{field:'endTime',sort:'true','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>
    
    
    
     
  • 相关阅读:
    图片的使用
    对话框
    窗体
    浏览器与android移动端视频互播技术实现
    Arcengine实现创建网络数据集札记(三)
    Arcengine实现创建网络数据集札记(二)
    Arcengine实现创建网络数据集札记(一)
    2019年年初iOS招人心得笔记(附面试题)
    2019年,200道面试题打造最受企业欢迎的iOS程序猿!
    BAT面试总结——iOS开发高级工程师
  • 原文地址:https://www.cnblogs.com/lxk233/p/9323890.html
Copyright © 2011-2022 走看看