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

convert a nested set into data (json/html) for use in jstree

我有一个带有 table 的数据库,其中数据存储为嵌套集。 table 看起来像这样:

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,但是由于将嵌套集转换为数组的函数创建了许多没有键名的数组条目,所以我得到了很多额外的层次只有一个数字作为名称的树,没有适当的 children.

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

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

[
  { "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