2017-02-24 112 views
0

我有一個帶有表的數據庫,其中數據存儲爲嵌套集。該表如下所示:將嵌套集轉換爲jstree中使用的數據(json/html)

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,但由於功能是t將嵌套集合放到數組中創建許多沒有鍵名的數組條目,我在樹中只用一個數字作爲名稱,而沒有合適的子元素,從而得到很多額外的級別。

我想知道如何解決這個問題,以及是否有更好的方法來實現我的目標。

回答

2

您可以使用兩種格式將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

+0

感謝尼古拉,該結構肯定讓查詢更容易一點,我找到了一個好查詢在這個主題http://stackoverflow.com/questions/659504/is-there-a-simple-way-to-query-the-children-of-a-node從數據庫中獲得結果的格式,其中我得到孩子和父母身份證,然後我可以使用jstree。 – ErikL

相關問題