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

創(chuàng)新互聯(lián)公司主要從事成都網(wǎng)站制作、成都網(wǎng)站設(shè)計、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)西安,十余年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

首先是數(shù)據(jù)庫設(shè)計

我設(shè)計的一個列數(shù)為三列的表Treenodes，這三列分別用來存儲當(dāng)前節(jié)點(diǎn)的id、節(jié)點(diǎn)名稱、父節(jié)點(diǎn)

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;

前臺頁面已經(jīng)搭好。只要能構(gòu)建形如下面的html代碼，前臺的js就能很好的展現(xiàn)樹形列表了。

<ul>
   <li>根節(jié)點(diǎn)
       <ul>
           <li>子節(jié)點(diǎn)1</li>
           <li>子節(jié)點(diǎn)2
               <ul>
                   <li>孫子節(jié)點(diǎn)1</li>
                   <li>孫子節(jié)點(diǎn)1</li>
               </ul>
           </li>
       </ul>
   </li>
</ul>

先放置一些測試數(shù)據(jù)供展現(xiàn)。

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

第一步先把數(shù)據(jù)從數(shù)據(jù)庫中取出來

$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();
}

第二步是將數(shù)據(jù)存放在一個多維的數(shù)組里邊

定義的數(shù)據(jù)結(jié)構(gòu)是：
用數(shù)組來存放一個節(jié)點(diǎn)， 如果這個節(jié)點(diǎn)是末端節(jié)點(diǎn)，則該數(shù)組，只有一個字符串元素，
如果這個節(jié)點(diǎn)存在子節(jié)點(diǎn)，則在當(dāng)前數(shù)組中，增加一個數(shù)組，所有的子節(jié)點(diǎn)的元素存放在這個數(shù)組中。

function build_book_tree($data, $parentid){
    $nodeName = '';
    $child = [];
    foreach($data as $key => $val){
        //如果當(dāng)前遍歷的項跟查詢的id相同，則獲取節(jié)點(diǎn)的名稱
        if ($val[0] == $parentid){
            $nodeName = $val[1];
        }
        //如果當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)跟查詢的節(jié)點(diǎn)相同，則通過遞歸，獲取他的子節(jié)點(diǎn)，并將結(jié)果，賦給當(dāng)前節(jié)點(diǎn)節(jié)點(diǎn)數(shù)組中
        if ($val[2] == $parentid){
            array_push($child, build_book_tree($data, $val[0]));
        }
    }
    //不存放空節(jié)點(diǎn)
    if (count($child) > 0)
        return array($nodeName, $child);
    else 
        return $nodeName;
}

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

思路：先嘗試把一個節(jié)點(diǎn)，擁有一個子節(jié)點(diǎn)的數(shù)據(jù)結(jié)構(gòu)構(gòu)建成html樹。然后再構(gòu)建復(fù)雜的情情況。函數(shù)只要實現(xiàn)<li>節(jié)點(diǎn)名<ul><li>子節(jié)點(diǎn)一</li>...</ul></li>就行了。遞歸函數(shù)只幫我們構(gòu)建最簡單的形式，賦予它更多的意義，實現(xiàn)起來困難程度就會加倍。所有構(gòu)建html樹的實現(xiàn)應(yīng)該是這樣的：

function build_html_list($data)
{
    if (is_array($data) and count($data) == 2 and is_string($data[0])){
        // 輸出節(jié)點(diǎn)名
        echo "<li>".$data[0];
        // 輸出子節(jié)點(diǎn)
        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>";
    } 
    // 輸出單個元素的節(jié)點(diǎn)
    else if (is_string($data)){
        echo "<li>".$data."</li>";
    }
}

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

分享文章：PHP實現(xiàn)簡單的樹形列表。
本文網(wǎng)址：http://jinyejixie.com/article20/iihhjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、網(wǎng)站維護(hù)、App開發(fā)、電子商務(wù)、小程序開發(fā)、用戶體驗

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)