本人小白，最近闲来无事，也是项目需求，需要做一个可编辑的表格。觉得自己写好low，于是上网找插件的时候发现了这两个插件。

先说bootstrap-table插件：这个插件是一个bootstrap的一个表格插件，有分页和打印功能（打印功能没尝试）。

x-editable插件：表格编辑插件。

这两个插件分别提供了对方的js和css文件。

于是，感觉超级搭有木有。

开说正经事 

1  我们首先需要使用bootstrap-table插件制作一个表

引入jq文件，bootstrap的css和js文件，引入bootstrap-table的css文件和js文件和这个

bootstrap-table插件的中文包 。

之后html页面我们只需要一个table就可以，剩下的js动态添加。

接着js

这样我们先得到一个表格

ps： 还有很多属性，可自行查找使用 。

2  我们开始要实现表格编辑了

继续引入x-editable插件的bootstrap3的css和js

2.1 首先x-editable插件需要对a标签起作用

columns: [ {field: "UserName",title: "用户名",formatter: function (value, row, index) {return "<a href=\"#\" name=\"UserName\" data-type=\"text\" data-pk=\""+row.Id+"\" data-title=\"用户名\">" + value + "</a>";}}, {field: "Age",title: "年龄",},{field: "DeptName",title: "部门"}],

在columns列表中，我们对用户名字段加入a标签。

然后在点击事件里面使用editable方法

onClickRow: function (row, $element) {$("#tb_user a").editable({type: "text",                //编辑框的类型。支持text|textarea|select|date|checklist等// title: "用户名",              //编辑框的标题disabled: false,             //是否禁用编辑// emptytext: "空文本",          //空值的默认文本mode: "popup",              //编辑框的模式：支持popup和inline两种模式，默认是popupvalidate: function (value) { //字段验证if (!$.trim(value)) {return '不能为空';}}});
},

这样我们得到username字段的点击页面

2.2但是这样有些过于麻烦，每个想编辑字段都需要编写。于是我们引入bootstrap-table封装好的editable插件

这样我们还是更改columns

columns: [ {field: "UserName",title: "用户名",editable: {type: 'text',title: '用户名',validate: function (v) {if (!v) return '用户名不能为空';}},}, {field: "Age",title: "年龄",editable: {type: 'text',title: '年龄',validate: function (v) {if (isNaN(v)) return '年龄必须是数字';var age = parseInt(v);if (age <= 0) return '年龄必须是正整数';}}},{field: "DeptName",title: "部门"}]

得到可编写的表格