如何实现layui数据表格动态cols字段根据不同条件实时变化的操作？

本文共计405个文字，预计阅读时间需要2分钟。

在搜索查询时，经常会遇到按日期时间段查询，并显示每个日期的数据量。后台对数据进行了封装，具体细节不予讨论。表格渲染函数中，通过cols_arr参数传入字段数组，实现以下功能：

javascriptfunction tableRender(cols_arr) { // 表格渲染逻辑}

如搜索查询时，常会遇到按日期时间段查询，并显示查询的每个日期的数据，后台拼装数据此处不讨论。

把表格渲染封装在函数里面，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(字段)动态变化详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持易盾网络。