将嵌套集转换为数据 (json/html) 以在 jstree 中使用

Question

我有一个带有表的数据库，其中数据存储为嵌套集。该表如下所示：

id      lft rgt name                  depth
0       1   768 ROOT                  0
550300  2   3   external              1
580943  4   5   teachers              1
510000  6   753 company BV            1
213000  7   14  Buying                2
913010  8   9   buying center         3
573100  10  11  buying generic        3
516300  12  13  buying service center 3
513900  15  48  finance               2

数据代表公司结构。我想用jstree显示它

我认为最好的方法是首先将它放在一个多维数组中。为此我使用了这个功能：

function _formatTreeIntoArray(&$tree, $current_depth = 0)
{
    $formattedTree = array();
    while($leaf = current($tree))
    {
        if($leaf['depth'] > $current_depth)
        {
            $formattedTree[] = _formatTreeIntoArray($tree, $leaf['depth']);
        }
        elseif($leaf['depth'] < $current_depth)
        {
            return $formattedTree;
        }
        else
        {
            $formattedTree[] = $leaf;
            next($tree);
        }
    }

    return $formattedTree;
}

我在这里找到的：https://gist.github.com/taion809/6510212 并稍作修改。

它似乎做得很好（之前在这里尝试过解决方案，但我失去了节点：How do I format Nested Set Model data into an array?）

现在我的下一个挑战是用它创建一个 jtree，它应该看起来像这样：

<div id="html1">
  <ul>
    <li>Root node 1
      <ul>
        <li>Child node 1</li>
        <li><a href="#">Child node 2</a></li>
      </ul>
    </li>
  </ul>
</div>

或者这个：

$('#using_json').jstree({ 'core' : {
    'data' : [
       'Simple root node',
       {
         'text' : 'Root node 2',
         'state' : {
           'opened' : true,
           'selected' : true
         },
         'children' : [
           { 'text' : 'Child 1' },
           'Child 2'
         ]
      }
    ]
} });

我在这个主题中找到了一个函数：PHP Array to jsTree，但是由于将嵌套集转换为数组的函数创建了许多没有键名的数组条目，因此我在树中获得了很多额外的级别一个数字作为名称，并且没有正确的子级。

我想知道如何解决这个问题，以及是否有更好的方法来实现我的目标。

Answer 1

您可以使用两种格式将 JSON 对象传递给 jsTree 以构建树。 我会使用第二个“平面”，如下所示。当然，您必须在服务器端构建它。

[
  { "id": "root", "parent": "#", "text": "ROOT" },
  { "id": "external", "parent": "root", "text": "external" },
  { "id": "teachers", "parent": "root", "text": "teachers" },
  { "id": "companyBV", "parent": "root", "text": "company BV" },
  { "id": "buying", "parent": "companyBV", "text": "Buying" },
  { "id": "finance", "parent": "companyBV", "text": "finance" },
  { "id": "buyingCenter", "parent": "buying", "text": "buying center" },
  { "id": "buyingGeneric", "parent": "buying", "text": "buying generic" },
  { "id": "buyingSCenter", "parent": "buying", "text": "buying service center" }
]

在客户端只需将其提供给 jsTree 配置：

$('#jstree').jstree({
    core: {
      data: data
    }
})

查看演示 - Fiddle Demo