Layuiデータテーブルの動的cols(フィールド)の動的変化

    

            
        

            
            
                       
                  
                  
                  
            
        
    
    

        
            
        
    




//JS
 

    //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
        }

    });