基于 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后前端妹子，爱编程，爱运营，爱折腾。 坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
