Layui表格及彈出層顯示表格

控件

表格 + 彈出層
彈出層內容為表格

頁面展示

場景

表格存在操作事件，操作中有”查看“功能，點擊”查看“出現彈出框，在彈出層顯示表格，彈出層的表格數據為再次請求得到的數據

使用

html代碼

<!--body中定義初始化表格-->
<table id="detail" lay-filter="detail"></table>

<!--body中定義，操作事件之查看（編輯、刪除也類似）-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-xs" lay-event="detail">查看</a>
</script>

js代碼

<script type="text/javascript">
layui.use(['table', 'layer', 'form'], function (){
    var table = layui.table
    ,table2 = layui.table
    ,layer = layui.layer
    ,form = layui.form;

    //關鍵！監聽工具條
    table.on('tool(detail)', function(obj){  // detail為彈出框前的表格id
        var data = obj.data;
        if(obj.event === 'detail'){  // 監聽”查看“按鈕事件
            layer.open({  // 打開彈出框
                type: 1,  // 這個很關鍵！1為頁面層
                title: '變化詳情',
                shadeClose: true,  //開啟遮罩關閉
                // shade: 0.8,
                area: ['70%', '90%'],
                maxmin: true,
                content: '<div class="layui-container" style="width: 98%"><table id="transfer" lay-filter="transfer" class=""></table></div>',
                // 彈出層表格定義
                success: function () {
                    table2.render({
                        elem: '#transfer'  // 彈出層表格id
                        ,url: "{% url 'index:transfers' %}"  // 后端請求URL地址
                        ,where: {  // derail表格的值
                            'diff_date': data.diff_date
                            ,'source': data.data_center
                            ,'direction': data.change
                            ,'num': data.num
                        }
                        // ,method: 'post'
                        ,page: true
                        // 以下為transfer表格的定義
                        ,cols: [[
                            {field: 'diff_date', title: '時間', width: 150}
                            ,{field: 'source', title: '數據中心'}
                            ,{field: 'direction', title: '方向', width: 80}
                            ,{field: 'destination', title: '來源/去處'}
                            ,{field: 'serial_num', title: '序列號', width: 230}
                            ,{field: 'brand', title: '品牌'}
                            ,{field: 'model', title: '型號', width: 200}
                            ,{field: 'purchase', title: '采購編號'}
                        ]]
                        ,response: {
                            statusName: 'code' //規定數據狀態的字段名稱，默認：code
                            ,statusCode: 10000 //規定成功的狀態碼，默認：0
                            ,msgName: 'message' //規定狀態信息的字段名稱，默認：msg
                            ,countName: 'total' //規定數據總數的字段名稱，默認：count
                            ,dataName: 'data' //規定數據列表的字段名稱，默認：data
                        }
                    })
                }
            });
        }
    });
});
</script>

總結

彈出層的type和content很關鍵

不得不說Layui真的很強大，layer.open中的content更強大！

 

應該還有更好的方法，歡迎指點。