1. 程式人生 > >Bootstrap Table中的多選框刪除

Bootstrap Table中的多選框刪除

先上程式碼,後面再進行詳細解釋:
   
// 刪除按鈕事件
       $("#remove").on("click", function () {
            // $("#table").bootstrapTable('getSelections');為bootstrapTable自帶的,所以說一定要使用bootstrapTable顯示錶格,#table:為table的id
            var rows = $("#table").bootstrapTable('getSelections');
            console.log(rows);
            if (rows.length == 0) {// rows 主要是為了判斷是否選中,下面的else內容才是主要
                alert("請先選擇要刪除的記錄!");
                return;
            } else {
                var arrays = new Array();// 宣告一個數組
                $(rows).each(function () {// 通過獲得別選中的來進行遍歷
                    arrays.push(this.cid);// cid為獲得到的整條資料中的一列
                });
                var idcard = arrays.join(','); // 獲得要刪除的id
                console.log(idcard);
            }
        })

1. 效果圖

2. 獲得要刪除的資料


接下來,再來看一下這一行程式碼的效果,把rows列印到控制檯:


可以看到選中刪除後,獲得到的,就是一條完整重資料庫中的查詢內容,其中的cid就為每一條資料的id(主鍵)。

先選中多選框,當點選刪除按鈕時:在控制檯接收到選中的cid,當然後臺資料中一定要傳遞icd來,cid可以不用顯示在表格中,

把idcard打印出來,

這時我們獲得到的idcard 就是一個我們想要的到的資料,同時給他們中間以逗號隔開,傳遞到後臺,執行多行刪除語句:

3. 傳遞資料到後臺執行刪除sql


這時就可以成功獲得要刪除整條資料的id,當然你也可以獲得其他列的資料,例如:


注意!

執行上面的功能,一點是要用bootstrapTable 顯示的表格,要不然,沒有效果,

這樣就成功完成,有沒有感覺很簡單。