layui 动态列设置

在 layui 中，可以利用 `table` 模块的 `cols` 属性来动态设置表格列。下面是一个简单的例子：

layui.use(['table', 'form'], function() {
  var table = layui.table;
  var form = layui.form;

  // 渲染表格
  table.render({
    elem: '#demo',
    url: '/demo/table/user/', // 数据接口
    cols: [[ // 初始列
      {field: 'id', title: 'ID', width: 80},
      {field: 'username', title: '用户名', width: 120},
      {field: 'email', title: '邮箱', minWidth: 150},
      {field: 'sex', title: '性别', width: 80, templet: '#sexTpl'},
      {field: 'city', title: '城市', width: 100},
      {field: 'sign', title: '签名', minWidth: 200},
      {field: 'logins', title: '登入次数', width: 100},
      {field: 'wealth', title: '财富', width: 135, sort: true},
      {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    ]]
  });

  // 监听radio按钮的变化，动态改变表格列
  form.on('radio(col)', function(data) {
    var cols = table.config.cols[0]; // 获取初始列
    var newCols = []; // 新列
    for (var i = 0; i < cols.length; i++) {
      if (data.value === 'all' || cols[i].field === 'id' || cols[i].field === 'wealth') {
        newCols.push(cols[i]); // 如果是全选或者是id、wealth列，则保留
      } else if (cols[i].field.indexOf(data.value) !== -1) {
        newCols.push(cols[i]); // 如果是选中的列，则保留
      }
    }
    table.reload('demo', {
      cols: [newCols] // 重新渲染表格，设置新列
    });
  });
});

在这个例子中，我们首先使用 `table.render` 方法渲染表格，并设置了初始列。接着，我们监听了一个 radio 按钮组的变化事件，根据选中的值动态生成新的列数组 `newCols`，最后利用 `table.reload` 方法重新渲染表格并设置新列。在监听函数中，我们采用了遍历初始列的方式，根据选中的值来判断是否要保留该列。需要注意的是，我们保留了 id 和 wealth 列，因为这两列是在初始列中就存在的。同时，我们使用了 `table.config.cols[0]` 来获取初始列。在这个例子中，我们还用到了 layui 的表格列模板和工具栏等功能，需要在 HTML 中定义。具体代码可以查看下面的完整示例。

HTML:

<div class="layui-form">
  <div class="layui-form-item">
    <label class="layui-form-label">显示列：</label>
    <div class="layui-input-block">
      <input type="radio" name="col" value="all" title="全部" checked>
      <input type="radio" name="col" value="username" title="用户名">
      <input type="radio" name="col" value="email" title="邮箱">
      <input type="radio" name="col" value="sex" title="性别">
      <input type="radio" name="col" value="city" title="城市">
      <input type="radio" name="col" value="sign" title="签名">
      <input type="radio" name="col" value="logins" title="登入次数">
    </div>
  </div>
</div>

<table id="demo" lay-filter="test"></table>

<!-- 定义表格列模板 -->
<script type="text/html" id="sexTpl">
  {{# if(d.sex === '男'){ }}
    <span style="color: green;">{{d.sex}}</span>
  {{# } else if(d.sex === '女') { }}
    <span style="color: red;">{{d.sex}}</span>
  {{# } else { }}
    <span>{{d.sex}}</span>
  {{# } }}
</script>

<!-- 定义表格工具栏 -->
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

完整示例：https://www.layui.com/demo/table/dynamicColumn.html