我有一个用例,其中输入json可以有n个嵌套的子对象,为此我想显示树结构。可能需要有某种递归渲染逻辑来实现这一点。我是jsrender新手,所以有人能帮我一个示例代码为我的场景。
需要处理的JSON示例:
{"编号":" 1 ","密钥":[{"名称":"测试1","值":[{"参数名称":"abc "},{"参数名称":"def","子对象":[{"实际值":"a1"、"t2":"a2"、"t3":"a3","子对象":[{"实际值":"a1"、"t2":"a2"、"t3":"a3 "}]},{"实际值":"a4"、"t5":"a5"、"t6":"a6 "}]}]}
<script id="theContent" type="text/x-jsrender">
<div class="sec sec-middle">
{{for keys}}
{{for values}}
{{if childObjects}}
{^{tree/}}
{{/if}}
{{/for}}
{{/for}}
</div>
</script>
其中tree-if.js如下所示:
(function($) {
"use strict";
$.views.tags({
tree: {
template: '<div class="param-list parm-accord-level-one">' +
'<div class="param-top-list">' +
'<div class="parm-col parm-heading">' +
'<a href="javscritp:void(0);" class="parm-accordion-title"><strong>{{:param_name}}</strong> <i class="far fa-angle-down"></i></a>' +
'</div>' +
'<div class="parm-col parm-description">' +
'<span class="btn grey-btn string-btn">{{:data_type}}</span><span class="normal-text">{{:description}}</span>' +
'</div>' +
'</div>' +
'<div class="parm-accordion-details">' +
'<div class="tree-sec">' +
'{{for childObjects}}' +
'{{if childObjects}}' +
'{{tree/}}' +
'{{else}}' +
'<div class="param-list">' +
'<div class="param-top-list">' +
'<div class="parm-col parm-heading">' +
'<span>{{:child_param_name}}</span>' +
'{{if isMandatory}}' +
'<span class="seconday-text mandatory-text">mandatory</span>' +
'{{/if}}' +
'</div>' +
'<div class="parm-col parm-description">' +
'<span class="btn grey-btn string-btn">{{:child_data_type}}</span>' +
'<span class="string-text">{{:child_description}}</span>' +
'</div>' +
'</div>' +
'</div>' +
'{{/if}}' +
'{{/for}}' +
'</div>' +
'</div>' +
'</div>'
}
});
})(this.jQuery);
1条答案
按热度按时间qojgxg4l1#
有一些示例说明了分层结构的递归呈现:
JsViews“树”标记控件
还有这个“jsonview”标记控件示例,它是交互式的,使用JsViews,但类似的方法可以只用于JsRender。