OrgChart 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
OrgChart 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议: MIT
开发语言: JavaScript
操作系统: 跨平台
收录时间: 2016-02-29
提 交 者: dabeng

从前为了构造漂亮些的组织结构图或树状结构图,我们不得不依靠较复杂的SVG或Canvas库,现在我们有了门槛更低更具亲和力的纯DOM解决方案 -- OrgChart。以下给出主要特性,看是否复合大家胃口:

  • 支持<ul>,json, ajax数据源;

  • 用户可以对展开/折叠结果图中的节点;

  • 用户可以设置结构图的朝向;

  • 用户可以通过拖拽节点到其他节点来改变图的结构;

  • 用户可以对图中的节点进行增删节点,并导出最终的结构关系;

  • 支持导出结构图为png图片;

  • 支持对结构图的缩放和平移。

示例代码:

    var datascource = {
      'id': '1',
      'name': 'Lao Lao',
      'title': 'general manager',
      'children': [
        { 'id': '2', 'name': 'Bo Miao', 'title': 'department manager' },
        { 'id': '3', 'name': 'Su Miao', 'title': 'department manager',
          'children': [
            { 'id': '4', 'name': 'Tie Hua', 'title': 'senior engineer' },
            { 'id': '5', 'name': 'Hei Hei', 'title': 'senior engineer',
              'children': [
                { 'id': '6', 'name': 'Pang Pang', 'title': 'engineer' },
                { 'id': '7', 'name': 'Xiang Xiang', 'title': 'UE engineer' }
              ]
            }
          ]
        },
        { 'id': '8', 'name': 'Yu Jie', 'title': 'department manager' },
        { 'id': '9', 'name': 'Yu Li', 'title': 'department manager' },
        { 'id': '10', 'name': 'Hong Miao', 'title': 'department manager' },
        { 'id': '11', 'name': 'Yu Wei', 'title': 'department manager' },
        { 'id': '12', 'name': 'Chun Miao', 'title': 'department manager' },
        { 'id': '13', 'name': 'Yu Tie', 'title': 'department manager' }
      ]
    };


    $('#chart-container').orgchart({
      'data' : datascource,
      'nodeContent': 'title',
      'nodeID': 'id',
      'createNode': function($node, data) {
        var secondMenuIcon = $('<i>', {
          'class': 'fa fa-info-circle second-menu-icon',
          click: function() {
            $(this).siblings('.second-menu').toggle();
          }
        });
        var secondMenu = '<div class="second-menu"><img class="avatar" src="../img/avatar/' + data.id + '.jpg"></div>';
        $node.append(secondMenuIcon).append(secondMenu);
      }
    });

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

OrgChart 的相关资讯

还没有任何资讯

OrgChart 的相关博客

最需要的时候遇见你OrgChart

❝ 聊聊OrgChart 使用,优雅的方式为你展现舒服的组织架构图,❞ 前言 闲来无事写一个多级用户关系层,于是就存在展示的问题。...

最需要的时候遇见你OrgChart

聊聊OrgChart 使用,优雅的方式为你展现舒服的组织架构图, 前言 闲来无事写一个多级用户关系层,于是就存在展示的问题。这时...

react中使用orgchart组织结构插件

一、使用前的准备 $ npm install jquery $ npm install expose-loader $ npm install orgchart $ npm install font-awesome 二...

OrgChart(组织机构图) - Flex

前段时间,用Flex写了个OrgChart,截图如下 iLog有个很不错的,可是收钱,799美刀。你可以看这里 http://visudemos.ilog.com/...

jQuery组织结构图插件 -- OrgChart

利用DOM + jQuery + CSS3组合来构造组织结构图或者树形结构图,只要有DOM编程的基础,就能轻松玩转,门槛要比基于同类的SVG或...

DevExpress ASP.NET Core Controls v20.1新版亮点:全新升级的Diagram、File Manager

DevExpress技术交流群2:775869749 欢迎一起进群讨论 DevExpress ASP.NET Web Forms Controls拥有针对Web表单(包括报表)的1...

2020 Web界面开发:DevExtreme全新的Diagram控件、文件管理器

DevExpress ASP.NET Web Forms Controls拥有针对Web表单(包括报表)的110+种UI控件,DevExpress ASP.NET MVC Extensions是服...

2020 WPF界面开发新风向:DevExpress WPF支持.NET Core设计时

DevExpress ASP.NET Web Forms Controls拥有针对Web表单(包括报表)的110+种UI控件,DevExpress ASP.NET MVC Extensions是服...

祝贺!两位 Apache Flink PMC 喜提 Apache Member

摘要:近期 Apache 软件基金会(以下简称 ASF )举行了一年一度的董事会选举会议,两位 Apache Flink PMC 当选为 2020 年 AS...

OrgChart 的相关问答

还没有任何问答,马上提问

评论 (7)

加载中
有个bug : function createNode(nodeData, level, opts) { if(nodeData.children){//这里必须要做判断 不然没有child的节点就报错 $.each(nodeData.children, function (index, child) { child.parentId = nodeData.id; }); }
2017/03/31 11:47
回复
举报
不错
2017/01/16 08:23
回复
举报
赞,看上去比 jOrgChart 好不少 #OrgChart#
2016/03/02 08:52
回复
举报
2016/03/02 11:18
回复
举报
正好需要,兼容性能到ie8吗 #OrgChart#
2016/03/02 18:57
回复
举报
不错 #OrgChart#
2016/03/03 00:59
回复
举报
能兼容那些版本的浏览器? #OrgChart#
2016/11/29 16:27
回复
举报
更多评论
7 评论
282 收藏
分享
返回顶部
顶部