用php和js實現簡單的樹結構(點擊收縮與拉伸)


<script language="javascript" type="text/javascript">
function show(eventName)
{
    $("#"+eventName).children().toggle();
}

</script>

//樹的節點,id是每個節點的唯一標誌,pid表示他的父節點 ,name表示節點的名稱

<?php
$result[0] = array('id'=>1,'pid'=>0,'name'=>'公司1',);
$result[1] = array('id'=>2,'pid'=>0,'name'=>'公司2');
$result[2] = array('id'=>3,'pid'=>2,'name'=>'公司2的子公司1');
$result[3] = array('id'=>4,'pid'=>1,'name'=>'公司1的子公司1');
$result[4] = array('id'=>5,'pid'=>2,'name'=>'公司2的子公司2');
$result[5] = array('id'=>6,'pid'=>3,'name'=>'公司2的子公司1的子公司1');
$result[6] = array('id'=>7,'pid'=>3,'name'=>'公司2的子公司1的子公司2');
$result[7] = array('id'=>8,'pid'=>3,'name'=>'公司2的子公司1的子公司3');
$result[8] = array('id'=>9,'pid'=>8,'name'=>'公司2的子公司1的子公司3');
$result[9] = array('id'=>10,'pid'=>9,'name'=>'公司2的子公司1的子公司3');
//簡易類
class tree

{

//創建樹

   function tree($rs,$idName,$pidName,$nodeName)

    {
        $this->idName    = $idName;//當前節點的id
        $this->pidName    = $pidName;//父節點的id
        $this->nodeName = $nodeName;
        $tree = array();
        foreach((array)$rs as $k=>$v)
        {
            $tree[$v[$pidName]][] = $v;
        }
 
        $this->treeArray = $tree;

    }

//顯示樹

    function showTree($root,$deep)
    {
        if( $this->treeArray[$root] )
        {
            foreach($this->treeArray[$root] as $k=>$v)
            {
                $t = $v[$this->idName];
                $p = $v[$this->pidName];
                $name=$v[$this->nodeName];

                $str   = str_repeat("&nbsp;",$deep*4)."|-".str_repeat("-",$deep);

//在每個節點的前面加個<span>標籤

                $html .="<span id='{$t}' οnclick='show($t)'>"."{$str}"."{$v[$this->nodeName]}<br/>";
                if($this->treeArray[$t] )

                {

//使用遞歸的方法在每個節點的後面價格</span>標籤

                   $html .="<span id='{$t}' οnclick='show($t)' style='display:none'>";
                    $gx = $deep + 1;
                    $html .= $this->showTree( $t,$gx );
                    $html .="</span>";
                }
                    $html .="</span>";
            }
        }
        return $html;
    }
}
$tree = new tree($result,'id','pid','name');
echo $tree->showTree(0,0);

?>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章