Layui 数据表格动态cols（字段）动态变化

                                                             Layui数据表格动态cols（字段）动态变化

1、代码

<!-- HTML -->
<!-- 表格载体 -->
<div class="layui-form layui-card-header">
    <div class="layui-inline">
        <label class="layui-form-label">分组类型</label>
        <div class="layui-input-inline">
            <input type="hidden" name="group_type"/>
            <select multiple="multiple" lay-filter="group_type">
                <option value="">请选择分组类型</option>
                <option value="hobby" selected>爱好</option>
                <option value="age">年龄</option>
                <option value="date">日期</option>
            </select>
        </div>
    </div>
    <div class="layui-inline">
        <button class="layui-btn" lay-submit lay-filter="LAY-table-search">
            <i class="layui-icon layui-icon-search"></i>
        </button>
    </div>
</div>
<table id="table-id" lay-filter="LAY-table"></table>

//JS
<script>
    //JS
    layui.use(['table', 'form', 'multiSelect'], function () {
        let table = layui.table,
            form = layui.form;         //表格

        let tableObj = table.render({
            elem: '#table-id',   //挂载对象，表ID
            url: '/.../.../...',    //数据来源路径
            cols: [[
                {field: 'hobby', title: '爱好'},
                {field: 'come_in', title: '收入'},
                {field: 'come_out', title: '支出'}
            ]],
            text: { //自定义文本，如空数据时的异常提示等。
                none: '暂无数据！'
            },
            where:{'target_date':'2020-02'},//查询条件
            page: false, //关闭分页
            parseData: function(res) {  //res 即为原始返回的数据
                return {
                    code: res.code,
                    msg: res.msg,
                    count: res.data.count,
                    data: res.data.data
                }
            },
            done(res, curr, count){}
        });

        //监听下拉框的值
        let groupArray = ['hobby'];  //默认按爱好分组
        form.on('select(group_type)', function(data) {
            setTimeout(() => {	//选中获取值异常问题
                let value = data.value;
                let bool = $(data.othis).find('.layui-this').children('div').hasClass('layui-form-checked');//判断是否勾选
                let index = $.inArray(value, groupArray);
                if (bool) { //如果选中；
                    if(index == -1){  //数组没值，
                        groupArray.push(value);   //把值压入数组
                    }
                } else {    //如果取消选中
                    if(index != -1){  //数组中存在
                        groupArray.splice($.inArray(value, groupArray), 1);   //移除数组指定元素
                    }
                }
                $('input[name="group_type"]').val(JSON.stringify(groupArray));
            }, 100);
        })

        //监听搜索按钮
        form.on('submit(LAY-table-search)', function(data){
            let field = data.field;

            let tableCols = assembleTableCol(groupArray);	//重新定义标题那行

            //执行重载
            table.reload('LAY-table', { //通用渲染方式
                where: field,   //搜索的参数
                page: {curr: 1}, //重新从第 1 页开始
                cols: tableCols
            });
            //或
            tableObj.reload({   //方法级渲染
                where: field,   //搜索的参数
                page: {curr: 1}, //重新从第 1 页开始
                cols: tableCols
            });
        });

        //重新拼接数组标题行
        function assembleTableCol(groupArray){
            let thisCols = [];  //定义标题空间
            let defaultField = [    //定义通用列
                {field: 'come_in', title: '收入'},
                {field: 'come_out', title: '支出'}
            ];

            let groupField = {  //hobby,age,date 对应下拉框的值
                'hobby': {field: 'hobby', title: '爱好'},
                'age': {field: 'age', title: '年龄'},
                'date': {field: 'date', align:'center',title: '日期'},
            };
            let length = groupArray.length;
            for (let i=0; i<length; i++){ //追加动态标题
                let addObj = groupField[groupArray[i]];
                thisCols.push( addObj );
            }
            let defaultLength = defaultField.length;
            for(let j=0;j<defaultLength;j++){   //追加默认标题
                thisCols.push( defaultField[j]);
            }
            return [thisCols];  //注意结果为：array[0]=thisCols
        }

    });
</script>