Bootstrap Table中的多選框刪除功能
更新時間：2018年07月15日 14:44:08 作者：Fly_tom
這篇文章主要介紹了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內(nèi)容才是主要
alert("請先選擇要刪除的記錄!");
return;
} else {
var arrays = new Array();// 聲明一個數(shù)組
$(rows).each(function () {// 通過獲得別選中的來進行遍歷
arrays.push(this.cid);// cid為獲得到的整條數(shù)據(jù)中的一列
});
var idcard = arrays.join(','); // 獲得要刪除的id
console.log(idcard);
}
})
1. 效果圖
2. 獲得要刪除的數(shù)據(jù)
接下來，再來看一下這一行代碼的效果，把rows打印到控制臺：
可以看到選中刪除后，獲得到的，就是一條完整重數(shù)據(jù)庫中的查詢內(nèi)容，其中的cid就為每一條數(shù)據(jù)的id（主鍵）。
先選中多選框，當點擊刪除按鈕時：在控制臺接收到選中的cid，當然后臺數(shù)據(jù)中一定要傳遞icd來，cid可以不用顯示在表格中，
把idcard打印出來，
這時我們獲得到的idcard 就是一個我們想要的到的數(shù)據(jù)，同時給他們中間以逗號隔開，傳遞到后臺，執(zhí)行多行刪除語句：
3. 傳遞數(shù)據(jù)到后臺執(zhí)行刪除sql
這時就可以成功獲得要刪除整條數(shù)據(jù)的id，當然你也可以獲得其他列的數(shù)據(jù)，例如：
注意！
執(zhí)行上面的功能，一點是要用bootstrapTable 顯示的表格，要不然，沒有效果，
總結(jié)
以上所述是小編給大家介紹的Bootstrap Table中的多選框刪除功能，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
相關(guān)文章
這篇文章主要給大家介紹了7道關(guān)于JS this的面試題，來看看你能答對幾個，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
這篇文章主要介紹了javascript日期格式化方法,實例總結(jié)了JavaScript針對日期與時間的格式化操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12
JavaScript中的property和attribute介紹
JavaScript中的property和attribute介紹，需要的朋友可以參考下。2011-12-12
這篇文章主要介紹了利用Html+CSS+JavaScript實現(xiàn)的放煙花效果，文中一共實現(xiàn)了兩種方式：手動和自動，文中的示例代碼講解詳細，感興趣的可以試一試2022-01-01
JavaScript實現(xiàn)的3D旋轉(zhuǎn)魔方動畫效果實例代碼
在本篇文章里小編給大家整理了關(guān)于JavaScript實現(xiàn)的3D旋轉(zhuǎn)魔方動畫效果實例代碼，有興趣的朋友們測試下。2019-07-07
本文主要分享了canvas繪制七巧板的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
JS實現(xiàn)圖文并茂的tab選項卡效果示例【附demo源碼下載】
這篇文章主要介紹了JS實現(xiàn)圖文并茂的tab選項卡效果,涉及javascript響應(yīng)鼠標事件動態(tài)修改頁面元素屬性的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09
Javascript的setTimeout()使用閉包特性時需要注意的問題
這篇文章主要介紹了Javascript的setTimeout(0)使用閉包特性時需要注意的問題,需要的朋友可以參考下2014-09-09
iis6+javascript Add an Extension File
iis6+javascript Add an Extension File...2007-06-06
這篇文章主要介紹了詳解webpack解惑：require的五種用法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06