zoukankan      html  css  js  c++  java
  • fastadmin是如何使用art-template的,以及如何在js模板中,嵌套JS模板

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

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

       {foreach  name="selectdata" item="type"  key="k" }
                                        <dl    data-template="answer{$k}" class="fieldlist fieldlist{$k} {$k!=0? 'hidden' : ''}" data-name="row[selectdata{$k}]" data-listidx="0">
                                             <!-- k=0 单选 k=1 多选 k=2 判断 k=3 填空 k=4 简答 k=5 组合 -->
                                            {if condition="$k eq '2'"}
                                            {foreach  name="type" item="option"  key="j" }
                                            <dd class="form-inline">
                                                <ins  class="col-xs-12 col-sm-1"><input type="radio" name="row[answer{$k}]" value="{$option['key']}"  /></ins>
                                                <ins   class="col-xs-12 col-sm-2"><input type="text" name="row[selectdata{$k}][{$j}][key]" class="form-control" placeholder="选项" size="10" value="{$option['key']}"  {$k==2? 'readonly' : ''}/></ins>
                                                <ins  class="col-xs-12 col-sm-2"><input id="c-content" data-rule="required" class="form-control" name="row[selectdata{$k}][{$j}][value]"  value="{$option['value']}"  {$k==2? 'readonly' : ''}></input></ins>
                            
                                               
                                                <!--下面的两个按钮务必保留-->
                                               
                                            </dd>
                                            {/foreach}
                                            {/if}
                                            <!-- k=2表示是判断题,不是判断题的时候,出现追加 -->
                                            {if condition="$k neq '2'"}
                            
                                            <dd><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> 追加</a></dd>
                                            {/if}
                                            <div style="color:red;">*请选中正确答案</div>
                                            <textarea name="row[selectdata{$k}]" class="form-control hide" cols="30" rows="5">{:json_encode($type)}</textarea>
                                        </dl>
                                        {/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: $("<" + tagName + "/>")
                                });
                                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模板

    如何在art-template模板中,使用console.log

    https://www.geekes.cn/2019/08/04/art-template-语法/
    方法是配置一下。

    template.defaults.imports.log = console.log;
    

    art-template中使用if

    正确写法
    <%if(…){%>  html  <%}else{%> html  <%}%>
    
    错误写法
    <%if(…){%>  html  <%}%>   <%else{%> html  <%}%>
    

    判断对象是否为空

    https://www.cnblogs.com/jpfss/p/9105119.html
    我想使用这个

    5.使用ES6的Object.keys()方法
    
    与4方法类似,是ES6的新方法, 返回值也是对象中属性名组成的数组
    
    var data = {};
    
    var arr = Object.keys(data);
    
    alert(arr.length == 0);//true
    

    想在art-js里进行判断,但是会报错

    <%if(Object.keys(<%=row%>).length==0){%> 
                                                    <p>11111</p>
                                            <%}else{%> 
                                                <p>22222</p>
                                            <%}%>
    
  • 相关阅读:
    问题记录_Idea2021.2.3版本,Windows11版本,注册无法跳转Google浏览器
    问题记录_在IDEA中使用Git操作缓慢
    百页 PPT BPF 技术全览 深入浅出 BPF 技术
    揭秘 BPF map 前生今世
    一道双哈希题,但是为什么TLE??2021山东icpc省赛 F题 Birthday Cake
    oracle游标使用的几个场景
    MySQL 锁问题(脏读、锁阻塞、死锁)
    oracle存储过程中的变量
    tableau学习
    Power BI学习
  • 原文地址:https://www.cnblogs.com/cn-oldboy/p/13121970.html
Copyright © 2011-2022 走看看