工作中有如下需求

  需要把分类信息,在表格中展现出来,通过合并单元格来实现信息之间的层级关系。

如下图:

废话不多说,直接贴代码:

<?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="width: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="width: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>

转载于:https://www.cnblogs.com/sajanray/p/4373975.html

把分类信息,在表格中展现出来,通过合并单元格来实现信息之间的层级关系...相关推荐

  1. 在Excel表格中如何快速拆分合并单元格

    在Excel表格中如何快速拆分合并单元格 目录 在Excel表格中如何快速拆分合并单元格 1.例如:将销售人列中的合并单元格拆分还原 2.选中销售人姓名,点击[开始]选项卡中[合并居中] 3.再点击[ ...

  2. 使用jquery合并表格中相同文本的相邻单元格

    一.效果 二.代码 <!DOCTYPE HTML> <html> <head><title>Example</title><meta ...

  3. jQuery: 合并表格中相同文本的相邻单元格

    一.效果 二.代码 <!DOCTYPE HTML> <html> <head><title>Example</title><meta ...

  4. php相同数据合并单元格,jQuery_基于jQuery的合并表格中相同文本的相邻单元格的代码,ONE 已经生成的数据表格大致 - phpStudy...

    基于jQuery的合并表格中相同文本的相邻单元格的代码 ONE 已经生成的数据表格大致内容如下: 地区 地区 商品代码 商品名称 数量 有效期至 距效期(月) 产品批号 规格 单位 条形码 广东 深圳 ...

  5. 在Excel表格中如何设置字体随单元格大小变化

    在Excel表格中如何设置字体随单元格大小变化 目录 在Excel表格中如何设置字体随单元格大小变化 1.选中单元格,鼠标右键点击"设置单元格式" ​2.在"对齐&quo ...

  6. Excel表格中,上下左右键无法移动单元格怎么办?

    excel表格中,上下左右键无法移动单元格,要如何才能使用上下左右键移动单元格,操作方法如下. 1.在excel表格中,发现按键盘的上下左右键无法移动单元格了,鼠标始终还是在定位的单元格上,这是不小心 ...

  7. matlab中图显示单元格,excel如何根据表格中的数据自动在单元格中画图:

    如何利用matlab根据excel表格里面的数据画图 将待的结构的数据录入Excel中,录入意行列要跟原矩阵一一对应 录入完以后保存数据,为了后续使用方便,命名时我们最好把它命名为我们接下来在MATL ...

  8. html合并单元格怎么把字竖着,电脑excel单元格中文字如何在合并单元格后竖排显示...

    电脑excel单元格中文字如何在合并单元格后竖排显示 excel软件是我们现在经常使用的数据处理工具之一,接下来小编就教大家怎样在软件中设置合并单元格之后竖排显示文字. 具体如下: 1. 首先我们需要 ...

  9. JavaScript合并网页表格中内容相同的相邻单元格

    继续编写"圳品"信息系统,我们已经"圳品"信息读取到JavaScript定义的一个中进行按汉语拼音升序作了排序处理. var p = [[100, " ...

最新文章

  1. 在SharePoint 2010使用OWA查看自己邮箱的内容
  2. 取代java_如何评价 Kotlin?未来是否会取代 Java?
  3. [数分提高]2014-2015-2第6教学周第2次课(2015-04-09)
  4. 【C 语言】二级指针作为输入 ( 二维数组 | 二维数组内存大小计算 | 指针跳转步长问题 )
  5. 20180530更新
  6. TypeScript的类型断言,有点像ABAP的强制类型转换
  7. 判断奇偶性 大数(高精度)
  8. C语言中的指针型函数值
  9. Win10安装JDK与配置环境变量
  10. C++容器(一)——vector
  11. phpmyadmin误删表后如何恢复
  12. Fabric java sdk 1.4简明教程
  13. Visio+MathType安装包及安装步骤详细步骤
  14. 2018年第九届蓝桥杯JAVA A组国赛 —— 第二题:阅兵方阵(暴力)
  15. 玩安卓从 0 到 1 之项目总结
  16. ETL工具KETTLE常用设计之——作业设计思路模板
  17. 谁是窃贼(逻辑推理题)
  18. Android设备用指令查看设备mac地址的两种方法
  19. Vsearch免费替代收费版的usearch
  20. 国际标准刊号(ISSN)

热门文章

  1. Matplotlib Line2D设置
  2. freecplus框架-PostgreSQL数据库操作
  3. Oracle环境变量
  4. Veeam FAQ系列转载(三)
  5. 虚拟化VMware ESXi 6.7服务器安装配置详细步骤图文
  6. 升级至 vCenter Server 6.5 的最佳实践 (2147686)
  7. 阿里电商架构演变之路(二)
  8. 项目管理学习总结(5)——产品开发过程中各角色职责说明和技能要求
  9. SVN学习总结(4)——解决Win10 SVN图标不显示问题
  10. Java基础学习总结(68)——有关Java线程方面的面试题