bootstrap-table-editable的使用

引入css和js文件

1，引入bootstrap的css和js文件（要使用bootstrap的js文件需要先引入jQuery文件）

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
    <script type="text/javascript" src="js/jquery-3.2.1.min.js" th:src="@{/js/jquery-3.2.1.min.js}"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

2，引入bootstrap-table的css和js文件

 <!-- bootstrap table-->
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css" />
    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>

3，引入x-editable的css和js文件

  <!-- x-editable (bootstrap version) -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet"/>
    <script type="text/javascript" src="js/bootstrap-editable.js" th:src="@{/js/bootstrap-editable.js}"></scrip

在HTML中新建一个表的对象

 <table id="tb_user"></table>

js代码：

    $(function () {
        $("#tb_user").bootstrapTable({
            toolbar: "#toolbar",
            idField: "Id",
            pagination: true,
            showRefresh: true,
            search: true,
            clickToSelect: true,
            queryParams: function (param) {
                return {};
            },
            url: "/bootstrap/Editable/GetUsers",
            columns: [{
                checkbox: true
            }, {
                field: "id",
                title: "id值",
            },
                {
                field: "name",
                title: "用户名",

                formatter: function (value, row, index) {
                    // return "<a href=\"#\" name=\"name\" data-type=\"select\" data-pk=\""+row.Id+"\" data-title=\"用户名\">" + value + "</a>";
                        if (value == -1) {
                            return "<a href=\"#\" name=\"name\" data-pk=\"" + row.Id + "\" ><span class=\"label label-danger\">"+"未通过"+"</span></a>";
                        }
                        if (value == 0) {
                            return "<a href=\"#\" name=\"name\" data-pk=\"" + row.Id + "\" ><span class=\"label label-primary\">" + "待审核" + "</span></a>";
                        }
                        if (value == 1) {
                            return "<a href=\"#\" name=\"name\" data-pk=\"" + row.Id + "\" ><span class=\"label label-success\">" + "已通过" + "</span></a>";
                        }
                    }
            }],
            onClickRow: function (row, $element) {
                curRow = row;
            },
            onLoadSuccess: function (aa, bb, cc) {

                $("#tb_user a").editable({
                    url: function (params) {
                        var sName = $(this).attr("name");
                        alert(sName);
                        curRow[sName] = params.value;
                        alert(curRow[sName]);
                        $.ajax({
                            type: 'get',
                            url: '/bootstrap/Editable/Edit?name='+curRow[sName],
                            data: curRow,
                            dataType: 'JSON',
                            async:false,
                            success: function (data, textStatus, jqXHR) {
                                alert('保存成功！');
                                $("#tb_user").bootstrapTable
                            },
                            error: function () { alert("error");}
                        });
                    },
                    type: 'select',
                    source: [{value: "-1", text: "未通过"}, {value: "0", text: "待审核"}, {value: "1", text: "已通过"}],
                    title: "审核状态"
                });
            },
        });
    });

效果：

使用bootstrap-table-editable.js的方式

优点：避免个每一个列都需要都需要去formatter

引入bootstrap-table-editable.js

bootstrap-table-editable.js的代码：

/**
 * @author zhixin wen <wenzhixin2010@gmail.com>
 * extensions: https://github.com/vitalets/x-editable
 */

!function ($) {

    'use strict';

    $.extend($.fn.bootstrapTable.defaults, {
        editable: true,
        onEditableInit: function () {
            return false;
        },
        onEditableSave: function (field, row, oldValue, $el) {
            return false;
        },
        onEditableShown: function (field, row, $el, editable) {
            return false;
        },
        onEditableHidden: function (field, row, $el, reason) {
            return false;
        }
    });

    $.extend($.fn.bootstrapTable.Constructor.EVENTS, {
        'editable-init.bs.table': 'onEditableInit',
        'editable-save.bs.table': 'onEditableSave',
        'editable-shown.bs.table': 'onEditableShown',
        'editable-hidden.bs.table': 'onEditableHidden'
    });

    var BootstrapTable = $.fn.bootstrapTable.Constructor,
        _initTable = BootstrapTable.prototype.initTable,
        _initBody = BootstrapTable.prototype.initBody;

    BootstrapTable.prototype.initTable = function () {
        var that = this;
        _initTable.apply(this, Array.prototype.slice.apply(arguments));

        if (!this.options.editable) {
            return;
        }

        $.each(this.columns, function (i, column) {
            if (!column.editable) {
                return;
            }

            var _formatter = column.formatter;
            column.formatter = function (value, row, index) {
                var result = _formatter ? _formatter(value, row, index) : value;

                return ['<a href="javascript:void(0)"',
                    ' data-name="' + column.field + '"',
                    ' data-pk="' + row[that.options.idField] + '"',
                    ' data-value="' + result + '"',
                    '>' + '</a>'
                ].join('');
            };
        });
    };

    BootstrapTable.prototype.initBody = function () {
        var that = this;
        _initBody.apply(this, Array.prototype.slice.apply(arguments));

        if (!this.options.editable) {
            return;
        }

        $.each(this.columns, function (i, column) {
            if (!column.editable) {
                return;
            }

            that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable)
                .off('save').on('save', function (e, params) {
                    var data = that.getData(),
                        index = $(this).parents('tr[data-index]').data('index'),
                        row = data[index],
                        oldValue = row[column.field];

                    row[column.field] = params.submitValue;
                    that.trigger('editable-save', column.field, row, oldValue, $(this));
                });
            that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable)
                .off('shown').on('shown', function (e, editable) {
                    var data = that.getData(),
                        index = $(this).parents('tr[data-index]').data('index'),
                        row = data[index];
                    
                    that.trigger('editable-shown', column.field, row, $(this), editable);
                });
            that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable)
                .off('hidden').on('hidden', function (e, reason) {
                    var data = that.getData(),
                        index = $(this).parents('tr[data-index]').data('index'),
                        row = data[index];
                    
                    that.trigger('editable-hidden', column.field, row, $(this), reason);
                });
        });
        this.trigger('editable-init');
    };

}(jQuery);

使用（文本框）：

$(function () {
        $("#tb_user").bootstrapTable({
            toolbar: "#toolbar",
            idField: "Id",
            pagination: true,
            showRefresh: true,
            search: true,
            clickToSelect: true,
            queryParams: function (param) {
                return {};
            },
            url: "/Editable/GetUsers",
            columns: [{
                checkbox: true
            }, {
                field: "UserName",
                title: "用户名",
                editable: {
                    type: 'text',
                    title: '用户名',
                    validate: function (v) {
                        if (!v) return '用户名不能为空';

                    }
                }
            }, {
                field: "Age",
                title: "年龄",
            }, {
                field: "Birthday",
                title: "生日",
                formatter: function (value, row, index) {
                    var date = eval('new ' + eval(value).source)
                    return date.format("yyyy-MM-dd");
                }
            },
            {
                field: "DeptName",
                title: "部门"
            }, {
                field: "Hobby",
                title: "爱好"                
            }],
            onEditableSave: function (field, row, oldValue, $el) {
                $.ajax({
                    type: "post",
                    url: "/Editable/Edit",
                    data: row,
                    dataType: 'JSON',
                    success: function (data, status) {
                        if (status == "success") {
                            alert('提交数据成功');
                        }
                    },
                    error: function () {
                        alert('编辑失败');
                    },
                    complete: function () {

                    }

                });
            }
        });
    });

参考来源