您好,登錄后才能下訂單哦!
最近在為公司開發(fā)一個(gè)在線瀏覽PDF文檔的小web系統(tǒng)。在構(gòu)建動(dòng)態(tài)列表的時(shí)候犯了愁,很久沒寫代碼了,手有些生了,搞了半天才搞出來,寫篇博文記錄一下。
首先是數(shù)據(jù)庫(kù)設(shè)計(jì)
我設(shè)計(jì)的一個(gè)列數(shù)為三列的表Treenodes,這三列分別用來存儲(chǔ)當(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;
前臺(tái)頁(yè)面已經(jīng)搭好。只要能構(gòu)建形如下面的html代碼,前臺(tái)的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>
先放置一些測(cè)試數(shù)據(jù)供展現(xiàn)。
INSERT INTO `treenodes` VALUES ('1', 'INMIX 培訓(xùn)知識(shí)庫(kù)', '-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ù)庫(kù)中取出來
$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ù)存放在一個(gè)多維的數(shù)組里邊
定義的數(shù)據(jù)結(jié)構(gòu)是:
用數(shù)組來存放一個(gè)節(jié)點(diǎn), 如果這個(gè)節(jié)點(diǎn)是末端節(jié)點(diǎn),則該數(shù)組,只有一個(gè)字符串元素,
如果這個(gè)節(jié)點(diǎn)存在子節(jié)點(diǎn),則在當(dāng)前數(shù)組中,增加一個(gè)數(shù)組,所有的子節(jié)點(diǎn)的元素存放在這個(gè)數(shù)組中。
function build_book_tree($data, $parentid){ $nodeName = ''; $child = []; foreach($data as $key => $val){ //如果當(dāng)前遍歷的項(xià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 列表元素, 這是我今天卡殼的地方。遞歸用的不太好,后來整理了一下思路,問題就迎刃而解了。
思路:先嘗試把一個(gè)節(jié)點(diǎn),擁有一個(gè)子節(jié)點(diǎn)的數(shù)據(jù)結(jié)構(gòu)構(gòu)建成html樹。然后再構(gòu)建復(fù)雜的情情況。函數(shù)只要實(shí)現(xiàn)<li>節(jié)點(diǎn)名<ul><li>子節(jié)點(diǎn)一</li>...</ul></li>就行了。遞歸函數(shù)只幫我們構(gòu)建最簡(jiǎn)單的形式,賦予它更多的意義,實(shí)現(xiàn)起來困難程度就會(huì)加倍。 所有構(gòu)建html樹的實(shí)現(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>"; } // 輸出單個(gè)元素的節(jié)點(diǎn) else if (is_string($data)){ echo "<li>".$data."</li>"; } }
輸出它的時(shí)候,需要給上述方法添加“<ul>”html元素。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。