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ù)庫中的查詢內(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í)行多行刪除語句：
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ù)大家的！
相關(guān)文章
javascript中函數(shù)作為參數(shù)調(diào)用的方法
這篇文章主要介紹了javascript中函數(shù)作為參數(shù)調(diào)用的方法,實(shí)例分析了函數(shù)作為操作調(diào)用的原理與相關(guān)技巧,需要的朋友可以參考下2015-02-02
js實(shí)現(xiàn)點(diǎn)擊切換checkbox背景圖片的簡單實(shí)例
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)點(diǎn)擊切換checkbox背景圖片的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
記得以前在學(xué)校的時(shí)候,例如要修改信息,需要要修改的部分的值顯示出來,都是先把數(shù)據(jù)傳到后臺(tái),然后再在前臺(tái)顯示的,想想真夠笨的,這個(gè)可以在客戶端就實(shí)現(xiàn)的,何必要傳到后臺(tái)呢2009-05-05
點(diǎn)擊提交按鈕后按鈕變灰色不可用狀態(tài)的三種方法
當(dāng)點(diǎn)擊提交后，提交按鈕變灰色不可用，這樣可有效防止重復(fù)提交，本代碼就是實(shí)現(xiàn)這樣一個(gè)功能2013-09-09
這篇文章主要為大家詳細(xì)介紹了JScript實(shí)現(xiàn)簡單的表格操作，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
雖然精通jquery，但對(duì)它的原型javascript卻不是很了解，最近在學(xué)習(xí)javascript中遇到了一些困難，比如冒泡和捕獲，很多次被提到，但又不知究竟應(yīng)用在何處。找到了一些好文章解惑，在這里分享給大家2014-04-04
關(guān)于uniapp微信小程序左上角返回按鈕的監(jiān)聽詳解
uniapp是一個(gè)支持多端的技術(shù),因此它是兼容性比較強(qiáng)的,而且速度也很快,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序左上角返回按鈕監(jiān)聽的相關(guān)資料,需要的朋友可以參考下2022-04-04
本文主要分享了原生js實(shí)現(xiàn)返回頂部緩沖效果的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了js事件觸發(fā)操作,結(jié)合實(shí)例形式分析了javascript事件觸發(fā)機(jī)制原理、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-06-06
今天通過一個(gè)案例給大家分享微信小程序連續(xù)簽到7天積分獲得功能，通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2020-08-08