如何在Bootstrap中利用Table實現(xiàn)一個多選框刪除功能

這篇文章主要介紹了如何在Bootstrap中利用Table實現(xiàn)一個多選框刪除功能，此處通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考價值，需要的朋友可以參考下：

Bootstrap是什么

Bootstrap是目前最受歡迎的前端框架，它是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷，它還有一個響應最好的Grid系統(tǒng)，并且能夠在手機端通用，而Bootstrap是使用許多可重用的CSS和JavaScript組件，可以幫助實現(xiàn)需要的幾乎任何類型的網(wǎ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("請先選擇要刪除的記錄!");
        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ù)，例如：

到此這篇關(guān)于如何在Bootstrap中利用Table實現(xiàn)一個多選框刪除功能的文章就介紹到這了,更多相關(guān)如何在Bootstrap中利用Table實現(xiàn)一個多選框刪除功能的內(nèi)容請搜索億速云以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持億速云！