有關樹狀選單美化的問題??

edited 十月 2013 in PHP新手區
小弟只是個基礎的程式學習者!
http://forum.twbb.org/viewthread.php?tid=9574
學到如何資料庫導入php來作樹狀

-- 主機: localhost
-- 建立日期: Dec 25, 2004, 11:16 PM
-- 伺服器版本: 4.0.20
-- PHP 版本: 5.0.1
--
-- 資料庫: `test`
--
--
--
-- 資料表格式: `menu`
--
--id為流水號
--name為每個樹節點的名稱
--url為超連結
--target為目標框?#91;頁
--parent為父節點,若為0則無父節點
--
CREATE TABLE `menu` (
`id` int(10) unsigned NOT NULL auto_increment,
`name` varchar(50) NOT NULL default '',
`url` varchar(50) NOT NULL default '',
`target` varchar(50) NOT NULL default '',
`parent` int(11) NOT NULL default '0',
PRIMARY KEY  (`id`)
) TYPE=MyISAM AUTO_INCREMENT=11 ;
--
-- 列出以下資料庫的數據: `menu`
--
INSERT INTO `menu` VALUES (1, '搜尋器', '#', '_self', 0);
INSERT INTO `menu` VALUES (2, 'php網站', '#', '_self', 0);
INSERT INTO `menu` VALUES (3, 'kimo', 'http://www.kimo.com.tw', '_blank', 1);
INSERT INTO `menu` VALUES (4, 'google', 'http://www.google.com', '_blank', 1);
INSERT INTO `menu` VALUES (5, '國內', '#', '_self', 2);
INSERT INTO `menu` VALUES (6, '國外', '#', '_self', 2);
INSERT INTO `menu` VALUES (7, 'php5討論區', 'http://www.php5.idv.tw', '_blank', 5);
INSERT INTO `menu` VALUES (8, 'twbb討論區', 'http://www.twbb.org/forum/', '_blank', 5);
INSERT INTO `menu` VALUES (9, 'php.net', 'http://www.php.net', '_blank', 6);
INSERT INTO `menu` VALUES (10, 'zend', 'http://www.zend.com/', '_blank', 6);

testcmwebsite.php 主程式碼
<html>
<head>
<title>用php製作樹狀選單</title>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<script language="javascript">
function control_childNode(div_id){
var obj=eval(div_id);
if(obj.style.display=="none"){
obj.style.display="";
}else{
obj.style.display="none";
}
}
</script>
</head>
<body>
<?
include("connection.php");//連結資料庫
makeTreeNode(0);
function makeTreeNode($id){
$rs=mysql_query("select * from menu where parent=$id and user_id='?' ");

echo "<ul>\n";
while(list($id,$name,$url,$target,$parent)=mysql_fetch_array($rs)){
echo "<li><a href='$url' target='$target'><div onclick='control_childNode(\"div{$id}\");'>$name</div></a></li>\n";
echo "<div id='div{$id}' style='display:none'>\n";
makeTreeNode($id);
echo "</div>\n";
}
echo "</ul>\n";
}
?>


</body>
</html>

之後小弟為了美觀!加上了CSS!

<style type="text/css">
.TreeView,.TreeView ul{
margin:0;
padding:0;
list-style:none;
font-size:12px;}
.TreeView li{
padding-left:16px;
text-indent:15px;
line-height:20px;
background:transparent url(folder.gif) 12px 2px no-repeat;}
.TreeView a:link,.TreeView a:visited{
color:#111;
text-decoration:none;}
.TreeView a:hover,.TreeView a:active{
color:#05f;
text-decoration:underline;}
</style>

並在testcmwebsite.php 主程式碼,將<script language="javascript">裡的

$rs=mysql_query("select * from menu where parent=$id and user_id='?' ");

echo "<ul>\n";

修改為

$rs=mysql_query("select * from menu where parent=$id and user_id='?' ");

echo "<ul class='TreeView'>\n";

之後小弟還是很不滿足,希望有像
http://dob.tnc.edu.tw/authorHD/74/tree_demo.htm
可以表現出是否有開啟和線狀以表式該連結

在表現是否有開啟方面,小弟先在<style type="text/css">裡再加上
.TreeView li.Open{
background:transparent url(treeview_icon_folder_opened.gif) 0px 2px no-repeat;}

並在testcmwebsite.php 主程式碼,將<script language="javascript">裡加上

function getElementsByClassName(ele,className) {
//獲取所有子節點
if(document.all){
var children = ele.all;
}else{
var children = ele.getElementsByTagName('*');
}
//找完子節點並檢查className屬性
var elements = new Array();
for (var i = 0; i < children.length; i++) {
var child = children;
var classNames = child.className.split(' ');
for (var j = 0; j < classNames.length; j++) {
if (classNames[j] == className) {
elements[elements.length] = child;
break;
}
}
}
return elements;
}

window.onload = function(){
var trees = getElementsByClassName(document,'TreeView');
for(var i=0;i<trees.length;i++){
//先把所有的節點找出來
var nodes = trees.getElementsByTagName('LI');
//判斷各個節點是否有子節點
for(var j=0;j<nodes.length;j++){
if(nodes[j].innerHTML.toLowerCase().indexOf('<ul>') > -1)
nodes[j].className += 'Open';
}
}
}


完成後小弟瀏覽還是沒有出現其判斷,想請問各位高手大哥那裡有問題?
以上尋找節點的判斷式!在下列的狀況是能顯示

<ul class="TreeView">
<li title="我是树根"><a href="#">树根</a>
<ul>
<li title="我是树枝"><a href="#">树枝1号</a>
<ul>
<li title="我是树叶"><a href="#">叶子11号</a></li>
<li title="我也是树叶"><a href="#">叶子12号</a></li>
</ul>
</li>
<li title="我也是树枝"><a href="#">树枝2号</a>
<ul>
<li title="我们都是树叶"><a href="#">叶子21号</a></li>
<li title="我讨厌做树叶"><a href="#">叶子22号</a></li>
<li title="其实我是一朵花"><a href="#">叶子23号</a></li>
</ul>
</li>
</ul>
</li>
</ul>

想請問是那方面的問題導至無法顯示?是echo還是迴圈的關系?希望能幫小弟解答!
更希望能教導小弟要如何有線狀的連結?只要有任何問題和回答!小弟都是感激不盡!謝謝!

原始討論: http://twpug.net/x/modules/newbb/viewtopic.php?topic_id=1920

評論

  • edited 八月 2006
    1. 第一個範例程式只顯示了兩層,需要繼續向下延伸需要嘗試使用遞迴取得資料
    2. 把問題切開一點,嘗試找出自己覺得有問題的部份
    3. 線狀的連結或者說開啟、閉合的狀態是透過圖片達成,關鍵點只是取得子項目時更換圖片而已
    4. 第二個範例不支援 Firefox
  • edited 八月 2006
    3. 線狀的連結或者說開啟、閉合的狀態是透過圖片達成,關鍵點只是取得子項目時更換圖片而已

    如果是設資料庫在迴圈而有所變更!那是要用JavaScript去設定嗎?
    如果是的話!那小弟得去找看看了!

    4. 第二個範例不支援 Firefox

    小弟試過真的firefox不支援,只有IE才開的出來!
    這是什麼原因?是因為CCS嗎?
  • edited 八月 2006
    3. 確實得透過 javascript

    4. 原因應該也是 javascript 判斷問題
  • edited 八月 2006
    謝謝!我再去TRYTRY看!
    希望能找出問題!
Sign In or Register to comment.