layui 表格添加刪除行

layui 表格添加刪除行

一.需求：

在做一個管理系統時，需要增加表格行和刪除功能。

二.效果圖：

三.核心代碼：

//頭工具欄監聽事件
table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id)
                    , data = checkStatus.data;//獲取選中的數據
                switch (obj.event) {
                    case 'add'://添加
                        //要執行的事件
                        var tableBak = table.cache.buttonList;//獲取之前編輯過的全部數據，前提是編輯數據是要更新緩存，buttonList 為表格的id
                        buttonArr = [];//清空數組
                        for (var i = 0; i < tableBak.length; i++) {
                            buttonArr.push(tableBak[i]);      //將之前的數組存儲
                        }
                        //在尾部新增一行空數據，實現增行效果
                        buttonArr.push({
                            "name": "",
                            "code": ""

                        });
                        table.reload("buttonList", {
                            data: buttonArr   // 將新數據重新載入表格
                        })
                        break;
                    case 'batchDelete'://刪除
                        var tableDT = table.cache.buttonList;//1獲取之前編輯過的全部數據，前提是編輯數據是要更新緩存，buttonList 為表格的id
                        var data = checkStatus.data;//2獲取選中數據
                        if(data.length<=0){
                            layer.msg('最少選擇一行');
                            return;
                        }


                        //方法一：遍歷緩存列表，將非選中的按鈕信息對象存入數組中，然后表格重載此數組（非選中的存入數組）
                        // var tableArr = [];
                        // for (var i = 0; i < tableDT.length; i++) {//遍歷表格緩存數組
                        //     var btnObj=tableDT[i];
                        //      if(!btnObj.LAY_CHECKED){//條件：非選中
                        //         tableArr.push(btnObj);//把未選中的按鈕信息對象存入數組中
                        //     }
                        // }

                        //方法二：遍歷緩存列表，將選中的按鈕信息刪除（選中的刪除）
                        var tableArr = [];
                        for (var i = 0; i < tableDT.length; i++) {//遍歷表格緩存數組
                            var btnObj = tableDT[i];
                            if (btnObj.LAY_CHECKED) {//條件：選中
                                tableDT.splice(i, 1);//移除后后造成數組下標索引發生變化，所以下面需要i--
                                i--;
                            }
                        }
                        tableArr = tableDT;

                        table.reload("buttonList", {
                            data: tableArr   // 將新數據重新載入表格
                        });

                        break;

                }

            });