0

以下のような JSON を ul と li を持つツリーに変換するメソッドが組み込まれているのではないかと思います。

JSON の例:

{
{parent=-1,id=0,name='root'},
{parent=0,id=1,name='x'},
{parent=0,id=2,name='y'},
{parent=1,id=3,name='z'},
{parent=1,id=4,name='w'},
{parent=1,id=5,name='c'},
{parent=2,id=6,name='d'}
}
4

2 に答える 2

2

ここで意図的に説明しない関数があります。

function buildNestedList(treeNodes, rootId) {
  var nodesByParent = {};

  $.each(treeNodes, function(i, node) {
    if (!(node.parent in nodesByParent)) nodesByParent[node.parent] = [];
    nodesByParent[node.parent].push(node);
  });

  function buildTree(children) {
    var $container = $("<ul>");

    if (!children) return;
    $.each(children, function(i, child) {
      $("<li>", {text: child.name})
      .appendTo($container)
      .append( buildTree(nodesByParent[child.id]) );
    });
    return $container;
  }
  return buildTree(nodesByParent[rootId]);
}

これを回す

var treeNodes = [
    {parent:-1,id:0,name:'root'},
    {parent:0,id:1,name:'x'},
    {parent:0,id:2,name:'y'},
    {parent:1,id:3,name:'z'},
    {parent:1,id:4,name:'w'},
    {parent:1,id:5,name:'c'},
    {parent:2,id:6,name:'d'}
];

これに

<ul>
  <li>x
    <ul>
      <li>z</li>
      <li>w</li>
      <li>c</li>
    </ul>
  </li>
  <li>y
    <ul>
      <li>d</li>
    </ul>
  </li>
</ul>

こちらをご覧ください：http://jsfiddle.net/Tomalak/uUBKf/

于 2012-08-14T17:26:43.170 に答える