2007 年 10 月 10 日 · 107 words · 1 min read · essoduke chang ·

使用 jQuery 製作樹狀目錄

過陣子可能有個案子要使用到無限多層的表達方法，參考過 YUI ，但是自己對於 jQuery 比較熟悉，所以就使用 Treeview plugin 來製作。

資料表的結構也很簡單，我規劃下列幾個欄位：

編號 id – int(4) auto_increment)
標籤名稱 label – varchar(50)
父項目編號 parent – int(4)
排序 sort – int(4)

php 端採用遞迴方式實做：

function treeview($parent) {
    $sql = " SELECT * FROM items WHERE parent=$parent";
    $result = mysql_query($sql);
    $output = array();
    
    while($record = mysql_fetch_array($result)){array_push($output, $record);}
    $cc = count($output);
    
    if(!$parent == 0){  
      if($cc > 0) echo ("\n");
    }
      
    for($i=0; $i 0) {
        $str_a = "";
        $str_b = "";
      } else {
        $str_a = ""; 
        $str_b = "";
      }
      echo ("" . $str_a . $output[$i]['label'] . $str_b);
      treeview($output[$i]['id']);
    }
    if(!$parent == 0) {
      if($cc > 0)
        echo ("\n\n");
      else
        echo ("\n");
    }
}

測試網頁：~~http://beboss.idv.tw/treeview.php~~

5 comments

Mr.t · 2008 年 05 月 14 日

大大, 可以提供一下可以測試的範本code嗎
essoduke · 2008 年 05 月 14 日

Mr.t：

日前誤刪了此範例的 function.php，所以暫時無法觀看範例
以下是完整的原始碼
http://beboss.idv.tw/treeview.php.txt
sha · 2008 年 08 月 06 日

您好小弟我是php的新手
有許多不了解的地方想請教您一下
請問您資料庫的內容是否可以告知一下以及function.php的原始碼
再此先向您說聲謝謝了！
essoduke · author · 2008 年 08 月 06 日

我記得 function.php 只是 mysql 的連結：

<?php
$link = mysql_pconnect(“hostname”, “username”, “password”) or die(“Could not connect”);
mysql_select_db(“database”);
?>

以下是資料庫的內容，可以複製後使用 phpMyAdmin 載入下列 sql：

CREATE TABLE `items` (
`id` int(11) NOT NULL auto_increment,
`label` varchar(50) collate utf8_unicode_ci NOT NULL,
`parent` int(11) NOT NULL,
`root` int(11) NOT NULL,
`sort` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8

INSERT INTO `items` (`id`, `label`, `parent`, `root`, `sort`) VALUES
(1, ‘Hardware’, 0, 0, 1),
(2, ‘Computer’, 0, 0, 2),
(3, ‘Software’, 0, 0, 3),
(4, ‘CPU’, 1, 1, 1),
(5, ‘RAM’, 1, 1, 2),
(6, ‘MainBoard’, 1, 1, 3),
(7, ‘Intel’, 4, 1, 1),
(8, ‘AMD’, 4, 1, 2),
(9, ‘Core 2 Duo’, 7, 1, 1),
(10, ‘Core 2 Quad’, 7, 1, 2),
(11, ‘AM2 Athlon 64’, 8, 1, 1),
(12, ‘Opteron’, 8, 1, 2),
(13, ‘Keyboard & Mouse’, 2, 2, 1),
(14, ‘Printer’, 2, 2, 2),
(15, ‘Operation System’, 3, 3, 1),
(16, ‘Image Process’, 3, 3, 2),
(17, ‘Logitech’, 13, 2, 1),
(18, ‘Microsoft’, 13, 2, 2);
sha · 2008 年 08 月 06 日

很感謝您！
我已經試出來了!
謝謝

Comments are closed.

Related posts

5 comments