這篇文章主要介紹了如何在Bootstrap中利用Table實(shí)現(xiàn)一個(gè)多選框刪除功能，此處通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考價(jià)值，需要的朋友可以參考下：
站在用戶的角度思考問題，與客戶深入溝通，找到凌源網(wǎng)站設(shè)計(jì)與凌源網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名與空間、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋凌源地區(qū)。
Bootstrap是目前最受歡迎的前端框架，它是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷，它還有一個(gè)響應(yīng)最好的Grid系統(tǒng)，并且能夠在手機(jī)端通用，而Bootstrap是使用許多可重用的CSS和JavaScript組件，可以幫助實(shí)現(xiàn)需要的幾乎任何類型的網(wǎng)站的功能，此外，所有這些組件都是響應(yīng)式的。
重慶分公司
重慶分公司
//刪除按鈕事件
$("#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ù)，例如：
到此這篇關(guān)于如何在Bootstrap中利用Table實(shí)現(xiàn)一個(gè)多選框刪除功能的文章就介紹到這了,更多相關(guān)如何在Bootstrap中利用Table實(shí)現(xiàn)一個(gè)多選框刪除功能的內(nèi)容請(qǐng)搜索創(chuàng)新互聯(lián)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持創(chuàng)新互聯(lián)！
