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];
}
发布了223 篇原创文章 · 获赞 36 · 访问量 15万+

猜你喜欢

转载自blog.csdn.net/qq_36025814/article/details/104244083