<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="windows-874" %> http://www.siam2dev.com >> ชุมชนนักพัฒนาซอฟต์แวร์ของไทยแห่งใหม่
http://www.siam2dev.com >> ชุมชนนักพัฒนาซอฟต์แวร์แห่งใหม่
กลับหน้าแรก
 
ขอพระองค์จงทรงพระเจริญ
:: ติดต่อโฆษณา 089-6698280 ::
 
PHP :: Professional Homepage


   ::
การสร้างเมนูแบบ TreeView ด้วยข้อมูลจาก ฐานข้อมูล

 

โดย อ. นัฐพงศ์ ส่งเนียม

มีขั้นตอนดังนี้

  1. สร้าง ฐานข้อมูล TestTreeDB  ด้วย PHPMyAdmin
  2. สร้างตาราง ที่ชื่อ TblTestTree
  3. กำหนดฟิลด์ 7 ฟิลด์ ดังนี้

    FieldName

    Type / Size

    id

    PK , autoincrement

    TreeName

    VarChar 30

    Links

    VarChar 50






  4. เพิ่มข้อมูลลงในตารางดังกล่าวอย่างน้อย 2 เรคคอร์ด ดังนี้

    ID

    TreeName

    Links

    1

    Nokia

    http://www.nokia.com

    2

    Motolora

    http://www.Motolora.com

    3

    Sumsung

    http://www.Sumsung.com


  5. สร้าง ไฟล์ ชื่อ TestTree.php ด้วยโปรแกรม Dreamweaver
  6. เขียนโค้ด ดังนี้
       

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>The page Cannot dot info</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">

<script>
function toggle(id,p){
var myChild = document.getElementById(id);
if(myChild.style.display!='block'){
myChild.style.display='block';
document.getElementById(p).className='folderOpen';
}else{
myChild.style.display='none';document.getElementById(p).className='folder';
}}
</script>
<style>
ul.tree {
display:none;margin-left:10px;
}
li.folder {
list-style-image: url(plus1.gif);
}
li.folderOpen {
list-style-image: url(minus1.gif);
}
li.file {
list-style-image: url(dot1.gif);
}
a.treeview {
font-family:tahoma;
font-size:11px;
}
a.treeview:link {
text-decoration:none;
color: #000000;
}
a.treeview:visited {
text-decoration:none;
color: #000000;
}
a.treeview:hover {
text-decoration:none;
color: #FF0000;
}
</style>
</head>
<body>

<?php
$h = "localhost";
$un="root";
$pwd="123";
@$myconn = mysql_connect($h,$un,$pwd);
if($myconn) {

$sql = "select * from TblTestTree";
$result = mysql_db_query("TestTreeDB",$sql,$myconn);
$totalrow = mysql_num_rows($result);
if($totalrow > 0 ) {
for($i = 0; $i < $totalrow-1;$i++) {

?>


<ul xstyle='margin-left:20px;' id='N0'>
<li class="folder" id="P00">
<a class="treeview" href="javascript:toggle('N0_0','P00')"><strong>

<?php echo mysql_result($result,$i,"Treename");?>

</strong></a>
<ul class=tree id="N0_0">
<li style='list-style-image: url(dot1.gif);' class="file"><a class="treeview" href="<?php echo mysql_result($result,$i,"Links");?>" target="_self" title=""><?php echo "URL1 :" . mysql_result($result,$i,"Links");?></a></li>
<li style='list-style-image: url(dot1.gif);' class="file"><a class="treeview" href="#" target="_self" title="">

<?php echo "URL2 :" . mysql_result($result,$i,"Links");?>

</a></li>
</ul>
</li>

</ul>


<?php }
} else { echo "not found data "; }
}
?>



</body>
</html>

 



ผลผลัพธ์


     
 Last Update :: 19/09/2550
:: http://www.siam2dev.com ::
e-mail :: xnattapong@hotmail.com , songneam@gmail.com