论坛首页 编程语言技术论坛

PHP (Html) + Css 实现组织结构图

浏览 2236 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2014-05-09  
网上有很多开源的js版本的组织结构图工具,不过假设有这么个场景,有一个10多m的xml文件,里面是组织关系,要用php解析,再到js生成,这个两个过程都是很费时的,尤其是js的渲染过程,大部分的js版本都是再生成div的方式,这肯定会更加的慢了。

我的方法是,直接用php输出一个相应的html结构,我用的是一定结构的table,再通过css画画线就搞定了。具体的实现方法直接看代码就ok了。有问题可以讨论。

代码]
01
<?php
02
    function PHPtoOrgChart(array $arr,$title='') {
03
        echo '<table>';
04
        $size=count($arr);
05
        if($title!='') {
06
            //head
07

08
            echo '<tr>';
09
            echo '<td colspan="'.($size*2).'">';
10
            echo '<div class="charttext">'.$title.'</div>';
11
            echo '</td>';
12
            echo '</tr>';
13
            //head line
14

15

16
            echo '<tr>';
17
            echo '<td colspan="'.($size*2).'">';
18
            echo '<table><tr><th class="right width-50"></th><th class="width-50"></th></tr></table>';
19
            echo '</td>';
20
            echo '</tr>';
21

22
            //line
23
            if($size>=2){
24

25
            $tdWidth=((100)/($size*2));
26

27
            echo '<tr>';
28
            echo '<th class="right" width="'.$tdWidth.'%"></th>';
29
                echo '<th class="top" width="'.$tdWidth.'%"></th>';
30
                for($j=1; $j<$size-1; $j++) {
31
                    echo '<th class="right top" width="'.$tdWidth.'%"></th>';
32
                    echo '<th class=" top" width="'.$tdWidth.'%"></th>';
33
                }
34
                echo '<th class="right top" width="'.$tdWidth.'%"></th>';
35
            echo '<th width="'.$tdWidth.'%"></th>';
36
            echo '</tr>';
37
            }
38
        }
39
        //
40
        echo '<tr>';
41
        foreach($arr as $key=>$value) {
42
            echo '<td colspan="2">';
43
            if(is_array($value)) {
44
                PHPtoOrgChart($value,$key);
45
            } else {
46
                echo '<div class="charttext">'.$value.'</div>';
47
            }
48
            echo '</td>';
49
        }
50
        echo '</tr>';
51
        //
52
        echo '</table>';
53
    }
参考脚本代码http://www.huiyi8.com/jiaoben/
   发表时间:2014-05-16  
ITEye 成了广告平台了,建议关闭算了!
0 请登录后投票
论坛首页 编程语言技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics