fastadmin是如何使用art-template的,以及如何在js模板中,嵌套JS模板

2021-02-05 22:17

阅读:765

标签:dmi   answer   多选   tor   col   end   eof   ast   hidden   

fastadmin中的art-template是如何实现的

art-templat是在require_form.js中实现的。具体代码
html代码

   {foreach  name="selectdata" item="type"  key="k" }
                                    
{if condition="$k eq ‘2‘"} {foreach name="type" item="option" key="j" }
{/foreach} {/if} {if condition="$k neq ‘2‘"}
追加
{/if}
*请选中正确答案
{/foreach}

JS代码


 fieldlist: function (form) {
                //绑定fieldlist
                if ($(".fieldlist", form).size() > 0) {
                    require([‘dragsort‘, ‘template‘], function (undefined, Template) {
                        //刷新隐藏textarea的值
                        var refresh = function (name) {
                            var data = {};
                            var textarea = $("textarea[name=‘" + name + "‘]", form);
                            var container = $(".fieldlist[data-name=‘" + name + "‘]");
                            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[j.key] = j.value;
                                        }
                                    } else {
                                        result.push(j);
                                    }
                                }
                            });
                            textarea.val(JSON.stringify(result));
                        };
                        //监听文本框改变事件
                        $(document).on(‘change keyup changed‘, ".fieldlist input,.fieldlist textarea,.fieldlist select", function () {
                            refresh($(this).closest(".fieldlist").data("name"));
                        });
                        //追加控制
                        $(".fieldlist", form).on("click", ".btn-append,.append", function (e, row) {
                            var container = $(this).closest(".fieldlist");
                            var tagName = container.data("tag") || "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 : {};
                            var vars = {index: index, name: name, data: data, row: row};
                            var html = template ? Template(template, vars) : Template.render(Form.config.fieldlisttpl, vars);
                            $(html).insertBefore($(tagName + ":last", container));
                            $(this).trigger("fa.event.appendfieldlist", $(this).closest(tagName).prev());
                        });
                        //移除控制
                        $(".fieldlist", form).on("click", ".btn-remove", function () {
                            var container = $(this).closest(".fieldlist");
                            var tagName = container.data("tag") || "dd";
                            $(this).closest(tagName).remove();
                            refresh(container.data("name"));
                        });
                        //渲染数据&拖拽排序
                        $(".fieldlist", form).each(function () {
                            var container = this;
                            var tagName = $(this).data("tag") || "dd";
                            $(this).dragsort({
                                itemSelector: tagName,
                                dragSelector: ".btn-dragsort",
                                dragEnd: function () {
                                    refresh($(this).closest(".fieldlist").data("name"));
                                },
                                placeHolderTemplate: $("")
                            });
                            var textarea = $("textarea[name=‘" + $(this).data("name") + "‘]", form);
                            if (textarea.val() == ‘‘) {
                                return true;
                            }
                            var template = $(this).data("template");
                            var json = {};
                            try {
                                json = JSON.parse(textarea.val());
                            } catch (e) {
                            }
                            $.each(json, function (i, j) {
                                $(".btn-append,.append", container).trigger(‘click‘, template ? j : {
                                    key: i,
                                    value: j
                                });
                            });
                        });
                    });
                }
            },

如何在JS模板中,引用其他的js模板

fastadmin是如何使用art-template的,以及如何在js模板中,嵌套JS模板

标签:dmi   answer   多选   tor   col   end   eof   ast   hidden   

原文地址:https://www.cnblogs.com/cn-oldboy/p/13121970.html


评论


亲,登录后才可以留言!