对layui数据表格动态cols(字段)动态变化详解

当我们使用layui数据表格时，往往需要动态变化表格的字段，比如说根据不同的搜索条件显示不同的字段等。

在layui中实现动态变化字段，需要以下几个步骤：

1.在 layui 的 cols 数组里，使用一个对象来表示一列，而一个对象可以设置多个属性，比如：field、title、width、sort、type 等等。

2.当需要动态变化字段时，我们需要重新定义 cols 数组，动态添加或删除某些字段。

在下面的示例中，假设有一个学生表格，在搜索框中根据性别条件选择是否显示年龄和班级字段。

示例1：

//定义表格的页面
<table id="studentTable" lay-filter="student"></table>

//定义对应的JS代码
layui.use('table', function(){
  var table = layui.table;

  //1.定义表格的所有字段
  var colsAll = [[
    {field: 'id', title: 'ID', width: 80},
    {field: 'name', title: '姓名', width: 120},
    {field: 'sex', title: '性别', width: 80},
    {field: 'age', title: '年龄', width: 80},
    {field: 'class', title: '班级', width: 120},
    {field: 'score', title: '成绩', width: 80, sort: true},
  ]];

  //2.创建表格，并设置默认显示所有字段
  table.render({
    elem: '#studentTable',
    cols: colsAll,
    data: [
      {id: 1, name: '张三', sex: '男', age: 20, class: '1班', score: 80},
      {id: 2, name: '李四', sex: '女', age: 21, class: '2班', score: 85},
      {id: 3, name: '王五', sex: '男', age: 19, class: '3班', score: 90},
      {id: 4, name: '赵六', sex: '女', age: 22, class: '4班', score: 87},
      {id: 5, name: '刘七', sex: '男', age: 18, class: '5班', score: 95},
    ],
  });

  //3.监听搜索框中的性别条件变化，根据性别条件动态变化表格的字段
  form.on('select(sex)', function(data){
    var cols;
    if(data.value === 'male'){
      //如果选择男性，则显示年龄和班级字段      
      cols = colsAll.concat([[{field: 'age', title: '年龄', width: 80}, {field: 'class', title: '班级', width: 120}]]);
    }else if(data.value === 'female'){
      //如果选择女性，隐藏年龄和班级字段
      cols = colsAll.concat([[{field: 'score', title: '成绩', width: 80, sort: true}]]);
    }else{
      //如果选择不限，显示所有字段
      cols = colsAll;
    }
    table.reload('studentTable', {cols: cols});
  });
});

//HTML中对应的搜索框
<div class="layui-input-inline">
  <select lay-filter="sex">
    <option value="">不限</option>
    <option value="male">男</option>
    <option value="female">女</option>
  </select>
</div>

在上述示例中，我们通过监听性别条件的变化，动态变化表格的字段。当选择男性时，显示年龄和班级字段，当选择女性时，隐藏年龄和班级字段，并重新加载表格。当选择不限时，显示所有字段。

示例2：

在这个示例中，假设我们希望在表格中增加一个操作列，用于删除数据。

//定义表格的页面
<table id="studentTable" lay-filter="student"></table>

//定义对应的JS代码
layui.use('table', function(){
  var table = layui.table;

  //1.定义表格的所有字段，不包括操作字段
  var colsAll = [
    {field: 'id', title: 'ID', width: 80},
    {field: 'name', title: '姓名', width: 120},
    {field: 'sex', title: '性别', width: 80},
    {field: 'age', title: '年龄', width: 80},
    {field: 'class', title: '班级', width: 120},
    {field: 'score', title: '成绩', width: 80, sort: true},
  ];

  //2.创建表格，不包括操作字段
  table.render({
    elem: '#studentTable',
    cols: [colsAll],
    data: [
      {id: 1, name: '张三', sex: '男', age: 20, class: '1班', score: 80},
      {id: 2, name: '李四', sex: '女', age: 21, class: '2班', score: 85},
      {id: 3, name: '王五', sex: '男', age: 19, class: '3班', score: 90},
      {id: 4, name: '赵六', sex: '女', age: 22, class: '4班', score: 87},
      {id: 5, name: '刘七', sex: '男', age: 18, class: '5班', score: 95},
    ],
  });

  //3.动态增加操作列
  var cols = colsAll.concat([{fixed: 'right', title: '操作', width: 80, align:'center', toolbar: '#toolbar'}]);
  table.reload('studentTable', {cols: [cols]});

  //4.监听操作列中的删除按钮
  table.on('tool(student)', function(obj){
    if(obj.event === 'delete'){
      layer.confirm('真的要删除该条数据吗？', function(index){
        obj.del();
        layer.close(index);
      });
    }
  });
});

//HTML中对应的操作列模板
<script type="text/html" id="toolbar">
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>

在上述示例中，我们首先定义了表格的所有字段（不包括操作字段），然后创建表格。接着，动态增加一个操作列，用于删除数据。最后，我们监听操作列中的删除按钮，实现删除该条数据的操作。

实际开发中，我们可能遇到更加复杂的动态变化字段的场景，但是基本的原理都是一样的，就是重新定义 cols 数组来实现。