利用 x-editable 实现在表格中直接修改单个字段的值

实现效果

image.png

适用性

目前业务只用到普通 text 类型,以后有需求会再扩展类型

实现步骤

下载 x-editable 插件至 /assets/libs 目录下

bower方式安装

bower install x-editable

其它方式安装

GitHub地址: https://github.com/vitalets/x-editable
将插件引入require-backend.js配置文件

20180416173502.jpg

20180416173640.jpg

在对应的js模块中加载插件

20180416180331.jpg

初始化表格时,在列的配置中,修改字段的显示格式(比如 nickname 字段)

20180416181131.jpg

初始化表格时,增加 onLoadSuccess 函数,并指定字段名(比如 nickname)

20180416181554.jpg
函数代码:

onLoadSuccess: function (data) {
    var field = 'nickname';
    var selector = '.' + field;
    var name = 'row[' + field + ']';
    $(selector).editable({
        type: 'text',
        url: function (params) {
            $.ajax({
                type: 'POST',
                dataType: 'JSON',
                url: $.fn.bootstrapTable.defaults.extend.edit_url + '/ids/' + params.pk,
                data: {[name]: params.value},
                complete: function (xhr, status) {
                    if (xhr.responseJSON.code === 1) {
                        Toastr.success('操作成功');
                    } else {
                        Toastr.error(xhr.responseJSON.msg !== '' ? xhr.responseJSON.msg : '未知错误');
                        table.bootstrapTable('refresh');
                    }
                }
            });
        }
    });
}
测试效果

20180416182124.jpg

20 条评论

发布
问题