基于 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>
