Sebelum memulai, alahkah baiknya jika kita membuat table yang berisi informasi menu tersebut. Silahkan eksekusi query berikut untuk membuat table t_tree dengan isinya.
create table t_tree ( id integer not null auto_increment, id_parent integer, text varchar ( 50 ), link varchar ( 50 ), primary key ( id )); insert into t_tree values ( null, 0, 'menu 1', 'index.php#' ), ( null, 0, 'menu 2', 'index.php#' ), ( null, 0, 'menu 3', 'index.php#' ), ( null, 0, 'menu 4', 'index.php#' ), ( null, 0, 'menu 5', 'index.php#' ), ( null, 2, 'sub menu 2 1', 'index.php#' ), ( null, 2, 'sub menu 2 2', 'index.php#' ), ( null, 2, 'sub menu 2 3', 'index.php#' ), ( null, 2, 'sub menu 2 4', 'index.php#' ), ( null, 2, 'sub menu 2 4', 'index.php#' ), ( null, 6, 'sub menu 2 1 1', 'index.php#' ), ( null, 6, 'sub menu 2 1 2', 'index.php#' ), ( null, 6, 'sub menu 2 1 3', 'index.php#' ), ( null, 11, 'sub menu 2 1 1 1', 'index.php#' ), ( null, 11, 'sub menu 2 1 1 2', 'index.php#' ), ( null, 11, 'sub menu 2 1 1 3', 'index.php#' ), ( null, 11, 'sub menu 2 1 1 4', 'index.php#' ), ( null, 11, 'sub menu 2 1 1 5', 'index.php#' ), ( null, 16, 'sub menu 2 1 1 2 1', 'index.php#' ), ( null, 16, 'sub menu 2 1 1 2 2', 'index.php#' ), ( null, 16, 'sub menu 2 1 1 2 3', 'index.php#' ), ( null, 16, 'sub menu 2 1 1 2 4', 'index.php#' ), ( null, 16, 'sub menu 2 1 1 2 5', 'index.php#' ), ( null, 3, 'sub menu 3 1', 'index.php#' ), ( null, 3, 'sub menu 3 2', 'index.php#' ), ( null, 3, 'sub menu 3 3', 'index.php#' ), ( null, 3, 'sub menu 3 4', 'index.php#' ), ( null, 3, 'sub menu 3 5', 'index.php#' ), ( null, 27, 'sub menu 3 4 1', 'index.php#' ), ( null, 27, 'sub menu 3 4 2', 'index.php#' ), ( null, 27, 'sub menu 3 4 3', 'index.php#' ), ( null, 27, 'sub menu 3 4 4', 'index.php#' );Dan akan menghasilkan table dengan bentuk kurang lebih seperti ini :
mysql> select * from t_tree; +----+-----------+--------------------+------------+ | id | id_parent | text | link | +----+-----------+--------------------+------------+ | 1 | 0 | menu 1 | index.php# | | 2 | 0 | menu 2 | index.php# | | 3 | 0 | menu 3 | index.php# | | 4 | 0 | menu 4 | index.php# | | 5 | 0 | menu 5 | index.php# | | 6 | 2 | sub menu 2 1 | index.php# | | 7 | 2 | sub menu 2 2 | index.php# | | 8 | 2 | sub menu 2 3 | index.php# | | 9 | 2 | sub menu 2 4 | index.php# | | 10 | 2 | sub menu 2 4 | index.php# | | 11 | 6 | sub menu 2 1 1 | index.php# | | 12 | 6 | sub menu 2 1 2 | index.php# | | 13 | 6 | sub menu 2 1 3 | index.php# | | 14 | 11 | sub menu 2 1 1 1 | index.php# | | 15 | 11 | sub menu 2 1 1 2 | index.php# | | 16 | 11 | sub menu 2 1 1 3 | index.php# | | 17 | 11 | sub menu 2 1 1 4 | index.php# | | 18 | 11 | sub menu 2 1 1 5 | index.php# | | 19 | 16 | sub menu 2 1 1 2 1 | index.php# | | 20 | 16 | sub menu 2 1 1 2 2 | index.php# | | 21 | 16 | sub menu 2 1 1 2 3 | index.php# | | 22 | 16 | sub menu 2 1 1 2 4 | index.php# | | 23 | 16 | sub menu 2 1 1 2 5 | index.php# | | 24 | 3 | sub menu 3 1 | index.php# | | 25 | 3 | sub menu 3 2 | index.php# | | 26 | 3 | sub menu 3 3 | index.php# | | 27 | 3 | sub menu 3 4 | index.php# | | 28 | 3 | sub menu 3 5 | index.php# | | 29 | 27 | sub menu 3 4 1 | index.php# | | 30 | 27 | sub menu 3 4 2 | index.php# | | 31 | 27 | sub menu 3 4 3 | index.php# | | 32 | 27 | sub menu 3 4 4 | index.php# | +----+-----------+--------------------+------------+ 32 rows in set (0.01 sec)Step 1 :
Membuat file tree.php yang berisi skrip untuk kontruksi menu tree
<?php
$cont = mysql_connect("localhost", "root", "");
$sel = mysql_select_db("test");
$qtree = mysql_query("SELECT * FROM `t_tree` ORDER BY `id_parent`, `id` ASC");
while(false !== $tr = mysql_fetch_assoc($qtree))
if(!empty($tr))
$tre[] = $tr;
global $tree;
foreach($tre as $v)
$tree[$v['id']] = $v;
$tx = "";
$tx.= my_parent(0);
function my_parent($id) {
global $tree;
$tx = "";
foreach($tree as $v){
if($v['id_parent'] == $id){
$me = $v;
unset($tree[$v['id']]);
$child = my_parent($me['id']);
$class = empty($child) ? "unchild" : "has_child";
$tx.= "<li class='$class'>";
$tx.= "<a href='$me[link]' title='$me[text]'>$me[text]</a>";
$tx.= $child;
$tx.= "</li>";
}
}
if(!empty($tx)){
$cl = $id > 0 ? " class='child'" : "";
return "<ul$cl>$tx</ul>";
}
return "";
}
Step 2 :
Membuat file index.php yang menampilkan menu tree
<?php require_once('tree.php'); ?>
<html>
<head>
<title>PHP Tree</title>
<style>
body {
font: 12px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
}
ul {
list-style-type:none;
margin:0;
padding:5px;
}
ul.child {
display:none;
}
li {
padding-left:40px;
background:transparent url(folder-unchild.png) 0 0 no-repeat;
width:125px;
}
li.has_child {
background-image: url(sign-close.png);
background-position: top left;
}
li.open_child {
background-image:url(sign-open.png);
background-position: top left;
}
</style>
<script type='text/javascript' src='jq.js'></script>
</head>
<body>
<?php echo $tx; ?>
<script>
$('li').click(function(event) {
event.stopPropagation();
if($(this).children('ul').get(0)) {
var m = $(this).children('ul').get(0);
if($(m).css('display') == 'none'){
$(this).attr('class', 'open_child');
$(m).slideDown('fast');
}else{
$(this).attr('class', 'has_child');
$(m).slideUp('fast');
}
}
});
</script>
</body>
</html>
Demo : http://demo.syuaa.net/Menu_Tree_PHP_jQuery/demo.html
Download : http://demo.syuaa.net/Menu_Tree_PHP_jQuery/download/
