OrgChart组织架构图控件

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

 25012  142  查看评论 (21)
 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响应的HTML主题

jQuery响应的HTML主题完全适合所有类机构网站,企业和商业公司
  布局
 10808  67

简洁清爽Bootstrap后台模板

Bootstrap框架开发的HTML后台模板管理
  布局
 135566  517

bootstrap3

bootstrap3 后台框架
  布局
 27190  131

jQuery无限加载瀑布流插件masonry

jQuery无限加载瀑布流插件masonry兼容ie6.
  布局
 16049  177

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

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

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

        dabeng0
        2017/12/14 15:56:48

        我想你需要添加一些自己的CSS代码,让node再宽一些。

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

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

        Top0
        2017/11/29 14:59:32

        'direction': 'r2l'  官方网址https://www.npmjs.com/package/orgchart#options 有参数说明

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

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

        dabeng0
        2017/12/14 15:59:55

        目前来看,代价最小的方案是使用vuejs语法将jquery orgchart封装为有效的component,换句话说,做一个wrapper,嵌到vuejs语境下使用。

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

    这个东西怎么改成横向的

        Top0
        2017/11/29 15:00:36

        'direction': 'r2l'

        2代表to   r2l/l2r/t2b/b2t

    回复
    亮瞎你们的狗眼 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数据保存 一下 呢??

        Daxong0
        2017/12/4 18:23:18

        请问你解决了吗?可以教教我如何操作吗

        dabeng0
        2017/12/14 16:13:36

        那具体看你要将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 回复
取消回复