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);

Layui数据表格动态cols（字段）动态变化（2）相关推荐

Layui数据表格中动态插入行插入下拉框
想要在已加载的layui数据表格动态的插入一行,首先要在加载表格的时候设置它的event值.因为我这里是点击序号就添加一行,所以我在序号中设置了它的event值!当然在静态表格当中也是一样的操作,在你 ...
layui数据表格某个字段不显示问题
表格是用layui数据表格的方法渲染方式渲染的大概这个样子 var table = layui.table;//执行渲染 table.render({elem: '#demo' //指定原始表格元素 ...
layui数据表格如何获取id_LayUI之table数据表格获取行、行高亮等相关操作
前言目前LayUI数据表格既美观有不乏一些实用功能.基本上表格应有的操作已经具备,LayUI作者[贤心]肯定是煞费苦心去优化,此处致敬.但是实话实话,如果单纯那数据表格功能来说,EasUI的数据表格 ...
5. Layui数据表格的快速使用
飘向天边,我们慢慢明白,有些告别,就是最后一面.--<云边有个小卖部> Layui数据表格的快速使用 1.什么是数据表格 2.方法渲染 3.自动渲染 4.把静态表格转换为动态 1.什么是数 ...
layui 数据表格下拉框_LayUi数据表格中嵌套下拉框
layui嵌套下拉框实用方法(附效果图) 在做项目时遇到一个问题,在layui 的数据表格table里面如何做一个下拉框呢?效果图如下: 这样的效果想必是最理想的了思路分析: 我们可以通过layui ...
Layui数据表格的绑定
<Layui数据表格的绑定> 开发工具与关键技术:Visual Studio /.NET /layui插件作者:肖春庆撰写时间:2019年06月17日在我们使用软件的过程当中有着许多 ...
php分页显示数据表格显示,php+layui数据表格实现数据分页渲染代码
一.html 二.js 说明:需要引入layui中的table和laytpl模板引擎,laytpl可以自定义事件及自定义数据字段等查看详情 {{# if (d.hotcake === '超级爆款') ...
Layui数据表格的引用
对于一些编程插件的引用,相信大多数的编程人员都不会感觉到陌生,因为在对程序开发和项目开发的过程中往往都会需要引用到插件,那么至于插件呢,也有很多种,比如: bootstrap jquery layui ...
Layui 数据表格合计
Lay-ui数据表格合计实现基础的数据表格合计获取合计数据修改合计数据合计后计算平均值去除小数合计所有数据(有分页) 编辑后重新合计总代码阅读提示:本人萌新一枚,写此博客仅仅是记录一下 ...
Layui数据表格之图片的处理
Layui数据表格图片的处理现在的问题是使用layui数据表格如何插入图片. 如果我们是静态表格可直接用img标签嵌入即可,但如果使用table.render函数渲染表格和就会和普通的字段有所不同. ...

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

Layui数据表格动态cols（字段）动态变化（2）相关推荐

最新文章

热门文章