OrgChart组织架构图控件

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

 21234  128  查看评论 (14)
 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);
    }
});


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

基于jQuery bootstrap的网站模板

基于jQuery bootstrap的网站模板,首页可设置网页皮肤颜色
  布局
 9781  147

jQuery瀑布流响应式

jQuery响应式瀑布流加弹窗
  布局
 11419  154

商城全站全特效实现.无任何插件(原创)

防某商城全站全特效实现 无任何插件
  布局
 12937  189

Bootstrap Chubbystacks模版

很精美的一套Bootstrap模版
  布局
 5940  86

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

    KLP? 0
    2017/11/3 15:13:49

    为什么我的组织名是英文的时候显示三个点...还有下划线的时候也是,英文无论大小写都是三个点,为什么呢???

    回复
    果盘子 0
    2017/10/16 16:03:48

    感谢楼主,请问怎么把这个改成横向的left to right?

    回复
    0
    2017/9/9 17:37:39

    这个可以用到vue搭建的项目里面吗

    回复
    孑?ふの过客 0
    2017/9/5 17:36:16

    这个东西怎么改成横向的

    回复
    亮瞎你们的狗眼 0
    2017/8/26 11:41:15
    这是json数据吗?使用json验证工具为什么会报错
        亮瞎你们的狗眼0
        2017/8/26 11:42:16

        有没有大神帮忙看下,qq:1091656813

    回复
              柠澈、 0
    2017/8/22 14:56:12

    感觉楼主分享这么牛逼的东西

    回复
    The Roc's long flight 0
    2017/8/21 15:50:50

    这个插件 怎么把修改后的json数据保存 一下 呢??

    回复
    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 回复
取消回复