将嵌套集转换为数据(json/html)以在jstree中使用 [英] convert a nested set into data (json/html) for use in jstree

问题描述

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

I have a database with a table, in which data is stored as a nested set. The table looks like this:

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显示它

The data represents a company structure. I would like to display it with jstree

我认为最好的方法是将其放置在多维数组中.为此，我使用了此功能:

I thought the best way to do that, was to first place it in a multidimensional array. For that I used this function:

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，并稍加修改.

that I found here: https://gist.github.com/taion809/6510212 and slightly modified.

这似乎做得很好(以前曾在这里尝试过该解决方案，但是我丢失了节点:

It seems to be doing a pretty good job (Tried the solution in here before, but there I was losing nodes: How do I format Nested Set Model data into an array?)

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

Now my next challenge it to create a jtree out of it, which should either look like this:

<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 ，但是由于该函数将嵌套集变成数组会创建许多数组条目而没有键的名称，我在树中得到了很多额外的层次，其中只有一个数字作为名称，并且没有适当的子级.

I found a function in this topic: PHP Array to jsTree , but since the function that turns the nested set into a array creates many array entries without a name for the key, I get a lot of extra levels in the tree with just a number as name, and without the proper children.

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

I was wondering how I could solve this, and if there's maybe a better way to achieve my goal.

推荐答案

您可以使用两种格式将JSON对象传递给jsTree来构建树. 我将使用下面的第二个扁平"字母.当然，您将不得不在服务器端构建它.

There are two formats you can use to pass JSON object to jsTree to build tree. I would use the second 'flat' one like below. You will have to build it server-side of course.

[
  { "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配置:

On client side just feed it to the jsTree config:

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

检查演示-小提琴演示

这篇关于将嵌套集转换为数据(json/html)以在jstree中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！