对layui数据表格动态cols(字段)动态变化详解
2019-10-26 07:03
7087 查看
如搜索查询时,常会遇到按日期时间段查询,并显示查询的每个日期的数据,后台拼装数据此处不讨论。
把表格渲染封装在函数里面,cols_arr是传入的字段数组
function tableRender(cols_arr){ table.render({ elem: '#demo' , url: 请求地址 //数据接口 , method: 'post' , page: true //开启分页 , cols: cols_arr , id: 'demo' , limit: 10 , limits: [10, 20, 50, 100, 200, 500] , done: function (res) {} }); }
监听搜索提交
// 搜索 form.on('submit(demo1)', function (obj) { var start_date = obj.field.start_date; var end_date = obj.field.end_date; if (start_date != '' && end_date != ''){ var all_date = getAll(start_date, end_date); if ( all_date.length>7){ layer.msg('查询天数不得超过7天', {icon: 2, anim: 6}); return false; } window.cols_arr[0] = []; window.cols_arr[0][0] = {field:'group_id', title: '群号', align: 'center'}; all_date.forEach(function(value,i){ window.cols_arr[0][i+1]=({field: value, title: value, align: 'center'}) }) } tableRender(window.cols_arr); table.reload('demo', { page: { curr: 1 }, where: { all_date: all_date } }); return false; });
如果只是重载,cols属性不会改变,解决思路:重载前执行一次封装了渲染的函数,也就是tableRender();用全局变量或传参的形式都行
以上这篇对layui数据表格动态cols(字段)动态变化详解就是小编分享给大家的全部内容了,希望能给大家一个参考
您可能感兴趣的文章:
相关文章推荐
- 如何动态获取数据库表中的数据,数据库中的字段是在变化的
- layui动态表格 动态查询数据
- layui前端框架表格实现动态数据自动勾选复选框,摸索了很久才找到这个办法。
- javascript动态创建表格及添加数据实例详解
- Layui给数据表格动态添加一行并跳转到添加行所在页的方法
- 详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
- Layui给数据表格动态添加一行并跳转到添加行所在页
- layui 动态数据表格的学习
- layui框架table 数据表格的方法级渲染详解
- layui 中 表格方法渲染时,将数字或价格的动态数据加上千分符
- javascript动态创建表格及添加数据实例详解
- (前端)layUI数据表格动态渲染含表头
- Extjs4.2 表格动态数据加载,以及动态选择分页条目,前后台详解
- Datagrid数据表格在不同大小的显示器动态变化高度
- 原生js动态实现添加表格数据并某列求和
- layui form表单提交之后重新加载数据表格的方法
- layui实现把数据表格时间戳转换为时间格式的例子
- [C#]用C#动态生成Word文档并将数据填入Word表格中
- javascript动态添加删除表格数据管理
- layui数据表格实现重载数据表格功能(搜索功能)