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

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

一、说明：（2）和（1）的不同：

1. 动态列的计算方式不同
2. （1）用的是 [ 自动化渲染的重载 ] ；（2）用的是 [ 方法级渲染的重载 ]。（这篇博客主要是想体现这一点，因为有的时候（有 操作列 toolbar 的时候）自动化渲染表格列并不能成功，要用方法级渲染才行）

二、Layer表格重载的API ：

    在页面搜索：很多时候，你需要对表格进行重载。比如数据全局搜索。以下方法可以帮你轻松实现这类需求（可任选一种）

三、相关代码如下所示：

//表格渲染
let tableObj = table.render({
    elem: '#LAY-user-table',	//表table标签ID
    url: '/././.',
    where: {type: type},
    cols: [[
        {field: 'id', width: 80, title: 'ID', sort: true},
        {field: 'type', title: '类型'},
        {field: 'source', title: '来源'},
        {field: 'name', title: '姓名'},
        {field: 'age', title: '年龄'},
        {field: 'create_time', title: '创建时间'},
        {title: '操作', width: 210, align: 'center', fixed: 'right', toolbar: '#table-oper-admin'}
    ]],
    text: {
        none: '暂无相关数据！'
    },
    page: true,
    parseData: function(res) {
        return {
            code: res.code,
            msg: res.msg,
            count: res.data.count,
            data: res.data.data
        }
    },
    done:function(){

    }
});

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

    let tableCols = assembleTableCol(field.type);	//重新定义表格列

    //执行重载
    /*自动化渲染的重载
    table.reload('LAY-user-table', {
        where: field,
        page: {curr: 1},
        cols: tableCols
    });*/


    //方法级渲染的重载
    tableObj.reload({
        where: field,
        page: {curr: 1},
        cols: tableCols
    });
});

//动态处理 表格列
//如果type=1，则显示[类型、来源]列
function assembleTableCol(type){
    let startCols = [
        {field: 'id', width: 80, title: 'ID', sort: true}
    ];

    let middleCols = [];
    if( type == 1 ){
        middleCols = [
            {field: 'type', title: '类型'},
            {field: 'source', title: '来源'}
        ];
    }

    let endCols = [
        {field: 'name', title: '姓名'},
        {field: 'age', title: '年龄'},
        {field: 'create_time', title: '创建时间'},
        {title: '操作', width: 210, align: 'center', fixed: 'right', toolbar: '#table-oper-admin'}
    ];

    let finallyCols = [];
    if(middleCols){
        finallyCols = startCols.concat(middleCols);
    }
    finallyCols = finallyCols.concat(endCols);

    return [finallyCols];
}

四、注意

由于版本不同，可能显示不出我这个Demo的效果。

我这个 Demo 的版本是 2.4.5；2.5.5就显示不出我这个效果。

查看Layui版本：alert(layui.v);