TreeTable通过对单元格的行合并和列合并实现了无限层级也能较好的展示层级架构.
1.构建ID/PID/NAME的数组,后期可通过数据库生成的动态数据,代码如下:
array( * 1 => array('id'=>'1','parentid'=>0,'name'=>'一级栏目一'), * 2 => array('id'=>'2','parentid'=>0,'name'=>'一级栏目二'), * 3 => array('id'=>'3','parentid'=>1,'name'=>'二级栏目一'), * 4 => array('id'=>'4','parentid'=>1,'name'=>'二级栏目二'), * 5 => array('id'=>'5','parentid'=>2,'name'=>'二级栏目三'), * 6 => array('id'=>'6','parentid'=>3,'name'=>'三级栏目一'), * 7 => array('id'=>'7','parentid'=>3,'name'=>'三级栏目二') * )
2.导入TreeTable类库,代码如下:
import('@.ORG.Util.TableTree'); //Thinkphp导入方法3. 生成TreeTable HTML代码 $treeTable->init($treearr); echo $treeTable->get_treetable();
注意:get_treetable()只生产表体部门,
php完整代码如下:
init($treearr); * 3. 获取无限分类HTML代码 * echo $treeTable->get_treetable(); * */ class TreeTable { /** * 生成树型结构所需要的2维数组 * @var array */ public $arr = array(); /** * 表格列数 * @var int */ public $columns = 0; /** * 表格行数 * @var int */ public $rows = 0; /** * 初始化TreeTable数据 * @param array 2维数组 * array( * 1 => array(&#39;id&#39;=>&#39;1&#39;,&#39;parentid&#39;=>0,&#39;name&#39;=>&#39;一级栏目一&#39;), * 2 => array(&#39;id&#39;=>&#39;2&#39;,&#39;parentid&#39;=>0,&#39;name&#39;=>&#39;一级栏目二&#39;), * 3 => array(&#39;id&#39;=>&#39;3&#39;,&#39;parentid&#39;=>1,&#39;name&#39;=>&#39;二级栏目一&#39;), * 4 => array(&#39;id&#39;=>&#39;4&#39;,&#39;parentid&#39;=>1,&#39;name&#39;=>&#39;二级栏目二&#39;), * 5 => array(&#39;id&#39;=>&#39;5&#39;,&#39;parentid&#39;=>2,&#39;name&#39;=>&#39;二级栏目三&#39;), * 6 => array(&#39;id&#39;=>&#39;6&#39;,&#39;parentid&#39;=>3,&#39;name&#39;=>&#39;三级栏目一&#39;), * 7 => array(&#39;id&#39;=>&#39;7&#39;,&#39;parentid&#39;=>3,&#39;name&#39;=>&#39;三级栏目二&#39;) * ) */ public function init($arr=array()){ if(!is_array($arr)) return false; foreach ($arr as $k=>$v) { $this->arr[$v[&#39;id&#39;]] = $v; } foreach ($this->arr as $k => $v){ $this->arr[$k][&#39;column&#39;] = $this->get_level($v[&#39;id&#39;]); // Y轴位置 $this->arr[$k][&#39;arrchildid&#39;] = $this->get_arrchildid($v[&#39;id&#39;]); // 所有子节点 $this->arr[$k][&#39;arrparentid&#39;] = $this->get_arrparentid($v[&#39;id&#39;]); // 所有父节点 $this->arr[$k][&#39;child_bottom_num&#39;] = $this->get_child_count($v[&#39;id&#39;]); // 所有底层元素节点 } $this->columns = $this->get_columns(); // 总行数 $this->rows = $this->get_rows(); // 总列数 // 按照arrparentid和id号进行排序 $this->sort_arr(); foreach ($this->arr as $k => $v){ $this->arr[$k][&#39;row&#39;] = $this->get_row_location($v[&#39;id&#39;]); // X轴位置 $this->arr[$k][&#39;rowspan&#39;] = $v[&#39;child_bottom_num&#39;]; // 行合并数 $this->arr[$k][&#39;colspan&#39;] = $v[&#39;child_bottom_num&#39;] == 0 ? $this->columns - $v[&#39;column&#39;] + 1 : 0; //列合并数 } return $this->get_tree_arr(); } /** * 获取数组 * */ public function get_tree_arr(){ return is_array($this->arr) ? $this->arr : false; } /** * 按arrparentid/id号依次重新排序数组 * */ public function sort_arr(){ // 要进行排序的字段 foreach ($this->arr as $k => $v){ $order_pid_arr[$k] = $v[&#39;arrparentid&#39;]; $order_iscost[] = $v[&#39;sort&#39;]; $order_id_arr[$k] = $v[&#39;id&#39;]; } // 先根据arrparentid排序,再根据排序,id号排序 array_multisort( $order_pid_arr, SORT_ASC, SORT_STRING, $order_iscost, SORT_DESC, SORT_NUMERIC, $order_id_arr, SORT_ASC, SORT_NUMERIC, $this->arr); // 获取每一个节点层次 for ($column = 1; $column <= $this->columns; $column++) { $row_level = 0; foreach ($this->arr as $key => $node){ if ($node[&#39;column&#39;] == $column){ $row_level++; $this->arr[$key][&#39;column_level&#39;] = $row_level; } } } // 重新计算以ID作为键名 foreach ($this->arr as $k=>$v) { $arr[$v[&#39;id&#39;]] = $v; } $this->arr = $arr; } /** * 得到父级数组 * @param int * @return array */ public function get_parent($myid){ $newarr = array(); if(!isset($this->arr[$myid])) return false; $pid = $this->arr[$myid][&#39;parentid&#39;]; $pid = $this->arr[$pid][&#39;parentid&#39;]; if(is_array($this->arr)){ foreach($this->arr as $id => $a){ if($a[&#39;parentid&#39;] == $pid) $newarr[$id] = $a; } } return $newarr; } /** * 得到子级数组 * @param int * @return array */ public function get_child($myid){ $a = $newarr = array(); if(is_array($this->arr)){ foreach($this->arr as $id => $a){ if($a[&#39;parentid&#39;] == $myid) $newarr[$id] = $a; } } return $newarr ? $newarr : false; } /** * 获取当前节点所在的层级 * @param $myid 当前节点ID号 * */ public function get_level($myid, $init = true){ static $level = 1; if($init) $level = 1; if ($this->arr[$myid][&#39;parentid&#39;]) { $level++; $this->get_level($this->arr[$myid][&#39;parentid&#39;], false); } return $level; } /** * 获取当前节点所有底层节点(没有子节点的节点)的数量 * @param $myid 节点ID号 * @param $init 第一次加载将情况static变量 * */ public function get_child_count($myid, $init = true){ static $count = 0; if($init) $count = 0; if(!$this->get_child($myid) && $init) return 0; if($childarr = $this->get_child($myid)){ foreach ($childarr as $v){ $this->get_child_count($v[&#39;id&#39;], false); } }else{ $count++; } return $count; } /** * 获取节点所有子节点ID号 * @param $catid 节点ID号 * @param $init 第一次加载将情况static初始化 * */ public function get_arrchildid($myid, $init = true) { static $childid; if($init) $childid = &#39;&#39;; if(!is_array($this->arr)) return false; foreach($this->arr as $id => $a){ if($a[&#39;parentid&#39;] == $myid) { $childid = $childid ? $childid.&#39;,&#39;.$a[&#39;id&#39;] : $a[&#39;id&#39;]; $this->get_arrchildid($a[&#39;id&#39;], false); } } return $childid ; } /** * 获取该节点所有父节点ID号 * @param $id 节点ID号 * */ public function get_arrparentid($id, $arrparentid = &#39;&#39;) { if(!is_array($this->arr)) return false; $parentid = $this->arr[$id][&#39;parentid&#39;]; if($parentid > 0) $arrparentid = $arrparentid ? $parentid.&#39;,&#39;.$arrparentid : $parentid; if($parentid) $arrparentid = $this->get_arrparentid($parentid, $arrparentid); return $arrparentid; } /** * 获取节点所在地行定位 * @param $myid 节点ID号 */ public function get_row_location($myid){ $nodearr = $this->arr; // 获取每一个节点所在行的位置 foreach ($nodearr as $key => $node){ if($myid == $node[&#39;id&#39;]) { $node_row_count = 0; $arrparentid = explode(&#39;,&#39;, $node[&#39;arrparentid&#39;]); // 所有父节点小于当前节点层次的底层节点等于0的元素 foreach ($arrparentid as $pid){ foreach ($nodearr as $node_row){ if($node_row[&#39;column&#39;] == $nodearr[$pid][&#39;column&#39;] && $nodearr[$pid][&#39;column_level&#39;] > $node_row[&#39;column_level&#39;] && $node_row[&#39;child_bottom_num&#39;] == 0){ $node_row_count ++; } } } // 所有当前节点并且节点层次(rowid_level)小于当前节点层次的个数 foreach ($nodearr as $node_row){ if($node[&#39;column&#39;] == $node_row[&#39;column&#39;] && $node_row[&#39;column_level&#39;] <$node[&#39;column_level&#39;]){ $node_row_count += $node_row[&#39;child_bottom_num&#39;] ? $node_row[&#39;child_bottom_num&#39;] : 1; } } $node_row_count++; break; } } return $node_row_count; } /** * 获取表格的行数 * */ public function get_rows(){ $row = 0; foreach ($this->arr as $key => $node){ if($node[&#39;child_bottom_num&#39;] == 0){ $rows++; // 总行数 } } return $rows; } /** * 获取表格的列数 * */ public function get_columns(){ $columns = 0 ; foreach ($this->arr as $key => $node){ if($node[&#39;column&#39;] > $columns){ $columns = $node[&#39;column&#39;]; // 总列数 } } return $columns; } /** * 获取分类的表格展现形式(不包含表头) * */ public function get_treetable(){ $table_string = &#39;&#39;; for($row = 1; $row <= $this->rows; $row++){ $table_string .= "rt"; foreach ($this->arr as $v){ if($v[&#39;row&#39;] == $row){ $rowspan = $v[&#39;rowspan&#39;] ? "rowspan=&#39;{$v[&#39;rowspan&#39;]}&#39;" : &#39;&#39;; $colspan = $v[&#39;colspan&#39;] ? "colspan=&#39;{$v[&#39;colspan&#39;]}&#39;" : &#39;&#39;; $table_string .= "rtt "; } return $table_string; } }{$v[&#39;name&#39;]} "; } } $table_string .= "rt