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

Teemo 9月前 1362

实现效果

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

最后于 2月前 被Teemo编辑
感谢以下的小伙的赞赏支持
最佳回复
  • 时代网络 9月前

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

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

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

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

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

  • 时代网络 9月前
    感谢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 打赏 9月前
    感谢TA
    0 引用 5

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

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

    封装思路不错,学习了

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

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

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

    好贴,顶一个

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

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

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

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

  • 胡导 2月前
    感谢TA
    0 引用 11

    @Teemo 服务器端要怎么写才能接收到修改的值并返回修改状态呢!还是用FA原生的edit就好了无需修改?但是貌似不可以。

  • 胡导 2月前
    感谢TA
    0 引用 12

    @Teemo 按上面操作显示"记录未找到“

  • Teemo 楼主 2月前
    感谢TA
    0 引用 13
    胡导 @Teemo 服务器端要怎么写才能接收到修改的值并返回修改状态呢!还是用FA原生的edit就好了无需修改?但是貌似不可以。

    如果控制器edit函数用的是通用函数,则服务器端不需要做任何改动,所有动作在前端完成

  • Teemo 楼主 2月前
    感谢TA
    0 引用 14
    胡导 @Teemo 按上面操作显示"记录未找到“

    估计是ids没传到后端,可以检查一下在js初始化表格时,是否已指定主键(pk参数,一般是id字段),如果数据表主键不止一个(比如除了id,还是其它字段是主键),则需要强制指定pk参数

  • Teemo 楼主 2月前
    感谢TA
    0 引用 15

    重点在这
    20181025093919.jpg

  • myIvan 2月前
    感谢TA
    0 引用 16

    不错不错啊

  • F4NNIU 打赏 2月前
    感谢TA
    0 引用 17

    感谢分享,已经打赏。

  • Teemo 楼主 2月前
    感谢TA
    0 引用 18
    F4NNIU 感谢分享,已经打赏。

    多谢! 我刚刚也自己测试了一下打赏功能,给自己打赏sweat_smile ,因为比较好奇没绑定支付宝这钱会到哪去,原来有余额这个东西

  • wfz90 2月前
    感谢TA
    0 引用 19

    大佬。。。

  • pao_123 10天前
    感谢TA
    0 引用 20

    一行多个数据,都需要修改,怎么处理?

  • Teemo 楼主 10天前
    感谢TA
    0 引用 21
    pao_123 一行多个数据,都需要修改,怎么处理?

    目前此功能官方已有插件实现

  • 未登录
    22
返回