100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > Layui数据表格动态cols(字段)动态变化(2)

Layui数据表格动态cols(字段)动态变化(2)

时间:2020-03-06 19:14:39

相关推荐

Layui数据表格动态cols(字段)动态变化(2)

Layui数据表格动态cols(字段)动态变化(2)

一、说明:(2)和(1)的不同:

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

二、Layer表格重载的API :

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

三、相关代码如下所示:

//表格渲染let tableObj = table.render({elem: '#LAY-user-table',//表table标签IDurl: '/././.',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);

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。