layui动态表格复选框实现单选功能

在 layui 动态表格中，由于表格数据是异步加载的，因此需要在数据加载完成后，才能监听复选框的选中事件，实现单选功能。具体实现步骤如下：

1. 在页面中定义数据表格，并设置其复选框列的 lay-skin 属性为 primary，表示使用原始风格的复选框。同时，设置表格的 lay-filter 属性为 demo，用于后续的事件监听。

<table class="layui-table" lay-filter="demo">
  <thead>
    <tr>
      <th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>
      <th>ID</th>
      <th>姓名</th>
      <th>性别</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

2. 在 JavaScript 代码中，定义数据接口，并使用 layui 的 table 模块进行数据表格的初始化。在数据加载完成后，监听表格的复选框选中事件，并在事件处理函数中，根据选中状态来判断是否需要取消其他行的选中状态。

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

  // 定义数据接口
  var dataUrl = '/getData';

  // 初始化数据表格
  table.render({
    elem: '#demo',
    url: dataUrl,
    cols: [[
      {type:'checkbox', lay-skin:'primary'},
      {field:'id', title:'ID'},
      {field:'name', title:'姓名'},
      {field:'gender', title:'性别'},
      {field:'city', title:'城市'}
    ]],
    done: function(res, curr, count) {
      // 监听表格复选框选择
      table.on('checkbox(demo)', function(obj){
        var checkStatus = table.checkStatus('demo');
        var data = checkStatus.data;
        var isChecked = obj.checked;
        var rowIndex = obj.data.LAY_TABLE_INDEX;
        if (isChecked) {
          // 如果选中，则取消其他行的选中状态
          for (var i = 0; i < data.length; i++) {
            if (data[i].LAY_TABLE_INDEX != rowIndex) {
              table.checkStatus('demo').data[i].LAY_CHECKED = false;
            }
          }
        }
      });
    }
  });
});

在上述代码中，我们首先定义数据接口，然后使用 layui 的 table 模块进行数据表格的初始化。在数据加载完成后，使用 done 回调函数监听表格的复选框选中事件，并在事件处理函数中，根据选中状态来判断是否需要取消其他行的选中状态。这样，就可以实现动态表格复选框的单选功能了。