Question

我正在尝试遍历json对象并通过分层结构化对象构建树视图结构。我有以下代码，但我没有得到FFF和GGG节点。有什么想法吗？

    var html = {
    ul: '<ul></ul>',
    li: '<li></li>',
    span: '<span></span>'
};

function TreeView(jobj) {
    var node = jobj.data[0].Nodes[0];
    var $ul_root = $(html.ul),
        $li_root = $(html.li);
    var $span = $(html.span);
    $span.text(node.Key);
    $li_root.append($span);
    $ul_root.append($li_root);
    $.each(node.Nodes, function (i, n) {
        var $ul_parent = $(html.ul),
            $li_parent = $(html.li);
        var $span = $(html.span);
        $span.text(n.Key);
        $li_parent.append($span);
        $ul_parent.append($li_parent);
        $li_root.append($ul_parent);
        recursive(n.Nodes, $li_parent);
    })
    return $ul_root;

    function recursive(TreeNodes, $li_parent) {
          if (TreeNodes.length > 0) {
              var $ul_child = $(html.ul),
                  $li_child = $(html.li);
              var   $span = $(html.span);
              for (var i in n = TreeNodes) {
                  $span.text(n[i].Key);
                  $li_child.append($span);
                  $ul_child.append($li_child);
                  $li_parent.append($ul_child);
                  return recursive(n[i].Nodes, $li_child);
              }
          }
    }
}

var json = '{"data":[{"Nodes":[{"Key":"Root","Nodes":[{"Key":"AAA","Nodes":[{"Key":"BBB","Nodes":[{"Key":"CCC","Nodes":[]}]}]},{"Key":"SubRoot","Nodes":[{"Key":"DDD","Nodes":[{"Key":"EEE","Nodes":[]},{"Key":"FFF","Nodes":[{"Key":"GGG","Nodes":[]}]}]}]}]}]}]}';
var jobj = eval('(' + json + ')');
$('#tree').append(TreeView(jobj));

Answer 1

原因很简单，并说明代码中的细节必须要小心：

recursive函数中的

，当你return时，它只是停止执行当前函数，所以当你有多个节点时，只处理第一个节点。只需删除return。

即可

有人还发布了一条消息并将其删除，但他是对的。您还只创建了一个要追加的元素，并将其修改为第二个节点而不是创建另一个节点，因此您将只显示最后一个值。移动元素的初始化以附加到循环内的DOM。

我还删除了似乎无用的var n。（如果您使用它来复制而不保留引用，那将无效，引用也会保留在n中）

将功能更改为：

function recursive(TreeNodes, $li_parent) {
      if (TreeNodes.length > 0) {
          var $ul_child, $li_child, $span, i;
          for (i in TreeNodes) {
              $span = $(html.span);
              $ul_child = $(html.ul);
              $li_child = $(html.li);
              $span.text(TreeNodes[i].Key);
              $li_child.append($span);
              $ul_child.append($li_child);
              $li_parent.append($ul_child);
              recursive(TreeNodes[i].Nodes, $li_child);
          }
      }
}

从json数据到树的递归迭代

1 个答案: