layui之layer打開table后分頁無效的解決方法


1.原代碼:

<body>
<div id="showalladdableavms" style="display: none;width:100%">
    <table id="demo" lay-filter="test"></table>
</div> -->
</body>
<script>
filldata(table,"#demo","getDateForUserJurisdiction.gds");
layer.open({
                               type:1,
                               title:"添加機器",
                               maxmin:true,
                               area:["100%","100%"],
                               btn:["確認添加"],
                               content: $("#showalladdableavms").html(),
                               success: function (layero) {
                              var btn = layero.find('.layui-layer-btn');
                              btn.css({'position':'relative','top':"-93%","text-align":"left","left":"8%"});
                              },
                              btn1:function(index, layero){
                                  //console.log(layero, index);
                                  var res = getoperavms('demo');
                                  console.dir(res)
                              }
                             });
function filldata(table,id,url){
              table.render({
                  elem: id,
                  height:"560"
                  ,url:url //數據接口
                  ,method: 'POST'
                  ,cellMinWidth: 80 //全局定義常規單元格的最小寬度,layui 2.2.1 新增
                  ,page:true/*  { //支持傳入 laypage 組件的所有參數(某些參數除外,如:jump/elem) - 詳見文檔
                            first: true //顯示首頁
                           ,last: true //顯示尾頁
                  } */
                   ,limits : [10,20,30]
                   ,limit:10
                  ,request: {
                    pageName: 'page',//頁碼的參數名稱,默認:page
                  } 
                  ,cols: [[ //表頭
                             {checkbox:true} 
                          ,{field: 'id', title: 'ID', width:80, sort: true}
                          ,{field: 'avm', title: '機器編號', width:80}
                          ,{field: 'company', title: '公司名稱', width:80}
                          ,{field: 'area', title: '區域', width:80, sort: true}
                          ,{field: 'circuit', title: '線路', width:80} 
                          ,{field: 'position', title: '位置', width: 177}
                          ,{field: 'goodsxml', title: '商品庫', width: 80, sort: true}
                          
                        ]]
                  ,where : {
                  //傳值 startDate : startDate,
                          allavm:'yes'
                    }
                  ,response: {
                         // statusName: 'code' //數據狀態的字段名稱,默認:code
                         //,statusCode: 200 //成功的狀態碼,默認:0
                         //,msgName: 'message' //狀態信息的字段名稱,默認:msg
                         countName: 'total' //數據總數的字段名稱,默認:count
                         ,dataName: 'rows' //數據列表的字段名稱,默認:data
                        }
                   /* done:function(){
                             layer.open({
                                   type:1,
                                   maxmin:true,
                                   area:["800px","600px"],
                                   content: $("#showalladdableavms")
                                 });
                             } */
                 });
        }

</script>

2.現象:分頁,選擇框等無法操作,查了查說是使用html()方式得到的內容會丟失dom對象的事件,如果直接用dom會出現一直無法展示dom內容的問題。

3.解決:動態添加:

var dom = $("<div id='showalladdableavms' style='display:none;width:100%'><table id='demo' lay-filter='test'></table></div>");
$('body').append(dom)

這種方式可以很好的解決寫死在頁面里的dom對象打開時不展示,顯示呈暗灰色調的問題,同時,dom對象的事件也得到了支持,完美

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM