3行代码搞定Layui表格行自动勾选：字段值驱动实现指南

3行代码搞定Layui表格行自动勾选：字段值驱动实现指南

【免费下载链接】layui 项目地址: https://gitcode.com/gh_mirrors/lay/layui

在后台管理系统开发中，你是否经常遇到需要根据表格数据自动勾选特定行的场景？比如批量操作时默认选中"已审核"状态的记录，或者高亮显示"库存不足"的商品行。本文将详解如何通过Layui表格组件的setRowChecked方法，仅需几行代码即可实现基于字段值的自动选中功能，彻底告别繁琐的手动操作。

实现原理与核心API

Layui表格组件通过setRowChecked方法提供了行选中状态的程序化控制能力。该方法定义在src/modules/table.js源码的第36-48行，支持通过单选(radio)或多选(checkbox)模式设置行选中状态。

// 行单击事件示例代码 [src/modules/table.js](https://link.gitcode.com/i/e284df7e87d98833e13253228654e818#L36-L48)
table.on('row(ID-table-demo-setRowChecked)', function(obj){
  var data = obj.data; // 获取当前行数据
  
  // 标注当前点击行的选中状态
  obj.setRowChecked({
    type: 'radio' // radio 单选模式；checkbox 复选模式
  });
});

完整实现步骤

1. 基础表格渲染

首先需要创建包含目标字段的表格实例。以下示例使用status字段作为判断依据，完整代码可参考docs/table/examples/setRowChecked.md：

<table class="layui-hide" id="demoTable"></table>

<script>
layui.use('table', function(){
  var table = layui.table;
  
  // 渲染表格
  table.render({
    elem: '#demoTable',
    url: '/static/json/table/user.json', // 实际项目替换为你的接口
    cols: [[
      {type: 'checkbox', fixed: 'left'}, // 复选框列
      {field: 'id', title: 'ID', width:80},
      {field: 'username', title: '用户名', width:120},
      {field: 'status', title: '状态', width:100}, // 用于判断的目标字段
      {field: 'score', title: '积分', width:80}
    ]],
    page: true,
    height: 366
  });
});
</script>

2. 数据加载完成后自动勾选

通过监听表格的done回调事件，在数据加载完成后遍历数据并设置选中状态：

table.render({
  // ...其他配置项
  done: function(res, curr, count){
    // 获取表格实例
    var tableIns = table.cache[this.id];
    
    // 遍历数据行设置选中状态
    layui.each(res.data, function(index, item){
      // 核心判断逻辑：当status为"已审核"时自动勾选
      if(item.status === "已审核"){
        // 设置行选中 [docs/table/examples/setRowChecked.md](https://link.gitcode.com/i/ce50d6ef9880408cb35a4b72b75873e3#L45)
        tableIns.setRowChecked(index, true);
      }
    });
  }
});

3. 动态数据更新时的状态同步

当表格数据通过reload方法刷新后，需要重新执行选中逻辑。可将选中逻辑封装为独立函数，在done回调和数据更新后重复调用：

// 封装选中逻辑
function setAutoChecked(tableId){
  var tableIns = table.cache[tableId];
  layui.each(tableIns.data, function(index, item){
    if(item.status === "已审核"){
      tableIns.setRowChecked(index, true);
    }
  });
}

// 初始化时调用
table.render({
  elem: '#demoTable',
  done: function(){
    setAutoChecked(this.id);
  }
});

// 数据更新后调用
$('#refreshBtn').click(function(){
  table.reload('demoTable', {
    where: { /* 新的查询条件 */ }
  }, 'data');
  
  // 重新执行选中逻辑
  setAutoChecked('demoTable');
});

高级应用场景

多条件组合判断

通过组合多个字段条件实现更复杂的选中规则，例如同时满足"状态正常"且"积分>1000"的用户：

// 多条件选中示例 [docs/table/detail/demo.md](https://link.gitcode.com/i/ef71c37677efae7a341ee1b1b5ddf183)
if(item.status === "正常" && item.score > 1000){
  tableIns.setRowChecked(index, true);
}

单选模式实现

将type参数设置为radio可实现单选模式，适用于"默认选中最新记录"等场景：

// 单选模式设置 [src/modules/table.js](https://link.gitcode.com/i/e284df7e87d98833e13253228654e818#L46)
obj.setRowChecked({
  type: 'radio', // 单选模式
  checked: item.isLatest // 基于isLatest字段判断
});

常见问题与解决方案

选中状态不生效？

1. 确保表格渲染完成后再调用setRowChecked，建议在done回调中执行
2. 检查是否正确使用表格实例ID，可通过table.cache对象查看缓存数据
3. 确认字段名称与数据中的实际字段匹配（区分大小写）

分页数据如何处理？

对于分页表格，需在done回调中处理当前页数据，结合page参数实现跨页选中状态记忆：

done: function(res, curr, count){
  var checkedIds = JSON.parse(localStorage.getItem('checkedIds') || '[]');
  
  layui.each(res.data, function(index, item){
    if(checkedIds.includes(item.id)){
      tableIns.setRowChecked(index, true);
    }
  });
}

总结与扩展应用

通过本文介绍的方法，我们掌握了基于字段值自动设置行选中状态的核心技术。该方案已广泛应用于：

• 批量操作前的默认勾选
• 数据状态的可视化标记
• 复杂条件下的批量处理

完整示例代码可参考官方文档docs/table/examples/setRowChecked.md，更多高级用法可研究src/modules/table.js源码中关于行操作的实现。现在就将这3行代码应用到你的项目中，提升数据处理效率吧！

提示：结合Layui的form模块，可进一步实现选中状态与表单元素的双向绑定，构建更智能的交互体验。

【免费下载链接】layui 项目地址: https://gitcode.com/gh_mirrors/lay/layui