`
miss_安
  • 浏览: 20819 次
文章分类
社区版块
存档分类
最新评论

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

阅读更多
网上有很多开源的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/
分享到:
评论

相关推荐

    php+js+html+css实现订餐系统

    综上所述,这个订餐系统利用PHP处理服务器端逻辑,JavaScript实现客户端交互,HTML和CSS构建用户界面,共同构建了一个功能完善的在线订餐平台。通过合理的数据库设计,系统能有效地存储和管理大量数据,为用户提供...

    Html+css 旅游网站

    【描述】:“静态 Html css 旅游网站”指的是不依赖服务器端脚本(如PHP、JavaScript等)的网页设计,它主要依靠HTML结构化内容,CSS进行样式控制,以展示固定的信息。由于是静态的,页面加载速度快,维护成本相对较...

    HTML+CSS+JS开发手册打包

    HTML(HyperText Markup Language)是网页制作的基础,用于定义页面的结构和内容。它通过一系列的标记(tags)来组织页面元素,如标题、段落、图像等。HTML5是其最新的版本,引入了许多新特性,如语义化标签(如、、...

    HTML+JQuery+Css+HTML5+PHP5.6 CHM格式帮组文档

    HTML是超文本标记语言,是构建网页的基础,用于定义页面结构和内容。它使用一系列预定义的标签来组织页面,如`&lt;html&gt;`、`&lt;head&gt;`、`&lt;body&gt;`等,以及`&lt;p&gt;`(段落)、`&lt;a&gt;`(链接)和`&lt;img&gt;`(图像)等元素。HTML5是其...

    php5+html+css+js api完全参考手册

    《PHP5+HTML+CSS+JS API完全参考手册》是一份综合性的技术文档,适合初入PHP工程设计领域的学习者。这份手册包含了四个主要部分,分别对应PHP5、HTML、CSS和JavaScript这四种核心技术,旨在提供全面且实用的编程指南...

    Html5+Css3-手机App实例

    1. 新增的语义化元素:例如、、、等,帮助开发者更好地组织页面结构,提高内容可读性。 2. 媒体元素:如和,允许直接在网页内嵌入音频和视频内容,无需依赖Flash等第三方插件。 3. Canvas画布:提供了一个二维图形...

    html+css+js漂亮的个人主页

    2. **主体内容**:主体内容区可以展示个人简介、作品集、博客文章等,使用或标签进行组织,CSS可以用来定制每个部分的样式,如间距、边框和背景。 3. **音乐跨界面播放**:通过JavaScript库,如Audio.js或Howler.js...

    用HTML+CSS制作微博的静态页面.zip

    在微博页面的实现中,CSS将起到至关重要的作用,它能实现以下功能: 1. **响应式设计**:由于提到了“电脑分辨率不同可能导致显示效果偏差”,因此开发者可能使用了媒体查询(@media query)来确保页面在不同屏幕...

    模仿问卷星多人版html+css

    最后,考虑到“模仿问卷星”的特性,还可能需要实现一些特定的功能,如保存和恢复填写进度、验证用户输入、数据提交后的服务器交互等,这就需要结合JavaScript和后端语言(如PHP、Node.js等)来实现。 总结来说,...

    宠物领养平台:一个用html+css+js+php实现的兼具前后端的小型数据库系统 .zip

    宠物领养平台是一个结合了HTML、CSS、JavaScript和PHP技术实现的小型数据库系统,专为宠物领养服务设计。这个项目不仅涵盖了前端用户界面的设计,还包含了后端数据处理和存储的功能,使得用户能方便地浏览、搜索和...

    管理系统界面模板(静态HTML+CSS)

    通过CSS,开发者可以实现界面的统一风格,提高视觉吸引力,同时优化不同屏幕尺寸下的显示效果。 本压缩包"templates10"可能包含以下文件: 1. HTML文件:这些文件以.html扩展名,它们包含了界面的结构,如头部、...

    js+jquery+html+div+css基础学习

    JavaScript、jQuery、HTML、CSS和...5. 如何使用div组织网页结构,以及如何通过CSS为div设置样式和布局。 通过学习这些基础知识,你可以创建功能齐全、美观的静态网页,并为进一步学习Web开发高级技术打下坚实基础。

    纯html+css静态网站

    总结来说,“纯HTML+CSS静态网站”是一种高效且灵活的网页开发方式,它结合了HTML的结构和CSS的样式,实现了内容与表现的分离,使网站设计更为直观和易于管理。对于初学者而言,这是一个极好的学习平台,可以通过...

    韩顺平 html+css+js笔记(全)

    W3C(World Wide Web Consortium)是制定网络标准的非营利组织,负责HTML、XHTML、CSS、XML等技术规范的制定。HTML和XHTML的区别在于,XHTML是HTML与XML的结合,旨在提高代码的严谨性和可扩展性,使内容和表现更加...

    div+css+js+php+mysql项目源代码

    开发人员通过HTML构建静态结构,CSS美化界面,JavaScript增强用户体验,PHP处理服务器端逻辑,而MySQL则作为后台数据存储。这样的组合使得项目具备了良好的用户体验、强大的功能性和可扩展性。对于学习者来说,分析...

    学校图书管理信息系统(html+css+js,php,sql数据)

    该系统的主要特点是前端使用HTML、CSS和JavaScript技术,后端采用PHP作为服务器端脚本语言,同时与SQL数据库进行数据交互,实现了数据的存储和查询。下面将详细探讨这些技术在系统中的应用及其重要性。 1. HTML(超...

    html+css网站模板、网页设计源码.zip

    HTML和CSS是构建网页设计的基础技术,它们共同塑造了网页的结构和外观。在这个压缩包中,你将找到多套预设计的HTML+CSS网站模板,这些模板是网页设计的起点,可以帮助快速创建一个功能完整且视觉吸引人的网站。 ...

    韩顺平html+css笔记

    面向对象编程在JavaScript中通过构造函数和原型链实现。JavaScript 事件处理允许用户与网页进行互动,DOM(Document Object Model)编程则用于操作HTML文档的结构,如添加、删除、修改元素。正则表达式在JavaScript...

    一套很好的后台模板 html+css

    HTML(HyperText Markup Language)是网页内容的基础结构语言,而CSS(Cascading Style Sheets)则负责定义这些内容的样式和布局。这种模板通常由一组预设计的页面和组件组成,旨在帮助开发者快速搭建功能齐全、视觉...

    div+css静态html网页模板.rar_css网页_html CSS_html简单模板_troopsokc_静态网页 模板

    在这个模板中,CSS可能会使用到盒模型(box model)来调整元素的边距和内填充,使用选择器(如class和id)来针对性地应用样式,以及使用浮动(float)或定位(positioning)来实现布局。 在CSS中,`div`元素常被...

Global site tag (gtag.js) - Google Analytics