js+layui

自动生成表格

    //表格渲染
    table.render({
        elem: '#credit-table-toolbar'
        , url: ''
        , toolbar: '#credit-table-toolbar-toolbarDemo'
        , title: '',
        where: {"authStatus": 1}
        , cols: [[
            {type: 'checkbox', field: 'userId'}
            , {field: 'platformNum', title: '平台账号'}
            , {
                field: 'type', title: '平台', align: 'left',
                templet: function (data) {
                    for (i = 0; i < buyerMessageType.length; i++) {
                        if (buyerMessageType[i].data == data.type) {
                            return buyerMessageType[i].name;
                        }
                    }

                    return data.type;
                }
            }
            , {field: 'telPhone', title: '打标人账号', align: 'left'}
            , {
                field: 'punish', title: '认证类型', align: 'left'
            }
            , {field: 'authDate', title: '认证日期', align: 'left'}
            , {
                field: 'authStatus', title: '审核状态', align: 'left',
                templet: function (data) {
                    for (i = 0; i < authStatus.length; i++) {
                        if (authStatus[i].data == data.authStatus) {
                            return authStatus[i].name;
                        }
                    }

                    return data.authStatus;
                }
            }, {
                title: '操作',
                align: 'left',
                templet: function (data) {
                    return ' <a class="layui-btn un-background-btn" lay-event="detail" title="查看详情"><i class="layui-icon icon-eye"></i></a>' +
                        '<button class="layui-btn un-background-btn"  title="日志" lay-event="log">查看日志</button>'
                }
            }
        ]]
        , page: true
        //回调函数查询不同状态数据总数
    });

        <div class="layui-card-body">
            <table class="layui-hide" id="credit-table-toolbar" lay-filter="credit-table-toolbar"></table>
        </div>

监听行工具事件

    //监听行工具事件
    table.on('tool(credit-table-toolbar)', function (obj) {
        var data = obj.data;
        id = data.applyCreditId;
        imgs = data.imgs;
        buyerId = data.buyerId;
        if (obj.event === 'detail') {
            var obj = {
                data: data,
                url: ""
            };
            layuiOpen(obj);
        } else if (obj.event === 'log') {
            layer.open({
                type: 2,
                title: '操作日志',
                area: ['900px', '500px'],
                content: ''
            });
        }
    });

头工具栏事件

   //头工具栏事件
    table.on('toolbar(feedBack-table-toolbar)', function (obj) {
        var checkStatus = table.checkStatus(obj.config.id);
        switch (obj.event) {
            case "export":
                var data = checkStatus.data;
                var obj = {
                    data: checkStatus,
                    path: ""
                };
                excel(obj);
                break;
        }

    });

监听搜索

    //监听搜索
    form.on('submit(LAY-user-front-search)', function (data) {
        var field = data.field;
        field['checkBoxIdList'] = null;
        //执行重载
        table.reload('feedBack-table-toolbar', {
            where: field,
            page: {
                curr: 1
            }
        });
        return false;
    });