菜鸟跪求大神把现有的纵向展开树修改成横向展开树

sp3344 2014-06-11 12:11:05
代码：
<html>
<head>
<title>部门组织架构图</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
font: 12px/ 1.8 "宋体";
position: relative;
}

html,body {
height: 100%;
overflow-y: hidden;
margin: 0;
padding: 0;
overflow: auto;
}

.strt-wrap {
width: 20000px;
margin: 2px auto;
}

.strt-part {
text-align: center;
float: left;
position: relative;
}

.strt-part .line-v {
position: relative;
height: 40px;
width: 100%;
}

.strt-part .line-v span {
display: block;
background: #ccc;
position: absolute;
top: 0;
font-size: 0;
line-height: 1px;
width: 1px;
height: 40px;
left: 50%;
}

.strt-name {
display: inline-block;
padding: 0 5px;
height: 24px;
line-height: 24px;
border: 1px solid #ccc;
margin: 0 10px;
border-radius: 3px;
background: #f8f8f8;
}

.strt-part .line-h {
height: 1px;
display: block;
background: #ccc;
position: absolute;
top: 0;
font-size: 0;
}

.strt-part .line-h-l {
width: 50%;
left: 0;
}

.strt-part .line-h-c {
width: 100%;
left: 0;
}

.strt-part .line-h-r {
width: 50%;
right: 0;
}

.strt-block {
float: inherit;
}
</style>
</head>
<body style="overflow:hidden;">
<div class="strt-wrap" id="strtWrap">
<div class="strt-block">
<div class="strt-part">
<span class="strt-name" style="background: #6D6D6D;color: white;">天云平台</span>
<div class="line-v"><span></span></div>
<div class="strt-block">
<div class="strt-part">
<span class="line-h line-h-r"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #DBA659;color: white;">档案类</span>
<div class="line-v"><span></span></div>
<div class="strt-block">

<div class="strt-part">
<span class="line-h line-h-r"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #DBA659;color: white;">档案</span>
</div>
<div class="strt-part">
<span class="line-h line-h-c"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #DBA659;color: white;">档案</span>
</div>
<div class="strt-part">
<span class="line-h line-h-c"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #DBA659;color: white;">档案</span>
</div>
<div class="strt-part">
<span class="line-h line-h-l"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #DBA659;color: white;">档案</span>
</div>
</div>
</div>
<div class="strt-part">
<span class="line-h line-h-c"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #679BCC;color: white;">搜索类</span>
<div class="line-v"><span></span></div>
<div class="strt-block">
<div class="strt-part">
<span class="line-h line-h-r"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #679BCC;color: white;">搜索</span>


</div>
<div class="strt-part">
<span class="line-h line-h-c"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #679BCC;color: white;">搜索</span>
</div>
<div class="strt-part">
<span class="line-h line-h-c"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #679BCC;color: white;">搜索</span>

</div>
<div class="strt-part">
<span class="line-h line-h-l"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #679BCC;color: white;">搜索</span>
</div>
</div>
</div>
<div class="strt-part">
<span class="line-h line-h-l"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #679BCC;color: white;">分析类</span>
<div class="line-v"><span></span></div>
<div class="strt-block">
<div class="strt-part">
<span class="line-h line-h-r"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #679BCC;color: white;">分析</span>
</div>
<div class="strt-part">
<span class="line-h line-h-c"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #679BCC;color: white;">分析</span>

</div>
<div class="strt-part">
<span class="line-h line-h-c"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #679BCC;color: white;">分析</span>

</div>
<div class="strt-part">
<span class="line-h line-h-l"></span>
<div class="line-v"><span></span></div>
<span class="strt-name" style="background: #679BCC;color: white;">分析</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>

</html>

上面是从网上找的纵向树，但是不符合项目要求，所以想改成横向向右展开的树，求大神帮忙修改一下，不甚感激，谢谢~~~急~~
组织架构图类似：
...全文
313 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
sp3344 2014-06-13
  • 打赏
  • 举报
 回复
引用 6 楼 whatisma 的回复:
[quote=引用 5 楼 sp3344 的回复:] 我想要的样式
你现在要的只有第一个节点文字是纵向排列的？ 这个图和你发帖时候的图弄起来结构可是不同的。[/quote] 是的，只有第一个节点文字是纵向排列的
whatisma 2014-06-13
  • 打赏
  • 举报
 回复
引用 5 楼 sp3344 的回复:
我想要的样式
你现在要的只有第一个节点文字是纵向排列的？ 这个图和你发帖时候的图弄起来结构可是不同的。
whatisma 2014-06-13
  • 打赏
  • 举报
 回复
引用 7 楼 sp3344 的回复:
[quote=引用 6 楼 whatisma 的回复:] [quote=引用 5 楼 sp3344 的回复:] 我想要的样式
你现在要的只有第一个节点文字是纵向排列的？ 这个图和你发帖时候的图弄起来结构可是不同的。[/quote] 是的，只有第一个节点文字是纵向排列的[/quote] 你要不就先用我原来的竖排吧，你这个效果的暂时没写出来。
sp3344 2014-06-12
  • 打赏
  • 举报
 回复
3楼的哥哥 我看了你的代码，如果我这颗是动态生成的，你的这个节点好像不能自动居中，怎么破？
sp3344 2014-06-12
  • 打赏
  • 举报
 回复
我想要的样式
人生难得一只鸡 2014-06-11
  • 打赏
  • 举报
 回复
无聊做了一下，具体查看博客html模拟组织架构横向展开
不是说好的吗 2014-06-11
  • 打赏
  • 举报
 回复
我也需要，谢谢，做网站
whatisma 2014-06-11
  • 打赏
  • 举报
 回复
引用 楼主 sp3344 的回复:
弄了个你可以看看，通过json数据生成。 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>
    <style type="text/css">
        .htree{
            margin:0;
            padding:0;
            font-size:14px;
        }
        .leaf
        {
            border: solid 1px red;
            height:23px;
            line-height:23px;
            margin: 3px 0;
            padding:0 3px;
            position:relative;
            display:inline-block;
            *display:inline;
            zoom:1;
        }
        .parent
        {
            margin: 4px 0 4px 1px;
            position:relative;
        }
        .node{
            width:14px;
            word-break:break-all;
            border:solid 1px blue;
            padding:15px 10px;
        }
        .hline{
            height:1px;
            width:23px;
            background:#ccc;
            font-size:0;
            overflow:hidden;
            position:absolute;
            top:50%;
        }
        .hline_r{
            left:36px;
        }
        .hline_l{
            left:-23px;
        }
        .vline{
            width:1px;
            background:#ccc;
            position:absolute;
            font-size:0;
            overflow:hidden;
            left:-23px;
        }
        .vline_t{
            height:50%;
            top:50%;
        }
        .vline_diff{
            height:8px;
            bottom:-8px;
        }
        .vline_m{
            height:100%;
            top:0;
        }
        .vline_b{
            height:50%;
            top:0;
        }
    </style>
    
    <script type="text/javascript">
        function createTree(obj, lev, pidx, plen, htmlArr) {
            var childs = obj.childs ? obj.childs : [];
            htmlArr.push("<div class=\"parent\">");
            if (lev == 1) {
                htmlArr.push("<div class=\"hline hline_r\"></div>");
            } else {
                htmlArr.push("<div class=\"hline hline_l\"></div>");
                if (childs.length > 0)
                    htmlArr.push("<div class=\"hline hline_r\"></div>");
                if (pidx == 0 && plen != 1)
                    htmlArr.push("<div class=\"vline vline_t\"></div>");
                if (pidx != 0 && pidx != plen - 1)
                    htmlArr.push("<div class=\"vline vline_m\"></div>");
                if (pidx != plen - 1)
                    htmlArr.push("<div class=\"vline vline_diff\"></div>");
                if (pidx == plen - 1 && pidx != 0)
                    htmlArr.push("<div class=\"vline vline_b\"></div>");
            }
            htmlArr.push("<table cellpadding=\"0\" cellspacing=\"0\">");
            htmlArr.push("  <tr>");
            htmlArr.push("      <td style=\"width:80px;\">");
            htmlArr.push("          <div class=\"node\">" + obj.name + "</div>");
            htmlArr.push("      </td>");
            if (childs.length > 0) {
                htmlArr.push("      <td>");
                var len = childs.length;
                for (var i = 0; i < len; i++) {
                    var tempObj = childs[i];
                    if (tempObj.leaf !== true) {
                        createTree(tempObj, lev + 1, i, len, htmlArr)
                    } else {
                        htmlArr.push("          <div>");
                        htmlArr.push("              <div class=\"leaf\">");
                        htmlArr.push("                  <div class=\"hline hline_l\" " + (i == 0 && len == 1 ? "style=\"*margin-top:-1px;\"" : "") + "></div>"); /*ie7 hack*/
                        if (i == 0 && len != 1)
                            htmlArr.push("                  <div class=\"vline vline_t\"></div>");
                        if (i != 0 && i != len - 1)
                            htmlArr.push("                  <div class=\"vline vline_m\"></div>");
                        if (i != len - 1)
                            htmlArr.push("                  <div class=\"vline vline_diff\"></div>");
                        if (i == len - 1 && i != 0)
                            htmlArr.push("                  <div class=\"vline vline_b\"></div>");
                        htmlArr.push("                  " + tempObj.name);
                        htmlArr.push("              </div>");
                        htmlArr.push("          </div>");
                    }
                }
                htmlArr.push("      </td>");
            }
            htmlArr.push("  </tr>");
            htmlArr.push("</table>");
            htmlArr.push("</div>");  
        }


        function create() {
            var obj = {
                name: "组织架构1",
                childs: [
                    {
                        name: '员工1',
                        leaf: true
                    },
                    {
                        name: '员工2',
                        leaf: true
                    },
                    {
                        name: '组织架构2',
                        childs: [
                            {
                                name: '员工3',
                                leaf: true
                            },
                            {
                                name: '员工4',
                                leaf: true
                            },
                            {
                                name: '组织架构4',
                                childs: [
                                    {
                                        name: '员工5',
                                        leaf: true
                                    },
                                    {
                                        name: '员工6',
                                        leaf: true
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        name: '组织架构3',
                        childs: [
                            {
                                name: '组织架构5',
                                childs: [
                                    {
                                        name: '员工8',
                                        leaf: true
                                    }
                                ]
                            },
                            {
                                name: '员工7',
                                leaf: true
                            }
                        ]
                    },
                    {
                        name: '组织架构33'
                    }
                ]
            };
            
            var htmlArr = [];
            createTree(obj, 1, 0, 0, htmlArr);
            document.getElementById("div_test").innerHTML = htmlArr.join("");
        }
    </script>
</head>
<body>
不支持ie6<br />
<input type="button" value="生成" onclick="create();"/>
<div id="div_test" style="border:solid 1px red;"></div>
</body>
</html>
jQuery基础实战精讲（大神必经之路）
jQuery是一个JavaScript函数库。jQuery是一个轻量级的写的少，做的多的JavaScript库。jQuery库包含以下功能：HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities提示： 除此之外，Jquery还提供了大量的插件。
java学习进阶之路，如果从一个菜鸟进阶成大神
一、下面是一个java学习路线图，以供参考 二、下面是java工作之路，以供参考： 三、下面给出阶段性细化需要掌握的技能： 1.第一阶段 2.第二阶段 3.第三阶段 4.第四阶段 5.第五阶段 四、更加细化的细节如下： 1： 编程基础 不管是C还是C++，不管是Java还是PHP，想成为一名合格的程序员，基本的数据结构和算法基础还是要有的。下面几篇文章从思想到实现，为你梳理出常用的数据结构和经典算法。 1-1 常用数据结构 数组、链...
[前端]菜鸟到大神的上位之路
结合个人经历总结的前端入门方法，总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限，不能保证面面俱到，只是作为入门参考，面向初学者，让初学者少走弯路。 互联网的快速发展和激烈竞争，用户体验成为一个重要的关注点，导致专业前端工程师成为热门职业，各大公司对前端工程师的需求量都很大，要求也越来越高，优秀的前端工程师更是稀缺。个人感觉前端入门相对容易，但是也需要系统地认真学习，在打好
菜鸟到大神的上位历程，即学即用走向人生巅峰（大神学习经验）
结合个人经历总结的前端入门方法，总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限，不能保证面面俱到，只是作为入门参考，面向初学者，让初学者少走弯路。   　　互联网的快速发展和激烈竞争，用户体验成为一个重要的关注点，导致专业前端工程师成为热门职业，各大公司对前端工程师的需求量都很大，要求也越来越高，优秀的前端工程师更是稀缺。个人感觉前端入门相对容易，但是也需要系统地认
菜鸟到大神的上位历程，即学即用走向人生巅峰
转载地址：http://www.html5cn.org/article-9447-1.html 必备基础技能   　　前端技能汇总(https://github.com/JacksonTian/fks)这个项目详细记录了前端工程师牵涉到的各方面知识。在具备基本技能之后可以在里面找到学习的方向，完善技能和知识面。   　　frontend-dev-bookm
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章