`
zengshaotao
  • 浏览: 792553 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jOrgChart横向的组织机构树--手工构造json数据

 
阅读更多

<!DOCTYPE html>

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>jOrgChart - A jQuery OrgChart Plugin</title>

    <link rel="stylesheet" href="css/bootstrap.min.css"/>

    <link rel="stylesheet" href="css/jquery.jOrgChart.css"/>

    <link rel="stylesheet" href="css/custom.css"/>

 

    

    <!-- jQuery includes -->

    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>

    <script src="jquery.jOrgChart.js"></script>

 

    <script>

    jQuery(document).ready(function () {

            loadtree();

        });

        //menu_list为json数据

        //parent为要组合成html的容器

 

        function showall(menu_list, parent) {

            for (var menu in menu_list) {

                //如果有子节点,则遍历该子节点

                if (menu_list[menu].children.length > 0) {

                    //创建一个子节点li

                    var li = $("<li></li>");

                    //将li的文本设置好,并马上添加一个空白的ul子节点,并且将这个li添加到父亲节点中

                    $(li).append(" <a  href='javascript:void(0)'  onclick='xx(" + menu_list[menu].id + ");'>" + menu_list[menu].name + "</a>").append("<ul></ul>").appendTo(parent);

                    //将空白的ul作为下一个递归遍历的父亲节点传入

                    showall(menu_list[menu].children, $(li).children().eq(1));

                }else {

                //如果该节点没有子节点,则直接将该节点li以及文本创建好直接添加到父亲节点中

                    $("<li></li>").append(" <a href='javascript:void(0)' onclick='defineFunc(" + menu_list[menu].id + ");'>" + menu_list[menu].name + "</a>").appendTo(parent);

                }

            }

        }

 

        

        function loadtree() {

var res = [{

   "id": 1,

   "name": "根节点",

   "children": [

       {

           "id": 2,

           "name": "第二层1",

           "data": "",

           "children": ""

       },

       {

           "id": 3,

           "name": "第二层2",

           "data": "",

           "children": ""

       }

   ]

}];

 

//var json = eval("("+res+")");

                    var showlist = $("<ul id='org' style='display:none'></ul>");

                    showall(res, showlist);

                    

                    //将生成好的固定格式的ul

                    $("#f").append(showlist);

                    $("#org").jOrgChart();

                    

                    /*  $("#org").jOrgChart({

           chartElement : "#chart",

           dragAndDrop  : false

       }); */

       

        }

        

        function defineFunc(id){

        alert(id+",ddd");

        }

    </script>

  </head>

 

  <body id="f">

    <div class="topbar">

        <div class="topbar-inner">

            <div class="container">

                <a class="brand" href="#">jQuery Organisation Chart</a>

            </div>

        </div>

    </div>

    

    

    <div id="chart" class="orgChart"></div>

    

    

 

</body>

</html>

分享到:
评论

相关推荐

    横向树和组织结构图

    横向树和组织结构图是两种在信息技术领域中用于表示数据关系和层次结构的图形化工具。在JavaScript开发中,它们常被用来展示复杂的数据模型,如企业组织结构、项目管理或者系统架构等。 首先,我们来理解“横向树”...

    JS横向树(组织结构)

    JavaScript 横向树,又称为水平树或组织结构图,是一种常见的数据可视化方式,尤其在展示企业或团队的层级关系时非常有用。这种布局方式将树状结构自上而下展开,使得节点间的层次关系一目了然,且占用空间更少,...

    树形表格 treetable 完整版 带演示demo例子

    在IT领域,树形表格(TreeTable)是一种特殊的数据展示方式,它结合了表格和树状结构的优点,常用于组织层次分明、具有父子关系的数据。本文将深入探讨“树形表格treetable完整版”,包括它的特点、应用场景、二次...

    中不变质量和高横向动量下Drell-Yan过程的描述困难

    我们考虑的数据是轻子对的质量常数Q在4.5和13.5 GeV之间,且横向动量qT的值类似(尽管稍小)。 我们通过基于标准共线性分解得出预测来解决该问题,预计该预测对频谱的高qT端有效,并且最终需要使用横向动量依赖的...

    前端横向组织架构图 js

    - 数据结构:首先,我们需要定义一个数据结构来表示组织架构,通常可以使用JSON对象,其中包含节点ID、父节点ID、节点名称等信息。 - DOM渲染:使用JS或jQuery,遍历数据结构并创建对应的DOM元素,如div或span,以...

    js横向扩展树

    JavaScript中的横向扩展树是一种在网页中展示数据结构的交互式方式,特别适用于处理层次关系复杂的组织结构或文件系统。这种树形布局使得用户可以水平滚动查看节点,而不是传统的垂直展开和折叠。在这个“js横向扩展...

    PickerView横向滑动

    标题"PickerView横向滑动"和描述"PickerView实现横向滑动选择数值的效果"正是指向这一特定的定制功能。 要实现PickerView的横向滑动,首先我们需要理解PickerView的基本原理。PickerView是一个基于WheelView的控件...

    横向纵向菜单--JQuery实例

    8. **代码组织**: - 将相关的jQuery代码封装到函数中,便于复用和维护。 - 使用注释清晰地解释代码逻辑,提高代码可读性。 总结,这个"横向纵向菜单"的jQuery实例展示了如何结合HTML、CSS和jQuery创建动态交互的...

    基于JQuery横向跑马灯jQuery-easyAccordion

    【jQuery-easyAccordion】是一个基于JQuery库的插件,用于实现横向跑马灯效果,为网站添加动态、交互式的导航或展示功能。这个插件的设计理念是简化开发者的工作,提供一个易于使用的工具来创建优雅的横向滚动效果,...

    vue-timeLine.vue

    利用vue-element的步骤组件el-steps实现横向时间轴,实现点击时间轴的时间节点动态的加载订单数据列表进行展示

    行业资料-交通装置-一种提高梁桥横向抗震性能的桥墩-盖梁构造.zip

    行业资料-交通装置-一种提高梁桥横向抗震性能的桥墩-盖梁构造.zip

    tree第三层节点横向排列.vue

    这个是...

    echart树图:横向组织结构 曲线.zip

    树图是一种用于展现层次结构数据的图表,常用于组织结构、文件系统或家族树等场景。在ECharts中,我们可以使用`series-tree`配置项来创建树图。这个配置项允许我们定义数据、布局方式、节点样式、以及连接线的样式等...

    yolo算法-检测道路损坏数据集-3321张图像带标签-横向开裂-坑洼-纵向开裂.zip

    yolo系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)...

    完整的jquery-ui-json

    在"完整的jquery-ui-json"这个资源中,我们看到它不仅包含了完整的jQuery UI库,还涉及到 **JSON(JavaScript Object Notation)** 数据格式的使用,这是现代Web应用中常见的一种轻量级数据交换格式。 首先,让我们...

    IOS应用源码Demo-横向滚动的label-毕设学习.zip

    【标题解析】:“IOS应用源码Demo-横向滚动的label-毕设学习.zip”这个标题表明,这是一个关于iOS应用程序的源代码示例,特别强调了其中包含一个横向滚动的UILabel的功能实现。在iOS开发中,UILabel是用于显示单行或...

    行业资料-交通装置-一种提高梁桥横向抗震性能的桥墩-盖梁构造及施工方法.zip

    行业资料-交通装置-一种提高梁桥横向抗震性能的桥墩-盖梁构造及施工方法.zip

    ios-横向滑动选择器-使用简单-丰富自定义.zip

    可以横向滚动的选择器,也可以用来当页面指示器。 使用简单,自定义方便。 详细使用说明见Github:https://github.com/976431yang/YQNumberSlideView

Global site tag (gtag.js) - Google Analytics