TreeView.php<\/p>\n
<?php\r\nclass TreeView {\r\n public $childName = \"child\";\r\n public $parentid;\r\n public $id;\r\n public $nameColumn;\r\n function __construct($parentid, $id,$nameColumn) {\r\n $this->parentid = $parentid;\r\n $this->id = $id;\r\n $this->nameColumn=$nameColumn;\r\n }\r\n \r\n public function display($Nodes) {\r\n echo '<div class=\"TreeView\"><ul>';\r\n $GroupNodes = $this->buildTree($Nodes->list, $this->parentid, $this->id);\r\n $this->showTree($GroupNodes);\r\n echo '<\/ul>';\r\n }\r\n\r\n function buildTree($temp, $parentid, $idKey) {\r\n $grouped = $this->reGroup($temp, $parentid, $idKey);\r\n $fnBuilder = function ($siblings) use(&$fnBuilder, $grouped, $idKey) {\r\n foreach ($siblings as $k => $sibling) {\r\n $id = $sibling[$idKey];\r\n if (isset($grouped[$id])) {\r\n $sibling[$this->childName] = $fnBuilder($grouped[$id]);\r\n }\r\n $siblings[$k] = $sibling;\r\n }\r\n return $siblings;\r\n };\r\n $tree = $fnBuilder($grouped[0]);\r\n return $tree;\r\n }\r\n\r\n\r\n function showTree($grouped) {\r\n foreach($grouped as $subGroupKey=>$subGroup){\r\n if(is_array($subGroup)){ \r\n if($subGroupKey===$this->childName){\r\n \/\/\u5f53\u524d\u6709\u5b50\u96c6\r\n echo '<ul>';\r\n $this->showTree($subGroup);\r\n echo '<\/ul><\/li>';\r\n }else{\r\n echo '<\/li>';\r\n $this->showTree($subGroup);\r\n }\r\n }else{\r\n if($subGroupKey===$this->nameColumn){\r\n echo '<li><div class=\"clickOnCollpose\"><div class=\"title\"><a>'.$subGroup.'<\/a><\/div><\/div>';\r\n }\r\n }\r\n }\r\n }\r\n \r\n function reGroup($temp, $parentid, $id) {\r\n $group = array();\r\n foreach ($temp as $item) {\r\n $key = $item[$parentid];\r\n $group[$key][] = $item;\r\n }\r\n return $group;\r\n }\r\n \r\n}\r\nclass Nodes{\r\n public $list;\r\n\r\n function __construct(){\r\n $this->list=array();\r\n }\r\n\r\n public function add($Node) {\r\n array_push($this->list, $Node);\r\n }\r\n public function removeByNode($Node) {\r\n for ($i = 0;$i < count($this->list);$i++) {\r\n if ($this->list[$i] === $Node) {\r\n $this->remove($i);\r\n }\r\n }\r\n }\r\n public function removeByIndex($startIndex, $length = 0) {\r\n array_splice($this->list, $startIndex, $lenght);\r\n }\r\n public function clear() {\r\n unset($this->list); \r\n } \r\n}\r\n\r\n?><\/pre>\nTreeView.css<\/p>\n
ul{\r\n list-style:none;\r\n padding-left: 1em;\r\n}\r\n.clickOnCollpose{\r\n display: inline-block;\r\n background-color: #eee;\r\n width:100%;\r\n margin:4px 0px 4px 0px;\r\n border-radius: 6px;\r\n border-width: 1px;\r\n border-color: #aaa;\r\n border-style: solid;\r\n padding:4px;\r\n}\r\n\r\n.clickOnCollpose:hover{\r\n background-color: #337ABC;\r\n color:#FFFFFF;\r\n padding:4px;\r\n border-color:#FFF;\r\n}\r\n\r\n.title{\r\n float:left;\r\n text-indent: 10px;\r\n}\r\n.count-near{\r\n background-color:#FF0000;\r\n border-radius:20px;\r\n color:#FFF;\r\n font-weight:bold;\r\n width:20px;\r\n height:20px;\r\n text-align:center;\r\n float:left;\r\n margin-left:20px;\r\n}\r\n.count-far{\r\n background-color:#FF0000;\r\n border-radius:20px;\r\n color:#FFF;\r\n font-weight:bold;\r\n width:20px;\r\n height:20px;\r\n text-align:center;\r\n float:right;\r\n}\r\n\r\n\r\nli{\r\n cursor:hand;\r\n}\r\n.treeview{\r\n width:100%;\r\n}<\/pre>\nTreeView.js<\/p>\n
$(document).ready(function(){\r\n \/\/\u9ed8\u8ba4\u4ece\u7b2c2\u7ea7\u9690\u85cf\r\n $(\".treeView ul li\").find(\"ul\").toggle();\r\n \r\n $(\".clickOnCollpose\").on('click',function(){ \r\n \/\/\u5c55\u5f00\/\u6536\u7f29\u4e0b\u7ea7\r\n $(this).parent().find(\"ul\").toggle(); \r\n \r\n \/\/\u5c55\u5f00\/\u6536\u7f29\u4e0b\u4e0b\u7ea7\r\n $(this).parent().find(\"ul li ul\").toggle(); \r\n })\r\n \r\n $(\".clickOnCollpose\").mouseenter(function(){\r\n var count=$(this).next().children().length;\r\n \/\/if(count>0){\r\n \/\/class\u4fee\u6539\u6210 count-near \u66f4\u6539\u6837\u5f0f\r\n $(this).append(\"<div class='count-far'> \"+count+\" <\/div>\"); \r\n \/\/}\r\n })\r\n \r\n $(\".clickOnCollpose\").mouseleave(function(){ \r\n \/\/class\u4fee\u6539\u6210 count-near \u66f4\u6539\u6837\u5f0f\r\n $(this).find(\".count-far\").remove();\r\n })\r\n \r\n})<\/pre>\n==============================================================<\/p>\n
Demo.php<\/p>\n
<?php\r\nrequire_once(\"TreeView.php\");\r\n?>\r\n\r\n<html>\r\n<head>\r\n<title>\u6d4b\u8bd5<\/title>\r\n<link rel=\"stylesheet\" href=\".\/TreeView.css\" type=\"text\/css\"\/>\r\n<script src=\"http:\/\/libs.baidu.com\/jquery\/2.1.4\/jquery.min.js\"><\/script>\r\n<script src=\".\/TreeView.js\"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<?php\r\n\r\n$n=new Nodes();\r\n$n->add( [\"id\" => 1, \"name\" => \"name0-1\", \"parentid\" => 0]);\r\n$n->add( [\"id\" => 2, \"name\" => \"name1-2\", \"parentid\" => 1]);\r\n$n->add( [\"id\" => 3, \"name\" => \"name1-3\", \"parentid\" => 1]);\r\n$n->add( [\"id\" => 4, \"name\" => \"name2-4\", \"parentid\" => 2]);\r\n$n->add( [\"id\" => 5, \"name\" => \"name2-5\", \"parentid\" => 2]);\r\n$n->add( [\"id\" => 6, \"name\" => \"name4-6\", \"parentid\" => 4]);\r\n$n->add( [\"id\" => 7, \"name\" => \"name1-7\", \"parentid\" => 1]);\r\n$n->add( [\"id\" => 8, \"name\" => \"name2-8\", \"parentid\" => 2]);\r\n$n->add( [\"id\" => 9, \"name\" => \"name2-9\", \"parentid\" => 2]);\r\n$n->add( [\"id\" => 10, \"name\" => \"name2-10\", \"parentid\" => 2]);\r\n$n->add( [\"id\" => 11, \"name\" => \"name8-11\", \"parentid\" => 8]);\r\n$n->add( [\"id\" => 12, \"name\" => \"name8-12\", \"parentid\" => 8]);\r\n$n->add( [\"id\" => 13, \"name\" => \"name11-13\", \"parentid\" => 11]);\r\n$n->add( [\"id\" => 14, \"name\" => \"name0-14\", \"parentid\" => 0]);\r\n$n->add( [\"id\" => 15, \"name\" => \"name0-15\", \"parentid\" => 0]);\r\n\r\n\r\n$treeview=new TreeView(\"parentid\",\"id\",\"name\");\r\n\/\/\u53ef\u5199\u4f5c$treeview=new TreeView(2,0,1);\r\n$treeview->display($n);\r\n?>\r\n<\/body>\r\n<\/html><\/pre>\n <\/p>\n","protected":false},"excerpt":{"rendered":"