组织结构图插件 OrgChart

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);
      }
    });

的码云指数为
超过 的项目
加载中

评论(7)

Misakkie
Misakkie
有个bug : function createNode(nodeData, level, opts) { if(nodeData.children){//这里必须要做判断 不然没有child的节点就报错 $.each(nodeData.children, function (index, child) { child.parentId = nodeData.id; }); }
素人派
素人派
不错
子木007
子木007
赞,看上去比 jOrgChart 好不少 #OrgChart#
ac57
ac57
你来人间一趟
你来人间一趟
正好需要,兼容性能到ie8吗 #OrgChart#
xY..
xY..
不错 #OrgChart#
B
Bonnie_121
能兼容那些版本的浏览器? #OrgChart#

暂无资讯

暂无问答

OrgChart(组织机构图) - Flex

前段时间,用Flex写了个OrgChart,截图如下 iLog有个很不错的,可是收钱,799美刀。你可以看这里 http://visudemos.ilog.com/webdemos/orgchart/orgchart.html 。 俺农村来的,比较穷,最终还...

2013/06/25 18:38
3.4K
0
jQuery学习资料分享

学习jQuery有一段时间了,收集了不少资料,这里把资料的链接分享给大家。另外推荐大家微博关注“开源中国”、“HTML5研究小组”、“百度技术沙龙”等,还有博客园的“梦想天空(山边小溪)”...

2012/04/06 10:15
1K
2
50款JavaScript图表库分享

慧都小编收集了50款最受欢迎的JavaScript图形图表库,其中不乏一些优秀的开源、免费产品。这个列表对于想要利用JavaScript技术创建图表展现数据的开发者来说,非常具有参考意义,你可以从中选...

2014/04/11 11:55
4.1K
0
【重大更新】DevExpress v16.2新版亮点(WPF篇)

用户界面套包DevExpress v16.2终于正式发布,本站将以连载的形式为大家介绍各版本新增内容。本文将为大家介绍DevExpress WPF v16.2新增的Chart 3D Control、全新的Toggle Switch Editor、缩略...

2016/12/26 10:56
42
0
【重大更新】DevExpress v16.2新版亮点(WinForms篇)

下载试用DevExpress 2016.2 Data Grid Control 用于Tile View的看板模式 Excel启发式过滤 v16.2引入了全新的MS Excel-inspired列过滤器弹出窗口来使过滤条件更加容易。 新的过滤器弹出窗口包...

2016/12/20 09:59
72
0

没有更多内容

加载失败,请刷新页面

没有更多内容

返回顶部
顶部