LayuiTableCheckBox选中：如何实现表格中的多选框选中功能

一、LayuiTableCheckBox简介

LayuiTableCheckBox是一款基于Layui表格的多选框插件。它可以在表格中添加多选框列，并且支持全选、取消全选以及单选功能，非常方便实用。在本文中，我们将重点探讨如何使用LayuiTableCheckBox实现表格中的多选框选中功能。

二、引入LayuiTableCheckBox插件

首先，我们需要引入LayuiTableCheckBox插件。在页面中引入以下CSS和JS文件：

<link rel="stylesheet" href="//cdn.bootcss.com/layui/2.3.0/css/layui.css" />
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" />
<link rel="stylesheet" href="path/to/layuiTableCheckBox.css" />

<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/layui/2.3.0/layui.js" charset="utf-8"></script>
<script src="path/to/layuiTableCheckBox.js"></script>

这样就引入了LayuiTableCheckBox插件所需的所有文件。

三、实现多选框选中功能

接下来，我们要实现多选框选中的功能。在表格中添加多选框列的方法已在LayuiTableCheckBox的官方文档中有详细说明，这里就不做过多介绍，只介绍如何实现选中功能。我们可以在全选按钮和单选按钮的点击事件中，使用以下代码实现多选框的选中：

var checkStatus = table.checkStatus('table-id');

//全选
$('#checkAll').click(function(){
    layui.each(checkStatus.data, function(index, row){
        row.LAY_CHECKED = true;
    });
    tableRender();
});

//取消全选
$('#unCheckAll').click(function(){
    layui.each(checkStatus.data, function(index, row){
        row.LAY_CHECKED = false;
    });
    tableRender();
});

//单选
table.on('checkbox(table-filter)', function(obj){
    var rowData = obj.data;
    rowData.LAY_CHECKED = obj.checked;
    tableRender();
});

//重绘表格
function tableRender() {
    table.reload('table-id', {
        data: table.cache['table-id']
    });
}

在全选和取消全选按钮的点击事件中，我们通过遍历表格数据，将每一行数据的LAY_CHECKED属性都设置为true或false，从而实现全选和取消全选的功能。在单选按钮的点击事件中，我们将选中行的数据的LAY_CHECKED属性设置为当前checkbox的选中状态。最后，我们通过调用table.reload()方法，重新渲染表格，实现多选框选中的效果。

四、完整示例代码

下面是一份基于Layui官方提供的示例代码，结合LayuiTableCheckBox实现多选框选中功能的完整示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>LayuiTableCheckBox示例页面</title>
    <link rel="stylesheet" href="//cdn.bootcss.com/layui/2.3.0/css/layui.css" />
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" />
    <link rel="stylesheet" href="path/to/layuiTableCheckBox.css" />
</head>
<body>
    <div class="layui-container">
        <table class="layui-hide" id="test" lay-filter="test"></table>
        <script type="text/html" id="toolbar">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon"></i></button>
                <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="deleteSelected"><i class="layui-icon"></i></button>
            </div>
        </script>
    </div>
    <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/layui/2.3.0/layui.js" charset="utf-8"></script>
    <script src="path/to/layuiTableCheckBox.js"></script>
    <script>
        layui.use(['table', 'layer'], function () {
            var table = layui.table;
            
            //渲染表格
            table.render({
                elem: '#test',
                url: '/api/test/list',
                toolbar: '#toolbar',
                cols: [[
                    {type: 'checkbox'},
                    {field: 'id', width: 80, title: 'ID', sort: true},
                    {field: 'username', title: '用户名'},
                    {field: 'email', title: '用户邮箱'},
                    {field: 'sign', title: '个性签名'},
                    {field: 'sex', width: 80, title: '性别'},
                    {fixed: 'right', toolbar: '#barDemo', width:150}
                ]]
            });

            //监听头部工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);

                switch(obj.event){
                    case 'add':
                        layer.msg('添加');
                    break;
                    case 'deleteSelected':
                        layer.msg('批量删除');
                        console.log(checkStatus.data);
                    break;
                }
            });

            //监听行工具栏事件
            table.on('tool(test)', function(obj){
                var data = obj.data;
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        obj.del();
                        layer.close(index);
                    });
                } else if(obj.event === 'edit'){
                    layer.alert('编辑行：
'+ JSON.stringify(data))
                }
            });

            //选中状态改变时触发
            table.on('checkbox(test)', function(obj){
                console.log(obj.checked); //当前是否选中状态
                console.log(obj.data); //选中行的相关数据
                console.log(obj.type); //如果触发的是全选，则为：all；如果触发的是单选，则为：one；
                console.log(table.checkStatus('test').data); //获取选中行的数据
            });

            //全选
            $('#checkAll').click(function(){
                layui.each(table.cache['test'], function(index, row){
                   row.LAY_CHECKED = true;
                });
                tableRender();
            });

            //取消全选
            $('#unCheckAll').click(function(){
                layui.each(table.cache['test'], function(index, row){
                   row.LAY_CHECKED = false;
                });
                tableRender();
            });

            //重绘表格
            function tableRender() {
                table.reload('test', {
                    data: table.cache['test']
                });
            }

        });
    </script>
</body>
</html>

原创文章，作者：GVGU，如若转载，请注明出处：https://www.506064.com/n/142325.html

LayuiTableCheckBox选中：如何实现表格中的多选框选中功能

一、LayuiTableCheckBox简介

二、引入LayuiTableCheckBox插件

三、实现多选框选中功能

四、完整示例代码

相关推荐

发表回复