Bootstrap Table中的多選框刪除
阿新 • • 發佈:2019-02-06
先上程式碼,後面再進行詳細解釋:
// 刪除按鈕事件 $("#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內容才是主要 alert("請先選擇要刪除的記錄!"); return; } else { var arrays = new Array();// 宣告一個數組 $(rows).each(function () {// 通過獲得別選中的來進行遍歷 arrays.push(this.cid);// cid為獲得到的整條資料中的一列 }); var idcard = arrays.join(','); // 獲得要刪除的id console.log(idcard); } })
1. 效果圖
2. 獲得要刪除的資料
接下來,再來看一下這一行程式碼的效果,把rows列印到控制檯:
可以看到選中刪除後,獲得到的,就是一條完整重資料庫中的查詢內容,其中的cid就為每一條資料的id(主鍵)。
先選中多選框,當點選刪除按鈕時:在控制檯接收到選中的cid,當然後臺資料中一定要傳遞icd來,cid可以不用顯示在表格中,
把idcard打印出來,
這時我們獲得到的idcard 就是一個我們想要的到的資料,同時給他們中間以逗號隔開,傳遞到後臺,執行多行刪除語句:
3. 傳遞資料到後臺執行刪除sql
這時就可以成功獲得要刪除整條資料的id,當然你也可以獲得其他列的資料,例如:
注意!
執行上面的功能,一點是要用bootstrapTable 顯示的表格,要不然,沒有效果,
這樣就成功完成,有沒有感覺很簡單。