OrgChart组织架构图控件

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

 34925  166  查看评论 (26)
 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);
    }
});


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

商务科技宽屏响应式bootstrap整站模板

商务科技宽屏响应式bootstrap整站模板
  布局
 21849  237

MAC风格响应式后台管理模版

基于Bootstrap的HTML后台管理模板
  布局
 18441  140

bootstrap登录表单模板

注册页面,带空值验证
  布局
 52868  172

基于Bootstrap的完美后台管理框架,开箱即用

基于Bootstrap的完美后台管理框架,已经做过页面优化,插件丰富,Ets等,可直接对接后台使用
  布局
 28073  447

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

    一花一世界 0
    2018/6/6 10:09:29
    我内容节点需要分行展示不同的信息该如何处理呢
        西瓜0
        2018/6/6 10:24:14

        在分行节点内容中加的换行标签,如

        'title': 'departmentmanager',

         改

        'title': 'departmentmanager<br>第二行',

        同时还要修改jquery.orgchart.css样式取消定死的高度。

        .orgchart .node .content {
            width: 100%;
            /* height: 20px; */把高度删除
            font-size: 11px;
            line-height: 18px;
            border: 1px solid rgba(217, 83, 79, 0.8);
            border-radius: 0 0 4px 4px;
            text-align: center;
            background-color: #fff;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    回复
    WRITELINE 0
    2018/3/19 15:03:16
    我要多显示几个数据该改哪里 回复
    KrisyOne 0
    2018/1/25 9:06:55

    orgchart  depth 失效了是什么原因

        dabeng1
        2018/3/6 18:01:10
        您好,depth由visiblelevel替换掉了
    回复
    KLP? 0
    2017/11/3 15:13:49

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

        dabeng1
        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搭建的项目里面吗

        dabeng1
        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数据以何种形式保存了。

    回复
取消回复