OrgChart组织架构图控件

所属分类:UI-布局,网络类型

 11710  98  查看评论 (6)
 OrgChart组织架构图控件 ie兼容9

该插件为画组织架构图插件,通过OrgChart API定义的数据接口以json的数据形式将自己想要的组织架构数据传给orgChart,上手难度低,可扩展性比较高。

从前为了构造漂亮些的组织结构图或树状结构图,我们不得不依靠较复杂的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);
    }
});


相关插件-布局,网络类型

Appboard基于bootstrap响应式后台管理模板

这是一个基于angular与bootstrap的后台管理模板响应式非常优秀
  布局
 1950  16

xGallerify轻量级响应式jQuery图片画廊插件

xGallerify是一款轻量级响应式jQuery图片画廊插件。该图片画廊插件会根据图片的尺寸智能生成网格布局,并且可以动态的添加图片。它具有响应式,易于实现等特点。
  布局
 6412  45

jQuery自适应无限滚动瀑布流

结合minigrid.js做的一个简单响应瀑布流
  布局
 8353  67

瀑布流无限加载图片插件jq-waterfall

jq-waterfall是一款仿Pinterest网站的响应式无限动态加载图片瀑布流特效jQuery插件。
  布局
 11637  92

讨论这个项目(6)回答他人问题或分享插件使用方法奖励jQ币

    lucky 0
    2017/5/10 10:36:24

    项目中正需要组织架构图

    回复
    回眸 0
    2017/3/21 9:37:44

    很强大的一个插件,可惜不能兼容ie8

    回复
    ivanhuzeyu 0
    2017/2/23 10:22:43
    很强大,如果不用c3就好了,毕竟有很多公司还在兼容IE8 回复
    不可妥协 0
    2017/2/8 15:09:33

    组件很强大,首先感谢楼主,只是遇到一个问题,在导出架构图的时候,组件的style和其它原有style冲突,使得导出的图形不符合需求,希望楼主指点

    回复
    黑色键盘 0
    2017/1/5 4:01:50

    感谢楼主将这么好的东西分享!

    回复
    苜蓿的心 0
    2016/12/14 15:12:08

    感谢楼主将这么好的东西分享!

    回复
取消回复