Heim > php教程 > php手册 > PHP (Html) + Css 实现组织结构图

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

WBOY
Freigeben: 2016-06-06 19:34:10
Original
1684 Leute haben es durchsucht

网上有很多开源的js版本的组织结构图工具,不过假设有这么个场景,有一个10多m的xml文件,里面是组织关系,要用php解析,再到js生成,这个两个过程都是很费时的,尤其是js的渲染过程,大部分的js版本都是再生成div的方式,这肯定会更加的慢了。 我的方法是,

网上有很多开源的js版本的组织结构图工具,不过假设有这么个场景,有一个10多m的xml文件,里面是组织关系,要用php解析,再到js生成,这个两个过程都是很费时的,尤其是js的渲染过程,大部分的js版本都是再生成div的方式,这肯定会更加的慢了。

我的方法是,直接用php输出一个相应的html结构,我用的是一定结构的table,再通过css画画线就搞定了。具体的实现方法直接看代码就ok了。有问题可以讨论。 PHP-to-OrgChart
<?php
    function PHPtoOrgChart(array $arr,$title='') {
        echo '<table>';
        $size=count($arr);
        if($title!='') {
            //head

            echo '<tr>';
            echo '<td colspan="'.($size*2).'">';
            echo '<div class="charttext">'.$title.'</div>';
            echo '</td>';
            echo '</tr>';
            //head line


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

            //line
            if($size>=2){

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

            echo '<tr>';
            echo '<th class="right" width="'.$tdWidth.'%"></th>';
                echo '<th class="top" width="'.$tdWidth.'%"></th>';
                for($j=1; $j<$size-1; $j++) {
                    echo '<th class="right top" width="'.$tdWidth.'%"></th>';
                    echo '<th class=" top" width="'.$tdWidth.'%"></th>';
                }
                echo '<th class="right top" width="'.$tdWidth.'%"></th>';
            echo '<th width="'.$tdWidth.'%"></th>';
            echo '</tr>';
            }
        }
        //
        echo '<tr>';
        foreach($arr as $key=>$value) {
            echo '<td colspan="2">';
            if(is_array($value)) {
                PHPtoOrgChart($value,$key);
            } else {
                echo '<div class="charttext">'.$value.'</div>';
            }
            echo '</td>';
        }
        echo '</tr>';
        //
        echo '</table>';
    }
Nach dem Login kopieren
PHP (Html) + Css 实现组织结构图
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage