表格外掛-bootstrap table的表內檢視編輯刪除
阿新 • • 發佈：2018-12-10
基於 Bootstrap 的 jQuery 表格外掛，通過簡單的設定，就可以擁有強大的單選、多選、排序、分頁，以及編輯、匯出、過濾（擴充套件）等等的功能。
上一篇寫到分頁的實際應用，今天寫的是表格外掛-bootstrap table的表內檢視編輯刪除，要實現的效果如下圖：
其實很簡單，只需要在js的columns:裡面新增操作一欄的程式碼
title : '操作',
field : 'id',
formatter : option
}
然後繼續定義一個函式option；定義刪除、更新操作
// 定義刪除、更新操作 function option(value, row, index) { var htm = '<button id="delUser" userId=' + value + ' onclick="delUser(this)">刪除</button><button id="dupUser" onclick="updUser(' + value + ')">修改</button>' return htm; }
完整參考程式碼示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 引入的css檔案 --> <link href="css/bootstrap.min.css" rel="stylesheet" /> <link href="css/bootstrap-table.min.css" rel="stylesheet"> <title></title> <style> #delUser,#dupUser{ background: #1caf9a; color: #FFFFFF; border: none; margin-left: 12px; } </style> </head> <body> <table id="mytable"></table> </body> <!-- 引入的js檔案 --> <script src="js/jquery-1.9.1.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap-table.min.js"></script> <script src="js/bootstrap-table-zh-CN.min.js"></script> <script> $('#mytable').bootstrapTable({ columns: [{ field: 'id', title: '編號名' }, { field: 'name', title: '姓名' }, { field: 'photo', title: '聯絡方式' },{ title : '操作', field : 'id', formatter : option }], data: [{ id: 1, name: '王小婷', photo: '1373717324' }, { id: 2, name: '安安', photo: '131313' }] }) // 定義刪除、更新操作 function option(value, row, index) { var htm = '<button id="delUser" userId=' + value + ' onclick="delUser(this)">刪除</button><button id="dupUser" onclick="updUser(' + value + ')">修改</button>' return htm; } // 刪除使用者 function delUser(dom) { var mymessage = confirm("確認刪除嘛？"); if (mymessage == true) { $.ajax({ url : path + '/user/' + $(dom).attr("userId"), type : 'delete', success : function(data) { $(dom).parent().parent().hide(); }, error : function(data){ alert("伺服器繁忙") } }); } } // 編輯使用者 function updUser(id) { layer.open({ type : 2, title : '編輯使用者', area : [ '500px', '440px' ], fix : false, // content : path + '/user/pageUpd/' + id, end : function() { $("#mytab").bootstrapTable('refresh', { url : path + "/user/list" }); } }); } </script> </html>
原文作者：祈澈姑娘 技術部落格：https://www.jianshu.com/u/05f416aefbe1
90後前端妹子，愛程式設計，愛運營，愛折騰。 堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。