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

 工作中有如下需求

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

如下图：

 

 废话不多说，直接贴代码：

<?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