1.原代碼:css
<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內容的問題。html
3.解決:動態添加:app
var dom = $("<div id='showalladdableavms' style='display:none;width:100%'><table id='demo' lay-filter='test'></table></div>"); $('body').append(dom)
這種方式能夠很好的解決寫死在頁面裏的dom對象打開時不展現,顯示呈暗灰色調的問題,同時,dom對象的事件也獲得了支持,完美dom