layui學習——數據表格復選框批量刪除

1、實現方法

　　想實現利用數據表格復選框批量刪除數據，且不重載頁面，但是官網並沒有給出相應案例，只能自己寫了

步驟1：創建數據表格

HTML：

<table class="layui-table" id="table" lay-filter="table"></table>

JS：

table.render({
    elem: '#table',
    url: '/',
    page: true,
    height: 500,
    limit: 20,
    cellMinWidth: 150,
    toolbar: '#toolbar',
    defaultToolbar: ['filter',
        'exports',
        'print', {
            title: '刪除',
            layEvent: 'del',
            icon: 'layui-icon-delete'
        }
    ],
    cols: [[
        {type: 'checkbox', fixed: 'left'},
        {field: 'AutoID', title: "ID", width: 60, fixed: 'left', align: 'center', hide: true},
        {field: 'I.AutoID', title: "InvID", width: 60, fixed: 'left', align: 'center', hide: true},
        {field: 'InvBarcode', title: "條碼", width: 220, fixed: 'left'},
        {field: 'SeqNo', title: "序號", width: 80, align: 'center', 'sort': true},
        {field: 'RefCode', title: "代碼", width: 220},
        {field: 'Channel', title: "渠道", width: 160},
        {field: 'Country', title: "國家", align: 'center', width: 80},
        {field: 'Account', title: "賬號", width: 220},
        {field: 'Remark', title: "備注"},
        {title: "操作", width: 110, align: 'center', toolbar: '#bar2', fixed: 'right'}
    ]]
});

步驟2：展示創建好的數據表格

 

步驟3：編寫刪除程序

　　觀看上面的數據表格，想實現不重載頁面刪除數據，我們需要刪除指定的數據表格本身的數據、左固定列的數據和右固定列的數據

var array = []  // 需要刪除的數據會存入這個列表里

table.on('checkbox(table)', function (obj) {  // 觸發表格的復選框選中事件，一旦有數據被選中，就會填入array列表里
    var tr = obj.tr;
    if (obj.type == 'all') {  // 判斷是否全選
        var len = array.length;
        array.splice(0, len);
        $(obj.tr.prevObject[0].firstChild.rows).each(function (i, e) {
            var subarr = [$(e), $(obj.tr.prevObject[1].firstChild.rows[i]), $(obj.tr.prevObject[2].firstChild.rows[i])];
            array.push(subarr);  // 將需要刪除的數據存入列表里
        })
    } else {
        if (obj.checked) {
            array.push(tr)
        } else {
            var indexs = obj.tr[0].rowIndex;
            InvBArray.forEach((item, index) => {
                if (item[0].rowIndex === undefined) {
                    if (item[0][0].rowIndex == indexs) {
                        array.splice(index, 1);
                    }
                } else if (item[0].rowIndex == indexs) {
                    array.splice(index, 1);
                }
            })
        }
    }
});

table.on('toolbar(table)', function (obj) {
    var checkStatus = table.checkStatus(obj.config.id);
    var data = checkStatus.data;
    switch (obj.event) {
        case 'del':
            if (data.length) {
                layer.confirm('確認要刪除嗎？', function (index) {
                    layer.close(index);
                    array.forEach((item) => {
                        item[0].remove();
                        item[1].remove();
                        item[2].remove();
                    });
                });
            } else {
                layer.msg('未選擇刪除行！', {icon: 6});
            }
            break;
    }
});

2、效果展示

 　　序號為3、4的數據被刪除