Php代碼
代碼如下Php代碼
* 將數組轉換成樹
* 例子:將 array(
array('id'=>1,'parentId' => 0,'name'=> 'name1')
,array('id'=>2,'parentId' => 0,'name'=> 'name2')
,array('id'=>4,'parentId' => 1,'name'=> 'name1_4')
,array('id'=>15,'parentId' => 1,'name'=> 'name1_5')
);轉換成
* Array(
[1] => Array([id] => 1
[parentId] => 0
[name] => name1
[children] => Array(
[0] => Array([id] => 15,[parentId] => 1,[name] => name1_5)
[1] => Array([id] => 4,[parentId] => 1,[name] => name1_4)
)
)
[2] => Array([id] => 2,[parentId] => 0,[name] => name2)
)
* @param array $sourceArr 要轉換的數組
* @param string $key 數組中確認父子的key,例子中為“id”
* @param string $parentKey 數組中父key,例子中為“parentId”
* @param type $childrenKey 要在樹節點上索引子節點的key,例子中為“children”
* @return array 返回生成的樹
*/
代碼如下 function arrayToTree($sourceArr, $key, $parentKey, $childrenKey)Php代碼
/**遞歸方法:**/
$rows = array(
0 => array('id' => 1, 'name' => '菜單1', 'parentId' => 0)
, 1 => array('id' => 2, 'name' => '菜單2', 'parentId' => 0)
, 2 => array('id' => 3, 'name' => '菜單3', 'parentId' => 0)
, 3 => array('id' => 4, 'name' => '菜單1_1', 'parentId' => 1)
, 4 => array('id' => 5, 'name' => '菜單1_2', 'parentId' => 1)
, 5 => array('id' => 6, 'name' => '菜單2_1', 'parentId' => 2)
);
print_r(getTree($rows, 0, 'id', 'parentId'));
代碼如下一個實例
代碼如下 復制代碼<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title>TREE</title>
<style type="text/css">
/*樹的全局CSS*/
.kyp_tree{
font: 12px/2.5 verdana;
float:left;display:inline;
}
.kyp_tree dd{
margin:0;padding:0;
margin-left:20px;
}
/*鏈接*/
.kyp_tree dl a{
font-size:12px;
color:#333;
text-decoration:none;
}
.kyp_tree dl a:hover, .kyp_tree dd dt.red_sub a{
font-size:12px;
color:#AE0002;
}
/*一級dl*/
.kyp_tree dl{
border-bottom:1px dashed #ccc;
margin:0;padding:0;
}
/*次級dl*/
.kyp_tree dl dl, .kyp_tree dl.last{
border:none;
}
.kyp_tree dd dt.currentClass{
background:url(tree_top.gif) no-repeat 0 -24px;
}
/*一級標題*/
.kyp_tree dt{
background:url(tree_top.gif) no-repeat 2px -57px;
padding-left:15px;
cursor:pointer;
font-size:13px;
height:30px;
line-height :27px;
line-height :32px9;
}
/*子標題*/
.kyp_tree dd dt{
background:url(tree_arrow.gif) no-repeat 2px 10px;
font-size:12px;
}
/*一級張開樣式*/
.kyp_tree dt.open{
background:url(tree_top.gif) no-repeat 2px 12px;
}
/*張開樣式*/
.kyp_tree dd dt.open{
background:url(tree_arrow.gif) no-repeat 0 -25px;
}
/*沒有子節點的樣式*/
.kyp_tree dt.nosub{
background:none;
}
</style>
<script type="text/javascript">
//<![CDATA[
jQuery.fn.createTree = function (fn, ini){
var $ = jQuery, ini = Object(ini);
this.find('dd').hide();
this.children('dl:last').addClass('last');
this.find('dt', this).each(function (){
var nosub = $(this).next('dd').size() == 0;
if (nosub) {
$(this).addClass('nosub');
}
if (ini.id && ini.id == $(this).attr('classify')) {
$(this).parents('dd').show().prev('dt').addClass('open');
$(this).addClass('red_sub');
if (nosub) {
$(this).addClass('currentClass')
}else{
$(this).next('dd').show();
$(this).addClass('open')
}
}
}).click(function (e){
var dd = $(this).next('dd'),
isClose = dd.css('display') == 'none';
if (dd.size()) {
if (isClose) {
dd.show();
$(this).addClass('open')
}else{
dd.hide();
$(this).removeClass('open')
}
}
return fn && fn.call(this, e, dd)
});
if (ini.mx) {
this.find('dt').click(function (e){
var J = $(this);
if (J.next('dd').size()) {
if (J.hasClass('open')) {
J.parent().siblings('dl').children('dd').hide();
J.parent().siblings('dl').children('dt').removeClass('open');
J.next('dd').show();
J.addClass('open')
}
}
})
}
};
(function ($){
$(function (){
$('#tree_wrap').createTree(function (e, dd){//回調(事件, 下一個dd)
$('#show').html(this.innerHTML+dd.size())
}, {mx: 1, id: 200})// mx是否互斥, id 當前類別
});
})(jQuery)
//]]>
</script>
</head>
<body>
<?php
// 樹組的順序即是分類的順序,因此前當分類的下級子類一定要緊隨其後
$tree= array(
1 => array('id'=>1, 'cname'=>'一級分類', 'pid'=>0),
100 => array('id'=>100, 'cname'=>'特意加進去的二級分類', 'pid'=>1),
101 => array('id'=>101, 'cname'=>'特意加進去的二級分類2222222222', 'pid'=>1),
2 => array('id'=>2, 'cname'=>'二級分類', 'pid'=>1),
3 => array('id'=>3, 'cname'=>'三級分類', 'pid'=>2),
4 => array('id'=>4, 'cname'=>'四級分類', 'pid'=>3),
5 => array('id'=>5, 'cname'=>'四級分類2', 'pid'=>3),
200 => array('id'=>200, 'cname'=>'55555', 'pid'=>5),
6 => array('id'=>6, 'cname'=>'另一級分類', 'pid'=>0),
7 => array('id'=>7, 'cname'=>'First First First', 'pid'=>0),
8 => array('id'=>8, 'cname'=>'First First First', 'pid'=>7),
);
// 指定分類ID,返回子類量(不進行深度遞歸)
function getChildTotal($id)
{
global $tree;
$total = 0;
foreach($tree as $value)
{
if ($id == $value['pid'])
{
$total++;
}
}
return $total;
}
// 指定分類ID,www.111cn.net並返回數組(不進行深度遞歸)
function getChildArray($id)
{
global $tree;
$array = array();
foreach($tree as $key=>$value)
{
if ($id == $value['pid'])
{
$array[$key] = $value;
}
}
return $array;
}
// 遞歸查詢方式將樹數組轉換成HTML嵌套樹
function getTreeHTML($tree,$level = 0)
{
if ($tree)
{
$level += 1;
foreach($tree as $id => $node)
{
$html .= "<dl>";
$html .= '<dt classify="'.$node['id'].'"><a href="http://www.baidu.com/">'.$node['cname']."</a></dt>";
if (getChildTotal($node['id']))
{
$tree_last = getChildArray($node['id']);
$html .= '<dd>';
$html .= getTreeHTML($tree_last,$level);
$html .= '</dd>';
}
$html .= '</dl>';
}
}
return $html;
}
$html = getTreeHTML( getChildArray(0) );
echo '<div id="tree_wrap" class="kyp_tree">';
echo $html;
echo '</div><div id="show" style="clear:both;border-top:1px solid red"></div>';
?>
</body>
</html>