Bootstrap Table中的多選框刪除功能

先上代碼，后面再進(jìn)行詳細(xì)解釋：

//刪除按鈕事件
 $("#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內(nèi)容才是主要
 alert("請(qǐng)先選擇要?jiǎng)h除的記錄!");
 return;
 } else {
 var arrays = new Array();// 聲明一個(gè)數(shù)組
 $(rows).each(function () {// 通過獲得別選中的來進(jìn)行遍歷
 arrays.push(this.cid);// cid為獲得到的整條數(shù)據(jù)中的一列
 });
 var idcard = arrays.join(','); // 獲得要?jiǎng)h除的id
 console.log(idcard);
 }
 })

1. 效果圖

2. 獲得要?jiǎng)h除的數(shù)據(jù)

接下來，再來看一下這一行代碼的效果，把rows打印到控制臺(tái)：

可以看到選中刪除后，獲得到的，就是一條完整重?cái)?shù)據(jù)庫(kù)中的查詢內(nèi)容，其中的cid就為每一條數(shù)據(jù)的id（主鍵）。

先選中多選框，當(dāng)點(diǎn)擊刪除按鈕時(shí)：在控制臺(tái)接收到選中的cid，當(dāng)然后臺(tái)數(shù)據(jù)中一定要傳遞icd來，cid可以不用顯示在表格中，

把idcard打印出來，

這時(shí)我們獲得到的idcard 就是一個(gè)我們想要的到的數(shù)據(jù)，同時(shí)給他們中間以逗號(hào)隔開，傳遞到后臺(tái)，執(zhí)行多行刪除語(yǔ)句：

3. 傳遞數(shù)據(jù)到后臺(tái)執(zhí)行刪除sql

這時(shí)就可以成功獲得要?jiǎng)h除整條數(shù)據(jù)的id，當(dāng)然你也可以獲得其他列的數(shù)據(jù)，例如：

注意！

執(zhí)行上面的功能，一點(diǎn)是要用bootstrapTable 顯示的表格，要不然，沒有效果，

總結(jié)

以上所述是小編給大家介紹的Bootstrap Table中的多選框刪除功能，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com