处理FastAdmin 键值组件(Fieldlist) 不能排序问题

在使用FastAdmin 键值组件(Fieldlist) 如果键名为纯数字时,保存后排序失败,将变成键名由小到大的排列方式,用起来很不方便

处理FastAdmin 键值组件(Fieldlist) 不能排序问题

可以自己修改 public/assets/js/require-form.js 文件,将里面的 fieldlist 替换成下面的,只修改了加粗部分,直接替换会方便些

fieldlist: function (form) {
                //绑定fieldlist
                if ($(".fieldlist", form).length > 0) {
                    require(['dragsort', 'template'], function (undefined, Template) {
                        var prefix='~*orderByKey*~';
                        //刷新隐藏textarea的值
                        var refresh = function (container) {
                            var data = {};
                            var name = container.data("name");
                            var textarea = $("textarea[name='" + name + "']", form);
                            var template = container.data("template");
                            $.each($("input,select,textarea", container).serializeArray(), function (i, j) {
                                var reg = /\[(\w+)\]\[(\w+)\]$/g;
                                var match = reg.exec(j.name);
                                if (!match)
                                    return true;
                                match[1] = "x" + parseInt(match[1]);
                                if (typeof data[match[1]] == 'undefined') {
                                    data[match[1]] = {};
                                }
                                data[match[1]][match[2]] = j.value;
                            });
                            var result = template ? [] : {};
                            $.each(data, function (i, j) {
                                if (j) {
                                    if (!template) {
                                        if (j.key != '') {
                                            result[prefix + j.key] = j.value;
                                        }
                                    } else {
                                        result.push(j);
                                    }
                                }
                            });
                            textarea.val(JSON.stringify(result).replaceAll(prefix,''));
                        };
                        //追加一行数据
                        var append = function (container, row, initial) {
                            var tagName = container.data("tag") || (container.is("table") ? "tr" : "dd");
                            var index = container.data("index");
                            var name = container.data("name");
                            var template = container.data("template");
                            var data = container.data();
                            index = index ? parseInt(index) : 0;
                            container.data("index", index + 1);
                            row = row ? row : {};
                            row = typeof row.key === 'undefined' || typeof row.value === 'undefined' ? {key: '', value: row} : row;
                            var options = container.data("fieldlist-options") || {};
                            var vars = {index: index, name: name, data: data, options: options, key: row.key, value: row.value, row: row.value};
                            var html = template ? Template(template, vars) : Template.render(Form.config.fieldlisttpl, vars);
                            var obj = $(html);
                            if ((options.deleteBtn === false || options.removeBtn === false) && initial)
                                obj.find(".btn-remove").remove();
                            if (options.dragsortBtn === false && initial)
                                obj.find(".btn-dragsort").remove();
                            if ((options.readonlyKey === true || options.disableKey === true) && initial) {
                                obj.find("input[name$='[key]']").prop("readonly", true);
                            }
                            obj.attr("fieldlist-item", true);
                            obj.insertAfter($(tagName + "[fieldlist-item]", container).length > 0 ? $(tagName + "[fieldlist-item]:last", container) : $(tagName + ":first", container));
                            if ($(".btn-append,.append", container).length > 0) {
                                //兼容旧版本事件
                                $(".btn-append,.append", container).trigger("fa.event.appendfieldlist", obj);
                            } else {
                                //新版本事件
                                container.trigger("fa.event.appendfieldlist", obj);
                            }
                            return obj;
                        };
                        var fieldlist = $(".fieldlist", form);
                        //表单重置
                        form.on("reset", function () {
                            setTimeout(function () {
                                fieldlist.trigger("fa.event.refreshfieldlist");
                            });
                        });
                        //监听文本框改变事件
                        $(document).on('change keyup changed', ".fieldlist input,.fieldlist textarea,.fieldlist select", function () {
                            var container = $(this).closest(".fieldlist");
                            refresh(container);
                        });
                        //追加控制(点击按钮)
                        fieldlist.on("click", ".btn-append,.append", function (e, row) {
                            var container = $(this).closest(".fieldlist");
                            append(container, row);
                            // refresh(container);
                        });
                        //移除控制(点击按钮)
                        fieldlist.on("click", ".btn-remove", function () {
                            var container = $(this).closest(".fieldlist");
                            var tagName = container.data("tag") || (container.is("table") ? "tr" : "dd");
                            $(this).closest(tagName).remove();
                            refresh(container);
                        });
                        //追加控制(通过事件)
                        fieldlist.on("fa.event.appendtofieldlist", function (e, row) {
                            var container = $(this);
                            append(container, row);
                            refresh(container);
                        });
                        //根据textarea内容重新渲染
                        fieldlist.on("fa.event.refreshfieldlist", function () {
                            var container = $(this);
                            var textarea = $("textarea[name='" + container.data("name") + "']", form);
                            //先清空已有的数据
                            $("[fieldlist-item]", container).remove();
                            var json = {};
                            try {
                                json = JSON.parse(textarea.val());
                                if(!Array.isArray(json)){
                                    json = JSON.parse(textarea.val().replaceAll('":',prefix+'":'));
                                }
                            } catch (e) {
                            }
                            $.each(json, function (i, j) {
                                if (typeof j == 'string') {
                                    i = i.replaceAll(prefix,'');
                                }
                                append(container, {key: i, value: j}, true);
                            });
                        });
                        //拖拽排序
                        fieldlist.each(function () {
                            var container = $(this);
                            var tagName = container.data("tag") || (container.is("table") ? "tr" : "dd");
                            container.dragsort({
                                itemSelector: tagName,
                                dragSelector: ".btn-dragsort",
                                dragEnd: function () {
                                    refresh(container);
                                },
                                placeHolderTemplate: $("<" + tagName + "/>")
                            });
                            if (typeof container.data("options") === 'object' && container.data("options").appendBtn === false) {
                                $(".btn-append,.append", container).hide();
                            }
                            $("textarea[name='" + container.data("name") + "']", form).on("fa.event.refreshfieldlist", function () {
                                //兼容旧版本事件
                                $(this).closest(".fieldlist").trigger("fa.event.refreshfieldlist");
                            });
                        });
                        fieldlist.trigger("fa.event.refreshfieldlist");
                    });
                }
            },

原创文章,作者:admin,如若转载,请注明出处:https://ntib.cn/305.html

(0)
adminadmin
上一篇 2023年11月19日 下午11:59
下一篇 2023年11月22日 下午10:20

相关推荐

  • 钉钉事件订阅HTTP回调功能设置

    湖南省建筑企业资质查询在哪个网站钉钉的功能越来越多,用起来也更方便了,原来钉钉中不支持主动推送,一些事件没办法实时得的反馈,现在钉钉事件订阅,可以在事件发生时主动的向你的服务器发送http请求,处理一些事件非常的…

    2023年11月18日
  • 2024年还能不能通过买卖域名建站赚钱

    湖南省建筑企业资质查询在哪个网站现在手机端用户越来越多,域名和网站的使用量逐渐的降低,好像域名都没那么重要了,那么现在还能不能通过买卖域名建站赚钱呢,好像也可以,但应该不会像最初那么容易了。 一方面通过电脑查信息…

    2023年11月22日
  • 同步 Linux 服务器的时间

    湖南省建筑企业资质查询在哪个网站不知道什么原因,centos 运行一段后,发现系统时间与 当前时间不符,差了几分钟,看着对不上,心里很是不舒服,就想着同步一下系统时间, centos 同步时间命令 ntpdate…

    记事本 2018年11月18日
  • docker 定时任务crontab 设置

    湖南省建筑企业资质查询在哪个网站docker 中设置定时任务一之不执行,于是在宿主机中设置定时任务来执行命令

    记事本 2023年12月5日
  • 宝塔 CentOS系统设置秒级计划任务

    湖南省建筑企业资质查询在哪个网站CentOS系统计划任务最小只能设置到分级,要设置成秒级只需要在分级的计划任务里设置个循环执行命令就行了

    记事本 2023年11月18日
  • win10安装apache及php7

    湖南省建筑企业资质查询在哪个网站现在又很多php本地安装集成包phpstudy、wamp、xampp等,原来一直使用这些集成包,安装简单方便,因为不想安装一些没用的软件,后来就直接自己进行了环境搭建。 一、首先安…

    2021年11月18日
  • CentOS7.9升级 OpenSSL OpenSSH

    湖南省建筑企业资质查询在哪个网站CentOS7.9 默认使用 OpenSSH_7.4p1, OpenSSL 1.0.2k-fips,按下面的步骤可以升级成功,但为验证是否影响其它软件。 安装openssl-1.1…

    记事本 2025年3月26日
  • 达梦迁移工具连接 mysql 数据库错误 mysql迁移到dm8

    湖南省建筑企业资质查询在哪个网站使用达梦迁移工具连接 mysql 时报错:The last packet successfully received from the server was 14 millisec…

    2023年11月18日
  • 宝塔面板MySql进程守护脚本

    湖南省建筑企业资质查询在哪个网站宝塔面版的服务器里面网站太多,mysql 时不时的就意外停止了,又没找到具体原因,只能来一个定时检查mysql状态,一旦停止就重新启动。最初没想到用 shell ,使用 php +…

    2018年11月18日
  • 网站分步引导组件Driver.js

    湖南省建筑企业资质查询在哪个网站在web使用中经常看到分步引导功能,提示你如何操作及功能演示,有很多工具可以实现这种功能。如Driver.js、introjs等, Driver.js 使用MIT Licensed…

    2023年11月18日

发表回复

登录后才能评论
WeChat