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/zh-hant/n/142325.html

LayuiTableCheckBox選中：如何實現表格中的多選框選中功能

一、LayuiTableCheckBox簡介

二、引入LayuiTableCheckBox插件

三、實現多選框選中功能

四、完整示例代碼

相關推薦

發表回復