工作中有如下需求
需要把分类信息,在表格中展现出来,通过合并单元格来实现信息之间的层级关系。
如下图:
废话不多说,直接贴代码:
<?php /* 假设你有如下树形结构的数据,树形结构的数据有很多种方法处理,在这里我就不多说了。 数据结构说明:id , pid , name , child 字段是必须的,level不是必须的,在这里用不上。 */ $data = array ( 1 => array ( 'id' => 1, 'pid' => 0, 'name' => '北京', 'level' => 1, 'child' => array ( 0 => array ( 'id' => 2, 'pid' => 1, 'name' => 'BTV纪实', 'level' => 2, 'child' => array ( 0 => array ( 'id' => 5, 'pid' => 2, 'name' => '全纪实', 'level' => 3, 'child' => array ( ), ), 1 => array ( 'id' => 6, 'pid' => 2, 'name' => '奇趣自然', 'level' => 3, 'child' => array ( ), ), ), ), 1 => array ( 'id' => 3, 'pid' => 1, 'name' => '北京文艺频道', 'level' => 2, 'child' => array ( 0 => array ( 'id' => 8, 'pid' => 3, 'name' => '我家有明星', 'level' => 3, 'child' => array ( ), ), ), ), 2 => array ( 'id' => 4, 'pid' => 1, 'name' => '北京财经频道', 'level' => 2, 'child' => array ( 0 => array ( 'id' => 9, 'pid' => 4, 'name' => '理财', 'level' => 3, 'child' => array ( ), ), 1 => array ( 'id' => 10, 'pid' => 4, 'name' => '财富晚间道', 'level' => 3, 'child' => array ( ), ), ), ), ), ), 11 => array ( 'id' => 11, 'pid' => 0, 'name' => '江苏', 'level' => 1, 'child' => array ( 0 => array ( 'id' => 12, 'pid' => 11, 'name' => '江苏卫视', 'level' => 2, 'child' => array ( 0 => array ( 'id' => 13, 'pid' => 12, 'name' => '最強大腦', 'level' => 3, 'child' => array ( ), ), 1 => array ( 'id' => 14, 'pid' => 12, 'name' => '風光片', 'level' => 3, 'child' => array ( ), ), ), ), 1 => array ( 'id' => 15, 'pid' => 11, 'name' => '江苏教育电视台', 'level' => 2, 'child' => array ( ), ), ), ), ); //稍作处理统计出要合并单元的数 foreach ($data as $key => $val ) { $c1 = 0; foreach ($val['child'] as $key1 => $val1) { $data[$key]['child'][$key1]['count'] = count($val1['child'])?:1; $c1 += $data[$key]['child'][$key1]['count']; } $data[$key]['count'] = $c1; } ?> <!-- 稍微加一下table的细边框,个人觉得table自带的border实在是太难看了 --> <style type="text/css"> .border-table{background:#663333;border:0px;} .border-table tr td{background:#fff;font-size:11px;} </style> <!-- 下面就可以循环输出table了,经确认table的DOM结构是完整的,不缺少任何标签,尽管在table里缺少<tr>也不影响显示,但是为了追求完美,咱还是不缺的好 --> <table style="80%;" cellpadding="6" cellspacing="1" class="border-table"> <caption>合并单元格</caption> <?php foreach($data as $val):?> <tr> <td rowspan="<?php echo $val['count'];?>"><?php echo $val['name'];?></td> <?php if($val['child']):?> <?php foreach($val['child'] as $key1=>$val1):?> <?php if($key1 != 0):?><tr><?php endif;?> <td rowspan="<?php echo $val1['count'];?>"><?php echo $val1['name'];?></td> <?php if($val1['child']):?> <?php foreach($val1['child'] as $key2=>$val2):?> <?php if($key2 != 0):?><tr><?php endif;?> <td> <?php echo $val2['name'];?> </td> </tr> <?php endforeach;?> <?php else:?> <td></td> </tr> <?php endif;?> <?php endforeach;?> <?php else:?> <td></td> <td></td> </tr> <?php endif;?> <?php endforeach;?> </table>
附加:
其实在数据上稍作手脚就可以实现下面样式的table,第3级的后面都带一个添加按钮。
代码如下:
<?php //$data 树形的数据结构,同上 foreach ($data as $key => $val ) { $c1 = 0; foreach ($val['child'] as $key1 => $val1) { $data[$key]['child'][$key1]['child'][] = array('name'=>'添加'); $data[$key]['child'][$key1]['count'] = count($val1['child'])+1; $c1 += $data[$key]['child'][$key1]['count']; } $data[$key]['count'] = $c1; } ?> <style type="text/css"> .border-table{background:#663333;border:0px;} .border-table tr td{background:#fff;font-size:11px;} </style> <table style="80%;" cellpadding="6" cellspacing="1" class="border-table"> <caption>合并单元格</caption> <?php foreach($data as $val):?> <tr> <td rowspan="<?php echo $val['count'];?>"><?php echo $val['name'];?></td> <?php if($val['child']):?> <?php foreach($val['child'] as $key1=>$val1):?> <?php if($key1 != 0):?><tr><?php endif;?> <td rowspan="<?php echo $val1['count'];?>"><?php echo $val1['name'];?></td> <?php if($val1['child']):?> <?php foreach($val1['child'] as $key2=>$val2):?> <?php if($key2 != 0):?><tr><?php endif;?> <td> <?php if($key2 != $val1['count']-1):?> <?php echo $val2['name'];?> <?php else:?> <a href="#"><?php echo $val2['name'];?></a> <?php endif;?> </td> </tr> <?php endforeach;?> <?php else:?> <td></td> </tr> <?php endif;?> <?php endforeach;?> <?php else:?> <td></td> <td></td> </tr> <?php endif;?> <?php endforeach;?> </table>