Bootstrap Table中的多選框刪除功能
先上代碼，后面再進(jìn)行詳細(xì)解釋：
//刪除按鈕事件
$("#remove").on("click", function () {
// $("#table").bootstrapTable('getSelections');為bootstrapTable自帶的，所以說(shuō)一定要使用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 () {// 通過(guò)獲得別選中的來(lái)進(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ù)
接下來(lái)，再來(lái)看一下這一行代碼的效果，把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來(lái)，cid可以不用顯示在表格中，
把idcard打印出來(lái)，
這時(shí)我們獲得到的idcard 就是一個(gè)我們想要的到的數(shù)據(jù)，同時(shí)給他們中間以逗號(hào)隔開(kāi)，傳遞到后臺(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 顯示的表格，要不然，沒(méi)有效果，
總結(jié)
以上所述是小編給大家介紹的Bootstrap Table中的多選框刪除功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
7道關(guān)于JS this的面試題，你能答對(duì)幾個(gè)
這篇文章主要給大家介紹了7道關(guān)于JS this的面試題，來(lái)看看你能答對(duì)幾個(gè)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了javascript日期格式化方法,實(shí)例總結(jié)了JavaScript針對(duì)日期與時(shí)間的格式化操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12
JavaScript中的property和attribute介紹
JavaScript中的property和attribute介紹，需要的朋友可以參考下。2011-12-12
基于Html+CSS+JS實(shí)現(xiàn)手動(dòng)放煙花效果
這篇文章主要介紹了利用Html+CSS+JavaScript實(shí)現(xiàn)的放煙花效果，文中一共實(shí)現(xiàn)了兩種方式：手動(dòng)和自動(dòng)，文中的示例代碼講解詳細(xì)，感興趣的可以試一試2022-01-01
JavaScript實(shí)現(xiàn)的3D旋轉(zhuǎn)魔方動(dòng)畫(huà)效果實(shí)例代碼
在本篇文章里小編給大家整理了關(guān)于JavaScript實(shí)現(xiàn)的3D旋轉(zhuǎn)魔方動(dòng)畫(huà)效果實(shí)例代碼，有興趣的朋友們測(cè)試下。2019-07-07
本文主要分享了canvas繪制七巧板的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
JS實(shí)現(xiàn)圖文并茂的tab選項(xiàng)卡效果示例【附demo源碼下載】
這篇文章主要介紹了JS實(shí)現(xiàn)圖文并茂的tab選項(xiàng)卡效果,涉及javascript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)修改頁(yè)面元素屬性的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09
Javascript的setTimeout()使用閉包特性時(shí)需要注意的問(wèn)題
這篇文章主要介紹了Javascript的setTimeout(0)使用閉包特性時(shí)需要注意的問(wèn)題,需要的朋友可以參考下2014-09-09
iis6+javascript Add an Extension File
iis6+javascript Add an Extension File...2007-06-06
這篇文章主要介紹了詳解webpack解惑：require的五種用法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06