伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】

所属分类:UI-布局,网络类型
 24835  142  查看评论 (21)
伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】 ie兼容9
该伟德BETVICTOR为画组织架构图伟德BETVICTOR,通过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);     } });
相关伟德BETVICTOR-布局,网络类型

登录模版

好看的登录页面模版
  布局
 23758  123

浅黄色宽屏单页跳转css3动画

自适应浅黄色宽屏单页跳转css3动画
  布局
 10990  76

Clean Zone响应设计后台管理HTML5模板

Clean Zone是一个响应管理模板基于Bootstrap 3它有一个整洁的设计和美丽的特性可以使用了。
  布局
 28441  271

电商服装网站模板

电商服装网站响应式模板
  布局
 12232  206

讨论这个项目(21)回答他人问题或分享伟德BETVICTOR使用方法奖励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
    这个伟德BETVICTOR 怎么把修改后的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
    很强大的一个伟德BETVICTOR,可惜不能兼容ie8 回复
    ivanhuzeyu 0
    2017/2/23 10:22:43
    很强大,如果不用c3就好了,毕竟有很多公司还在兼容IE8 回复
取消回复