Layui__表格方法级渲染表格

Posted 2021-02-20 kikyoqiang

方法级渲染表格

        <div class="layui-card-body">
            <table id="tableId" class="layui-table layui-form" lay-filter="tableFilter"></table>
        </div>

<script>
    layui.use([‘element‘, ‘form‘, ‘layedit‘, ‘laydate‘, ‘upload‘, ‘colorpicker‘, ‘table‘], function () {
        var form = layui.form,
            table = layui.table,
            layer = layui.layer,
            element = layui.element,
            layedit = layui.layedit,
            laydate = layui.laydate,
            upload = layui.upload,
            paginathing = layui.paginathing,
            colorpicker = layui.colorpicker;
		
        table.render({
            elem: ‘#tableId‘
            , url: ‘/Manager/Messages/datagrid‘
            , method: ‘POST‘    //方式
            , page: true    //是否开启分页
            , limits: [10, 20, 30, 60, 90, 100]
            , limit: 10      //默认采用20
            , cellMinWidth: 120
            , even: true    //开启隔行背景
            , id: ‘searchID‘
            , done: function (res, curr, count) {
                console.log("=====加载后回调");
                console.log(res);
                //layer.close(index);//关闭
            }
            , cols: [[      //标题栏
                //{ checkbox: false }
                { field: ‘Id‘, title: ‘ID‘, width: 80 }
                , { field: ‘Contacts‘, title: ‘联系人‘, width: 120 }
                , { field: ‘Phone‘, title: ‘联系电话‘, width: 120 }
                , { field: ‘Email‘, title: ‘Email‘, width: 120 }
                , { field: ‘Content‘, title: ‘留言‘, width: 120 }
                , { field: ‘UserIntention‘, title: ‘客户意向‘, width: 120 }
                , { field: ‘CompanyName‘, title: ‘联系人公司‘, width: 120 }
                , { field: ‘AddDate‘, title: ‘留言日期‘, width: 120 }
                , { fixed: ‘right‘, title: ‘操作‘, align: ‘center‘, toolbar: ‘#toobar‘, width: 200 }
            ]]
        });

        //监听工具条
        table.on(‘tool(test)‘, function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if (layEvent === ‘detail‘) { //查看
                //do somehing
            } else if (layEvent === ‘del‘) { //删除
                layer.confirm(‘真的删除行么‘, function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if (layEvent === ‘edit‘) { //编辑
                //do something

                //同步更新缓存对应的值
                obj.update({
                    username: ‘123‘
                    , title: ‘xxx‘
                });
            } else if (layEvent === ‘LAYTABLE_TIPS‘) {
                layer.alert(‘Hi，头部工具栏扩展的右侧图标。‘);
            }
        });

    });
</script>