bootstrap-editable实现bootstrap-table行内编辑

bootstrap-editable行内编辑效果如下：

需要引入插件

列初始化代码，为可编辑的列添加editable属性：

columns = [
             {
                 title: '文件名',
                 field: 'Name',
                 align: 'center',
                 valign: 'middle',
                 sortable: true,
                 width: '20%'
             }, {
                 title: '文件版本号',
                 field: 'VerNum',
                 align: 'center',
                 valign: 'middle',
                 sortable: true,
                 width: '20%',
                 editable:{
                     emptytext: '-',
                 }
             }, {
                 title: '文件描述',
                 field: 'Description',
                 align: 'center',
                 valign: 'middle',
                 editable: {
                     emptytext: '-'
                 }
             }, {
                 title: '文件ID',
                 field: 'ObjectId',
                 visible: false
             }
    ]

保存修改后台调用方法：

function $onRowEditableSave(field, row, oldValue, $el) {
        $.ajax({
            type: "post",
            url: "../FilesDownload/Edit?type=FileInfo",
            data: { strJson: JSON.stringify(row) },
            success: function (data, status) {
                if (data == "1" && status == "success") {
                    showTip('修改成功！', "success");
                    refreshTable();
                    $('#table .editable').editable('enable');
                    $('#btn_offeditfile').hide();
                    $('#btn_editfile').show();
                }
                else {
                    showTip('修改失败！', "error");
                    refreshTable();
                    $('#table .editable').editable('enable');
                    $('#btn_offeditfile').hide();
                    $('#btn_editfile').show();
                }
            },
            error: function () {
 
                showTip('连接服务器超时！', "error");
            },
            complete: function () {
 
            }
 
        });
    }

通过js动态控制是否可编辑：

$('#table .editable').editable('disable');