jstreeで使用するためにネストされたセットをデータ（json/html）に変換します。

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でそれを表示したいと思います

私はそれを行うための最善の方法は、まず多次元配列に配置することだと思った。 https://gist.github.com/taion809/6510212を少し修正：

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; 
} 

私はここで見つける：そのために私は、この機能を使用していました。

（前にここで解決策を試してみましたが、私は、ノードが失っていた：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に渡してツリーを構築するために使用できるフォーマットは2つあります。 私は、次のように2番目の「フラット」を使用します。もちろん、それをサーバー側に構築する必要があります。クライアント側では

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