JSRender实现嵌套JSON树形结构递归渲染示例求助

场景说明 #

需要将包含N层嵌套子对象的JSON数据，通过JSRender的递归标签实现树形结构渲染，以下是适配该需求的完整可运行示例。

修正后的示例JSON数据 #

统一嵌套字段名（将原childObject改为childObjects，确保递归判断逻辑一致），并补充模板所需的缺失字段：

{
  "id": "1",
  "keys": [
    {
      "name": "test1",
      "values": [
        {
          "param_name": "abc",
          "data_type": "string",
          "description": "基础参数"
        },
        {
          "param_name": "def",
          "data_type": "object",
          "description": "包含子对象的参数",
          "childObjects": [
            {
              "param_name": "child_1",
              "data_type": "string",
              "description": "第一层子对象",
              "childObjects": [
                {
                  "param_name": "grandchild_1",
                  "data_type": "string",
                  "description": "第二层子对象",
                  "isMandatory": true
                }
              ]
            },
            {
              "param_name": "child_2",
              "data_type": "number",
              "description": "无嵌套的子对象",
              "isMandatory": false
            }
          ]
        }
      ]
    }
  ]
}

JSRender主模板 #

主模板遍历顶层数据，调用递归的tree标签渲染所有层级：

<!-- 主模板 -->
<script id="mainTemplate" type="text/x-jsrender">
<div class="sec sec-middle">
  {{for keys}}
    {{for values}}
      <!-- 调用递归tree标签，传入当前数据项 -->
      {{tree/}}
    {{/for}}
  {{/for}}
</div>
</script>

<!-- 页面容器，用于渲染结果 -->
<div id="renderTarget"></div>

递归Tree标签定义 #

自定义tree标签，实现递归渲染逻辑：当当前数据项包含childObjects时，渲染可折叠的父节点并递归调用自身；否则渲染叶子节点：

(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="javascript:void(0);" class="parm-accordion-title">' +
                '<strong>{{:param_name}}</strong> ' +
                '{{if childObjects}}<i class="far fa-angle-down"></i>{{/if}}' +
              '</a>' +
              '{{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">{{:data_type}}</span>' +
              '<span class="normal-text">{{:description}}</span>' +
            '</div>' +
          '</div>' +
          '{{if childObjects}}' +
            '<div class="parm-accordion-details">' +
              '<div class="tree-sec">' +
                '{{for childObjects}}' +
                  '{{tree/}}' + <!-- 递归调用tree标签渲染子对象 -->
                '{{/for}}' +
              '</div>' +
            '</div>' +
          '{{/if}}' +
        '</div>'
    }
  });
})(jQuery);

初始化渲染代码 #

加载数据并渲染到页面容器：

$(function() {
  // 示例JSON数据（可替换为接口返回数据）
  var data = {
    "id": "1",
    "keys": [
      {
        "name": "test1",
        "values": [
          {
            "param_name": "abc",
            "data_type": "string",
            "description": "基础参数"
          },
          {
            "param_name": "def",
            "data_type": "object",
            "description": "包含子对象的参数",
            "childObjects": [
              {
                "param_name": "child_1",
                "data_type": "string",
                "description": "第一层子对象",
                "childObjects": [
                  {
                    "param_name": "grandchild_1",
                    "data_type": "string",
                    "description": "第二层子对象",
                    "isMandatory": true
                  }
                ]
              },
              {
                "param_name": "child_2",
                "data_type": "number",
                "description": "无嵌套的子对象",
                "isMandatory": false
              }
            ]
          }
        ]
      }
    ]
  };

  // 渲染主模板到目标容器
  var html = $("#mainTemplate").render(data);
  $("#renderTarget").html(html);

  // 可选：添加折叠/展开交互
  $(document).on("click", ".parm-accordion-title", function() {
    $(this).closest(".param-list").find(".parm-accordion-details").toggle();
    $(this).find("i").toggleClass("fa-angle-down fa-angle-up");
  });
});

关键说明 #

• 递归核心：通过自定义tree标签内部的{{for childObjects}}{{tree/}}{{/for}}实现无限层级的递归渲染。
• 字段匹配：确保JSON数据中的字段与模板中的{{:字段名}}完全对应，避免渲染空白。
• 交互扩展：可通过jQuery添加点击折叠/展开的交互逻辑，提升用户体验。

内容的提问来源于stack exchange，提问作者Keval Shah