基于bootstrap，bootstrap-table插件和x-editable插件 简单实现可编辑表格页面（有待更深入学习）

本人小白，最近闲来无事，也是项目需求，需要做一个可编辑的表格。觉得自己写好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两种模式，默认是popup
        validate: 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: "部门"
        }]

得到可编写的表格