最近在為公司開發一個在線瀏覽PDF文檔的小web系統。在構建動態列表的時候犯了愁，很久沒寫代碼了，手有些生了，搞了半天才搞出來，寫篇博文記錄一下。

首先是數據庫設計

我設計的一個列數為三列的表Treenodes，這三列分別用來存儲當前節點的id、節點名稱、父節點

SQL如下

CREATE TABLE `treenodes` (
  `id` int(11) NOT NULL,
  `node_name` varchar(50) DEFAULT NULL,
  `pid` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

前臺頁面已經搭好。只要能構建形如下面的html代碼，前臺的js就能很好的展現樹形列表了。

<ul>
   <li>根節點
       <ul>
           <li>子節點1</li>
           <li>子節點2
               <ul>
                   <li>孫子節點1</li>
                   <li>孫子節點1</li>
               </ul>
           </li>
       </ul>
   </li>
</ul>

先放置一些測試數據供展現。

INSERT INTO `treenodes` VALUES (‘1‘, ‘INMIX 培訓知識庫‘, ‘-1‘);
INSERT INTO `treenodes` VALUES (‘2‘, ‘IT部門‘, ‘1‘);
INSERT INTO `treenodes` VALUES (‘3‘, ‘HR部門‘, ‘1‘);
INSERT INTO `treenodes` VALUES (‘4‘, ‘線上培訓‘, ‘1‘);
INSERT INTO `treenodes` VALUES (‘5‘, ‘線下培訓‘, ‘1‘);
INSERT INTO `treenodes` VALUES (‘6‘, ‘ERP系統方面 ‘, ‘2‘);
INSERT INTO `treenodes` VALUES (‘7‘, ‘軟件應用方面‘, ‘2‘);
INSERT INTO `treenodes` VALUES (‘8‘, ‘IT設備應用方面‘, ‘2‘);
INSERT INTO `treenodes` VALUES (‘9‘, ‘店鋪系統方面‘, ‘2‘);
INSERT INTO `treenodes` VALUES (‘10‘, ‘釘釘輕松小秘書日程管理(V1.0).pdf‘, ‘6‘);

第一步先把數據從數據庫中取出來

$conn = new mysqli(‘xxx.xxx.xxx.xxx‘, ‘userxxx‘, ‘xxxxxx‘, ‘QuotationSystem‘);
/* check connnection */
if ($conn ->connect_errno){
      printf("Connect failed: %s \n", $conn->connect_error);
      exit();
}
if ($q = $conn ->query(‘select * from treenodes a‘)){
  $result = $q-> fetch_all();
}

第二步是將數據存放在一個多維的數組裏邊

定義的數據結構是：
用數組來存放一個節點， 如果這個節點是末端節點，則該數組，只有一個字符串元素，
如果這個節點存在子節點，則在當前數組中，增加一個數組，所有的子節點的元素存放在這個數組中。

 // 定義 book tree
            function build_book_tree($data, $parentid){
                $nodeName = ‘‘;
                $child = [];
                foreach($data as $key => $val){
                    //如果當前遍歷的項跟查詢的id相同，則獲取節點的名稱
                    if ($val[0] == $parentid){
                        $nodeName = $val[1];
                    }
                    //如果當前節點的父節點跟查詢的節點相同，則通過遞歸，獲取他的子節點，並將結果，賦給當前節點節點數組中
                    if ($val[2] == $parentid){
                        array_push($child, build_book_tree($data, $val[0]));
                    }
                }
                //不存放空節點
                if (count($child) > 0)
                    return array($nodeName, $child);
                else 
                    return $nodeName;
            }

第三步 是生成html 列表元素， 這是我今天卡殼的地方。遞歸用的不太好，後來整理了一下思路，問題就迎刃而解了。

思路：先嘗試把一個節點，擁有一個子節點的數據結構構建成html樹。然後再構建復雜的情情況。函數只要實現<li>節點名<ul><li>子節點一</li>...</ul></li>就行了。遞歸函數只幫我們構建最簡單的形式，賦予它更多的意義，實現起來困難程度就會加倍。 所有構建html樹的實現應該是這樣的：

function build_html_list($data)
            {
                if (is_array($data) and count($data) == 2 and is_string($data[0])){
                    // 輸出節點名
                    echo "<li>".$data[0];
                    // 輸出子節點
                    if (is_array($data[1])){
                        echo "<ul>";
                        foreach ($data[1] as $item){
                            if (is_string($item)){
                                echo "<li>".$item."</li>";
                            } 
                            else{
                                build_html_list($item);    
                            }
                        }
                        echo "</ul>";
                    }
                    echo "</li></ul>";
                }
                echo "</li>";
            }

輸出它的時候，需要給上述方法添加“<ul>”html元素。

PHP 實現簡單的樹形列表。