基于 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>
原文作者：祈澈姑娘 技術博客：http://www.lxweimin.com/u/05f416aefbe1
90后前端妹子，愛編程，愛運營，愛折騰。 堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。
