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

Teemo 6月前 744

实现效果

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

最佳回复
  • 时代网络 6月前

    感谢分享,刚看到帖子,我今天上午也研究这个了。。。 我还加载了 bootstrap-table-editable

最新回复 (10)
  • 时代网络 最佳回复 6月前
    感谢TA
    0 引用 2

    感谢分享,刚看到帖子,我今天上午也研究这个了。。。 我还加载了 bootstrap-table-editable

  • Teemo 楼主 6月前
    感谢TA
    0 引用 3
    时代网络 感谢分享,刚看到帖子,我今天上午也研究这个了。。。 我还加载了 bootstrap-table-editable

    多谢观看!可以互相探讨grin

  • 时代网络 6月前
    感谢TA
    0 引用 4
    onEditableSave: function (field, row, oldValue, $el) {
        //vitalets.github.io/x-editable/docs.html
        if (field=='weigh') {
            // console.log(field);
            var index = Layer.load();
            $.ajax({
                type: "post",
                url: "user/rule/multi",
                data:  {ids:row.id, params:"weigh="+row.weigh},
                dataType: 'JSON',
                success: function (data, status) {
                     Layer.close(index);
                    if (status == "success") {
                        // alert('提交数据成功');
                        $(".btn-refresh").trigger("click");
                        Toastr.success(__('Operation completed'));
                    }
                },
                error: function () {
                    Layer.close(index);
                    Toastr.error(__('Operation failed'));
                },
                complete: function () {
    
                }
            });
        }
    },
    protected $multiFields = 'weigh,ismenu,status';

    我是这么封装的,然后通过 multi 来更改需要的字段。

  • Karson 打赏 6月前
    感谢TA
    0 引用 5

    @Teemo 感谢你的分享,写得很清晰明了,thumbsup_tone1

  • Teemo 楼主 6月前
    感谢TA
    0 引用 6
    时代网络 ``` onEditableSave: function (field, row, oldValue, $el) { //http://vitalets.github.io/x-editable ...

    封装思路不错,学习了

  • Teemo 楼主 6月前
    感谢TA
    0 引用 7
    Karson @Teemo 感谢你的分享,写得很清晰明了,:thumbsup_tone1:

    多谢!本来想着将这个封装成 CURD 时,配置就自动生成且适应各种类型。然而考虑到工作量较大和本人能力问题,所以只是应付一下业务joy

  • allen 1月前
    感谢TA
    0 引用 8

    好贴,顶一个

  • fywtat 1月前
    感谢TA
    0 引用 9

    直接封装成 formatter:Table.api.formatter.edit回更好用grinning

  • Teemo 楼主 1月前
    感谢TA
    0 引用 10
    fywtat 直接封装成 formatter:Table.api.formatter.edit回更好用:grinning:

    这个想法倒提醒到我了,我先试试。你封装了没,可以贴出来给大家参考下wink

  • 飞得更高 1天前
    感谢TA
    0 引用 11

    留个记号

  • 未登录
    12
返回