current position:Home>Layui table and pop-up layer display table

Layui table and pop-up layer display table

2021-08-25 22:43:19 Don't eat shallow water fish

Control

form + Pop-up layer
The pop-up layer content is table

The page display

scene

There is an operation event in the table , In operation ” see “ function , Click on ” see “ A pop-up box appears , Display the table in the pop-up layer , The table data of the pop-up layer is the data requested again

Use

html Code

<!--body Initialization table defined in -->
<table id="detail" lay-filter="detail"></table>

<!--body In the definition of , View of operation events ( edit 、 Deleting is similar )-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-xs" lay-event="detail"> see </a>
</script>

js Code

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

    // The key ! Monitor toolbar 
    table.on('tool(detail)', function(obj){  // detail For the table in front of the pop-up box id
        var data = obj.data;
        if(obj.event === 'detail'){  //  monitor ” see “ Button event 
            layer.open({  //  Open the pop-up box 
                type: 1,  //  This is the key !1 For page layer 
                title: ' Change details ',
                shadeClose: true,  // Turn on the mask, turn off 
                // 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>',
                //  Pop up the layer table definition 
                success: function () {
                    table2.render({
                        elem: '#transfer'  //  Pop up the layer table id
                        ,url: "{% url 'index:transfers' %}"  //  Back end request URL Address 
                        ,where: {  // derail The values of the table 
                            'diff_date': data.diff_date
                            ,'source': data.data_center
                            ,'direction': data.change
                            ,'num': data.num
                        }
                        // ,method: 'post'
                        ,page: true
                        //  The following is a transfer Definition of table 
                        ,cols: [[
                            {field: 'diff_date', title: ' Time ', width: 150}
                            ,{field: 'source', title: ' Data Center '}
                            ,{field: 'direction', title: ' Direction ', width: 80}
                            ,{field: 'destination', title: ' source / Where to go '}
                            ,{field: 'serial_num', title: ' Serial number ', width: 230}
                            ,{field: 'brand', title: ' brand '}
                            ,{field: 'model', title: ' model ', width: 200}
                            ,{field: 'purchase', title: ' Purchase No '}
                        ]]
                        ,response: {
                            statusName: 'code' // Field name that specifies the data status , Default :code
                            ,statusCode: 10000 // Specify the successful status code , Default :0
                            ,msgName: 'message' // Specify the field name of the status information , Default :msg
                            ,countName: 'total' // Field name that specifies the total number of data , Default :count
                            ,dataName: 'data' // Specifies the field name of the data list , Default :data
                        }
                    })
                }
            });
        }
    });
});
</script>

summary

Pop up layer type and content Is the key

Have to say Layui It's really powerful ,layer.open Medium content More powerful !

 

There should be a better way , Welcome to point .

 

copyright notice
author[Don't eat shallow water fish],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210825224315355K.html

Random recommended