解决Layui数据表格动态cols字段变化问题

Layui动态字段场景与封装思路

在进行搜索查询时，经常需要按日期时间段进行筛选，并展示每个日期的具体数据。关于后台如何拼装这些数据，此处暂不展开讨论。

为了解决字段动态变化的问题，可以将表格的渲染逻辑封装在一个独立的函数中，该函数接收一个包含字段配置的数组作为参数。

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字段变化的完整解决方案，希望能为开发者提供参考，并感谢大家的支持。