2017-03-28 97 views
0

我想創建一個父級&子關係的科目對象圖。 基於這些SQL結果:將sql結果轉換爲嵌套結構在php中的javascript對象

autoid account_code account_name   parentid account_level 
1  100-000   assets     0     1 
2  200-000   liabilities    0     1 
3  110-000   cash     1     2 
4  120-000   bank     1     2 
5  110-001   petty cash    3     3 
6  120-001   bank no 1    4     3 
7  120-002   bank no 2    4     3 
8  210-000   Current liabilities  2     2 
9  210-001   Account Payable   8     3 

正如你可以看到我已經PARENTID與自動識別列相關列。比如我想將這些結果轉換爲嵌套對象:

[{ 
    account_code:'100-000', 
    account_name:'assets', 
    account_level:1, 
    parentid:0, 
    child:[{ 
     account_code:'110-000', 
     account_name:'cash', 
     account_level:2, 
     parentid:1, 
     child:[{ 
      account_code:'110-001', 
      account_name:'petty cash', 
      account_level:3, 
      parentid:3, 
      child:null 
     }] 
    }] 
}, 
{ 
    account_code:'200-000', 
    account_name:'liabilities', 
    account_level:1, 
    parentid:0, 
    child:[{ 
     account_code:'210-000', 
     account_name:'Current Liabilities', 
     account_level:2, 
     parentid:2, 
     child:[{ 
      account_code:'210-001', 
      account_name:'Account Payable', 
      account_level:3, 
      parentid:8, 
      child:null 
     }] 
    }] 
}] 

我心目中的選項來生成這個

  1. 生成PHP &格式JS對象。
  2. 爲每個級別發送3個json,並將這些對象與lodash組合起來。

我不知道哪些解決方案適合這些要求。

回答

0

簡單的方法來使用jstree庫。您可以使用下面的代碼:

PHP:

function getJsonDataForJstree($dbDataArr) 
{ 
    $arrOfString = array(); 
    foreach($dbDataArr as $row){ 
     $parentId = $row == 0 ? '#' : "custom_elem_$row[parentid]"; 
     $arrOfString[] = '{ "id" : "custom_elem_$row[autoid]", "parent" : $parentId, "text" : "$row[account_name]" }'; 
    } 
    $resJsonData = '['. implode(',', $arrOfString) .']'; 
    return $resJsonData; 
} 
$dbDataArr = getDataFromDataBase(); 
$jsonDataForJstree = getJsonDataForJstree($dbDataArr); 

HTML:

<head> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" /> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script> 
    </head> 
    <body> 
    <input type='hidden' id='jstree-json-data' value='<?php echo $jsonDataForJstree?>' /> 
    <div id='jstree-container'></div> 
    </body> 

使用Javascript/jQuery的:

var jsTreeData = jQuery('#jstree-json-data').val(); 

$('#jstree-container').jstree({ 'core' : { 
    'data' : jsTreeData 
} });