layui表格行选择：单选、多选与全选功能-优快云博客

layui表格行选择：单选、多选与全选功能

【免费下载链接】layui 一套遵循原生态开发模式的 Web UI 组件库，采用自身轻量级模块化规范，易上手，可以更简单快速地构建网页界面。项目地址: https://gitcode.com/GitHub_Trending/la/layui

还在为表格行选择功能而烦恼？本文将全面解析layui表格的行选择机制，从基础配置到高级应用，助你轻松实现单选、多选和全选功能！

开篇痛点：为什么需要专业的行选择功能？

在日常Web开发中，表格数据的选择操作无处不在：用户管理中的批量操作、订单处理中的多选审核、数据报表中的行级操作等。传统的手动实现往往面临以下挑战：

兼容性问题：不同浏览器对选择状态的样式支持不一致
性能瓶颈：大数据量下的选择操作容易出现卡顿
状态管理复杂：选中状态与数据的同步维护困难
交互体验差：缺乏全选、反选等便捷操作

layui表格组件提供了完整的行选择解决方案，让你告别这些烦恼！

核心功能概览

layui表格支持三种行选择模式：

选择模式	适用场景	核心特性
单选模式	详情查看、唯一选择	自动取消前一个选择，确保唯一性
多选模式	批量操作、数据导出	支持shift多选、全选/反选
全选功能	全量操作、数据管理	表头复选框控制所有行选择状态

基础配置：快速启用行选择

1. 单选框列配置

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

<script>
layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#demo-table',
    cols: [[
      {type: 'radio', fixed: 'left'}, // 单选框列
      {field: 'id', title: 'ID', width: 80},
      {field: 'username', title: '用户名', width: 120},
      {field: 'email', title: '邮箱', width: 200}
    ]],
    data: [
      {id: 1, username: '张三', email: 'zhangsan@example.com'},
      {id: 2, username: '李四', email: 'lisi@example.com'}
    ]
  });
});
</script>

2. 复选框列配置

table.render({
  elem: '#demo-table',
  cols: [[
    {type: 'checkbox', fixed: 'left'}, // 复选框列
    {field: 'id', title: 'ID', width: 80},
    {field: 'username', title: '用户名', width: 120}
  ]],
  data: [/* 数据 */]
});

3. 初始选中状态设置

data: [
  {id: 1, username: '张三', LAY_CHECKED: true}, // 初始选中
  {id: 2, username: '李四'},
  {id: 3, username: '王五', LAY_CHECKED: true}  // 初始选中
]

实战应用：完整的行选择示例

示例1：基础单选表格

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui表格单选示例</title>
    <link href="https://cdn.jsdelivr.net/npm/layui@2.9.7/dist/css/layui.css" rel="stylesheet">
</head>
<body>
    <table id="single-select-table" lay-filter="single"></table>

    <script src="https://cdn.jsdelivr.net/npm/layui@2.9.7/dist/layui.js"></script>
    <script>
    layui.use('table', function(){
        var table = layui.table;
        
        // 渲染单选表格
        table.render({
            elem: '#single-select-table',
            cols: [[
                {type: 'radio', fixed: 'left'},
                {field: 'id', title: 'ID', width: 80, sort: true},
                {field: 'username', title: '用户名', width: 120},
                {field: 'sex', title: '性别', width: 80},
                {field: 'city', title: '城市', width: 100},
                {field: 'sign', title: '签名', minWidth: 100}
            ]],
            data: [{
                "id": "10001",
                "username": "张三",
                "sex": "男",
                "city": "浙江杭州",
                "sign": "人生恰似一场修行"
            }, {
                "id": "10002",
                "username": "李四",
                "sex": "女",
                "city": "北京",
                "sign": "淡泊以明志"
            }]
        });

        // 监听单选事件
        table.on('radio(single)', function(obj){
            console.log('选中数据:', obj.data);
            layer.msg('已选择: ' + obj.data.username);
        });
    });
    </script>
</body>
</html>

示例2：多功能多选表格

<table id="multi-select-table" lay-filter="multi"></table>
<script type="text/html" id="toolbarMulti">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getSelected">获取选中数据</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="deleteSelected">删除选中</button>
    </div>
</script>

<script>
layui.use(['table', 'layer'], function(){
    var table = layui.table;
    var layer = layui.layer;
    
    table.render({
        elem: '#multi-select-table',
        toolbar: '#toolbarMulti',
        cols: [[
            {type: 'checkbox', fixed: 'left'},
            {field: 'id', title: 'ID', width: 80},
            {field: 'username', title: '用户名', width: 120},
            {field: 'status', title: '状态', width: 100, templet: '#statusTpl'},
            {field: 'createTime', title: '创建时间', width: 180}
        ]],
        data: [/* 数据 */],
        page: true
    });

    // 工具栏事件处理
    table.on('toolbar(multi)', function(obj){
        var checkStatus = table.checkStatus(obj.config.id);
        
        switch(obj.event){
            case 'getSelected':
                if(checkStatus.data.length === 0){
                    layer.msg('请先选择数据');
                    return;
                }
                console.log('选中数据:', checkStatus.data);
                layer.alert(JSON.stringify(checkStatus.data, null, 2));
                break;
                
            case 'deleteSelected':
                var selectedData = checkStatus.data;
                if(selectedData.length === 0){
                    layer.msg('请选择要删除的数据');
                    return;
                }
                
                layer.confirm('确定删除选中的 ' + selectedData.length + ' 条数据？', function(index){
                    // 执行删除操作
                    layer.close(index);
                    layer.msg('删除成功');
                });
                break;
        }
    });
});
</script>

高级功能：编程式控制选择状态

1. 动态设置选中状态

// 设置单行选中
table.setRowChecked('table-id', {
    index: 2,        // 行索引（0开始）
    type: 'checkbox' // 选择类型
});

// 批量选中多行
table.setRowChecked('table-id', {
    index: [0, 2, 4], // 多行索引数组
    checked: true     // 选中状态
});

// 全选/取消全选
table.setRowChecked('table-id', {
    index: 'all',     // 全选标识
    checked: true     // true全选，false取消全选
});

2. 获取选中状态信息

// 获取选中状态
var checkStatus = table.checkStatus('table-id');

console.log('选中数据:', checkStatus.data);
console.log('选中数量:', checkStatus.data.length);
console.log('是否全选:', checkStatus.isAll);
console.log('原始缓存数据:', checkStatus.dataCache);

3. 选择事件监听

// 复选框事件
table.on('checkbox(table-filter)', function(obj){
    console.log('选择状态:', obj.checked);
    console.log('选择类型:', obj.type); // all-全选 one-单选
    console.log('选中数据:', obj.data);
});

// 单选框事件  
table.on('radio(table-filter)', function(obj){
    console.log('选中数据:', obj.data);
});

// 行点击事件（可结合选择）
table.on('row(table-filter)', function(obj){
    // 点击行时自动选中
    obj.setRowChecked({
        type: 'radio' // 或 'checkbox'
    });
});

性能优化与最佳实践

1. 大数据量优化策略

table.render({
    // ...其他配置
    loading: true,     // 启用加载动画
    limit: 20,         // 每页数据量
    limits: [10, 20, 50, 100],
    done: function(res, curr, count){
        // 数据渲染完成回调
        console.log('数据加载完成');
    }
});

2. 选择状态持久化

// 保存选中状态
function saveSelection(selectedIds) {
    localStorage.setItem('table_selection', JSON.stringify(selectedIds));
}

// 恢复选中状态
function restoreSelection() {
    var saved = localStorage.getItem('table_selection');
    if (saved) {
        var selectedIds = JSON.parse(saved);
        // 根据ID恢复选中状态
    }
}

3. 选择限制策略

// 最大选择数量限制
table.on('checkbox(table-filter)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    if (checkStatus.data.length > 5) {
        layer.msg('最多选择5条数据');
        obj.setRowChecked({
            index: obj.index,
            checked: false
        });
        return false;
    }
});

常见问题与解决方案

Q1: 选择状态不生效怎么办？

解决方案：检查是否正确设置了type: 'checkbox'或type: 'radio'，确保数据中包含LAY_CHECKED字段。

Q2: 如何实现跨页保持选中状态？

解决方案：使用table.cache获取所有数据，或自定义存储选中行的ID。

Q3: 选择事件多次触发？

解决方案：检查事件绑定是否正确，避免重复绑定。

Q4: 性能问题如何优化？

解决方案：合理分页，避免一次性加载过多数据；使用reloadData而非reload进行数据更新。

总结与展望

layui表格的行选择功能提供了完整而灵活的解决方案：

简单易用：通过配置即可快速启用单选、多选功能
功能丰富：支持全选、动态控制、事件监听等高级特性
性能优异：针对大数据量场景进行了优化
扩展性强：支持自定义选择逻辑和状态管理

在实际项目中，建议根据具体业务需求选择合适的选择模式，并结合文中的最佳实践进行实现。无论是简单的数据查看还是复杂的批量操作，layui表格都能提供出色的用户体验。

下一步学习建议：

深入学习layui表格的编辑功能
探索表格与表单的联动操作
了解表格的导出和打印功能

希望本文能帮助你更好地掌握layui表格的行选择功能，提升开发效率！

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考