精华内容
下载资源
问答
  • Of course, you can directly use the standalone build by including dist/js/jquery.orgchart.js and dist/css/jquery.orgchart.css in your webapps. Install with Bower # From version 1.0.2 on, users can ...
  • OrgChart

    2018-12-03 21:08:57
    https://blog.csdn.net/luyu13141314/article/details/72860656 https://codepen.io/dabeng/pen/XVJemd https://www.cnblogs.com/liboxncg/p/6249752.html  
    展开全文
  • jquery-orgchart The original JQuery Organisation Chart Plugin. IMPORTANT! This project has been superceded by the react-org-chart project. This is a small JQuery plugin that generates a hierarchical ...
  • datasource usded to build out structure of orgchart. It could be a json object. pan boolean no false Users could pan the orgchart by mouse drag&drop if they enable this attribute. zoom ...
  • Center orgchart

    2020-11-30 13:11:31
    <div><p>I have an issue on a very large chart. How will I put the chart to center or fit to screen so it will be easy to zoomout/in? Thank you</p><p>该提问来源于开源项目ÿ...dabeng/OrgChart</p></div>
  • orgchart 组织架构图 demo 实例 orgchart 组织架构图 demo 实例 orgchart 组织架构图 demo 实例 orgchart 组织架构图 demo 实例 orgchart 组织架构图 demo 实例
  • orgchart组织机构图

    千次阅读 2017-12-10 20:01:47
    orgchart

    官网地址:https://github.com/dabeng/OrgChart

    <html>
    <head>
        <link href="jquery.orgchart.min.css" rel="stylesheet" />
        <link href="style.css" rel="stylesheet" />
        <link href="font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" />
        <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="jquery.orgchart.min.js"></script>
    </head>
    <body>
        <div id = "chart-container">
        </div>
    </body>
    <script style="text/javascript">
    var dataSource2 = {
      'id': 'rootNode', //每个数据节点的标识
      'collapsed': false, 
      'className': 'top-level', //样式
      'nodeTitlePro': 'Lao Lao',//节点标题
      'nodeContentPro': 'general manager',//节点数据
      'relationship': '110', 
      'children': [ 
        { 'id':'1','nodeTitlePro': 'Bo Miao', 'nodeContentPro': 'department manager', 'relationship': '111' },
        { 'id':'2','nodeTitlePro': 'Su Miao', 'nodeContentPro': 'department manager', 'relationship': '110',
          'children': [
            { 'nodeTitlePro': 'Tie Hua', 'nodeContentPro': 'senior engineer', 'relationship': '110' },
            { 'nodeTitlePro': 'Hei Hei', 'nodeContentPro': 'senior engineer', 'relationship': '110' }
          ]
        },
        { 'nodeTitlePro': 'Yu Jie', 'nodeContentPro': 'department manager', 'relationship': '110' }
      ],
      'otherPro': '110'
    };
    
    var t = $('#chart-container').orgchart({
        'data': dataSource2,
        //拖动整个架构图
        //'pan':true,
        //鼠标滚动控制大小
        'zoom':true,
        //最大放大缩小到多少
        'zoominLimit':30,
        'zoomoutLimit':0.9,
        /*控制方向The available values are t2b(implies "top to bottom", it's default value), b2t(implies "bottom to top"), l2r(implies "left to right"), r2l(implies "right to left").
        */
        //'direction':'t2b',
        //以垂直方向布局,并指定深度
        //'verticalDepth':1,
        //设置数据内容的字段,与数据源对应
        'nodeContent': 'nodeContentPro',
        'nodeTitle': 'nodeTitlePro',
        'nodeID': 'id',
        'toggleSiblingsResp':false
    </script>
    </html>

    以下是滑过节点时提示信息,不是必须的

    
    'createNode': function($node, data){
            $node.mouseenter(function(){
                var $promptbox  = $(this).children("#mes")
                var boxheigth = $promptbox.outerHeight();
                var boxwidth = $promptbox.width();
                $promptbox.css("top","-"+boxheigth);
                $promptbox.css("right","-"+boxwidth);
                $promptbox.fadeIn();
            });
            $node.mouseleave(function(){
                $(this).children("#mes").fadeOut();
            });
            var toggleMes = '<div id="mes" class="toggle">'+data.relationship+'</div>';
            $node.append(toggleMes);
        } 

    示例

    这里写图片描述

    展开全文
  • jquery.orgchart.js

    2020-03-20 13:21:33
    OrgChart工具js,也可在码云下载(https://www.oschina.net/p/orgchart)
  • orgchart.zip

    2019-07-06 10:57:27
    一直想找份横向组织结构图的 结果网上没有 然后自己用orgchart和自己修改了一些 可以支持修改背景样式 无限极横向树 树水平居中和垂直居中 需要的小伙伴可以下载
  • OrgChart for React

    2020-12-08 18:19:28
    <div><p>Hi, has anyone attempted to use orgChart with React. If so could you please share some guidance? Thanks</p><p>该提问来源于开源项目:dabeng/OrgChart</p></div>
  • OrgChart可运行包

    2020-12-10 08:02:24
    OrgChart官网下载的包发现里面缺不少文件,于是从网上下载了部分缺失文件,终于可以放IIS里面就能跑了
  • make orgchart dynamic

    2020-12-09 12:49:23
    <p>Updates org chart page to take a department id parameter, instead of hardcoding the results for police (or simply all active members of a certain division regardless of their department): ...
  • 用其他语言阅读:, 前言 首先,非常感的出色工作 :... 允许用户动态编辑orgchart并将最终层次结构另存为JSON对象。 支持将图表导出为图片或pdf文件。 支持平移和缩放。 允许用户自定义每个节点的内部结构。 用
  • 球员委员会组织结构图 自动生成orgchart.jpg文件。 自动将pdf和jpg文件上传到res.starwarsccg.org 。 不要更新orgchart.jpg 。 仅覆盖orgchart.pdf 。 当前组织结构图
  • orgchart-demo简单demo

    2019-11-14 16:37:30
    基于orgchart.js完成的 参考企查查官网公司组织结构图做的demo,纯手写,有bug请见谅,有更好的写法请留言,多谢指教。
  • jQuery组织结构图表插件OrgChart组织结构布局代码是一款可以使用本地数据,或通过ajax调用来完成数据的填充。
  • 61171544 org chart links

    2020-12-26 16:24:40
    s org chart to be added. This also changes the behaviour of the organisations#show page so that the corporate information partial is shown for all live orgs, as it doesn't just list links to ...
  • OrgChart组织图

    2013-12-10 14:25:38
    OrgChart 实现的组织图,非常棒!里面有5个例子,代码很容就看的懂
  • 前端项目-orgchart.zip

    2019-09-02 17:10:47
    前端项目-orgchart,简单直接的组织结构图(树形层次结构)插件,基于纯dom和jquery。
  • orgchart案例(js和css比较齐全)
  • 前端项目-OrgChart.js.zip

    2019-09-02 20:46:43
    前端项目-OrgChart.js,organization chart plugin based on ES6
  • 关于OrgChart中toggleSiblingsResp属性不起作用的一些解决方法 最近工作中有个需求是生成组织结构图,看了许多案例之后决定选择OrgChart来实现这个需求,但是在实践中发现每一个节点如果附近存在直接节点,则会出现...

    最近工作中有个需求是生成组织结构图,看了许多案例之后决定选择OrgChart来实现这个需求,但是在实践中发现每一个节点如果附近存在直接节点,则会出现箭头,点击箭头能够显示或隐藏一系列节点,其效果实在不尽人意,无奈toggleSiblingsResp属性也不起作用,只好从源码着手修改。
    一般来说,只有向下扩展的箭头是有用的,其余三个我都不需要。
    我的修改全过程是这样的。一、我打开浏览器的开发者模式,发现一个箭头对应一个i标签<i class="edge verticalEdge topEdge oci"></i>,接着我用鼠标滑进节点,箭头显示,此时i标签内增加了一个类oci-chevron-[up,down,right,left]<i class="edge verticalEdge topEdge oci oci-chevron-up">..</i>,我无法查看省略号的内容,估计应该是一个箭头(望告知查看的方法)。二、我估计oci-chevron-[up,down,right,left]应该是脚本控制生成的,于是使用其前缀oci-chevron-在jquery.orgchart.js中查找,找到若干相关函数switchVerticalArrow(切换垂直箭头)、switchHorizontalArrow(切换水平箭头)、nodeEnterLeaveHandler(控制节点的hover前后的行为)。三、因为我的目的是去掉上、左、右这三个箭头,并且为了尽量不破坏源代码的完整性,所以我修改的宗旨是保持下箭头的行为,仅仅是去掉其余三箭头的mouseover的行为。修改如下:

    //切换垂直箭头
        switchVerticalArrow: function ($arrow) {
          //$arrow.toggleClass('oci-chevron-up').toggleClass('oci-chevron-down');修改前
          $arrow.toggleClass('oci-chevron-down');//修改后
        },
        //切换水平箭头
        switchHorizontalArrow: function ($node) {
          //全都注释掉,但保留函数声明
          //var opts = this.options;
          //if (opts.toggleSiblingsResp && (typeof opts.ajaxURL === 'undefined' || $node.closest('.nodes').data('siblingsLoaded'))) {
          //  var $prevSib = $node.closest('table').parent().prev();
          //  if ($prevSib.length) {
          //    if ($prevSib.is('.hidden')) {
          //      $node.children('.leftEdge').addClass('oci-chevron-left').removeClass('oci-chevron-right');
          //    } else {
          //     $node.children('.leftEdge').addClass('oci-chevron-right').removeClass('oci-chevron-left');
          //    }
          //  }
          //  var $nextSib = $node.closest('table').parent().next();
          //  if ($nextSib.length) {
          //    if ($nextSib.is('.hidden')) {
          //      $node.children('.rightEdge').addClass('oci-chevron-right').removeClass('oci-chevron-left');
          //    } else {
          //      $node.children('.rightEdge').addClass('oci-chevron-left').removeClass('oci-chevron-right');
          //   }
          //  }
          //} else {
          //  var $sibs = $node.closest('table').parent().siblings();
          //  var sibsVisible = $sibs.length ? !$sibs.is('.hidden') : false;
          //  $node.children('.leftEdge').toggleClass('oci-chevron-right', sibsVisible).toggleClass('oci-chevron-left', !sibsVisible);
          //  $node.children('.rightEdge').toggleClass('oci-chevron-left', sibsVisible).toggleClass('oci-chevron-right', !sibsVisible);
          //}
        },
        //
        repaint: function (node) {
          if (node) {
            node.style.offsetWidth = node.offsetWidth;
          }
        },
        //节点mouseover、mouseout的行为
        nodeEnterLeaveHandler: function (event) {
          var $node = $(event.delegateTarget), flag = false;
          var $topEdge = $node.children('.topEdge');
          var $rightEdge = $node.children('.rightEdge');
          var $bottomEdge = $node.children('.bottomEdge');
          var $leftEdge = $node.children('.leftEdge');
          if (event.type === 'mouseenter') {
              //mouseover的行为
            if ($topEdge.length) {
              flag = this.getNodeState($node, 'parent').visible;
              //$topEdge.toggleClass('oci-chevron-up', !flag).toggleClass('oci-chevron-down', flag);//注释掉即可
            }
            if ($bottomEdge.length) {
              flag = this.getNodeState($node, 'children').visible;
              $bottomEdge.toggleClass('oci-chevron-down', !flag).toggleClass('oci-chevron-up', flag);
            }
            if ($leftEdge.length) {
              this.switchHorizontalArrow($node);
            }
          } else {
              //mouseout的行为
            $node.children('.edge').removeClass('oci-chevron-up oci-chevron-down oci-chevron-right oci-chevron-left');
          }
        },
        //
    
    这是我第二篇博客,欢迎斧正。
    
    展开全文
  • jQuery组织结构图表插件OrgChart,可以使用本地数据,或通过ajax调用来完成数据的填充。
  • <p>i Use OrgChart.js (BalkanGraph), and i Read my data from sql server with Ajax but i don't know how i show my nodes of Orgchart. ...
  • jQuery Version:https://github.com/dabeng/OrgChart Vue.js Version:https://github.com/dabeng/vue-orgchart Native JavaScript(ES6) Version:https://github.com/dabeng/OrgChart.js Web Components ...
    展开全文
  • orgChart的应用

    2020-10-19 15:50:12
    <div id="tree" style="height: 500px;width: 100%;"></div>...script src="__TMPL__/public/assets/js/orgchart.js"></script> <script> window.onload = function () {
  • OrgChart是一款简单实用的组织结构图表jQuery插件。OrgChart通过DOM元素,jQuery和CSS3过渡效果来制作组织结构图表。可以使用本地数据,或通过ajax调用来完成数据的填充。
  • <div><p>Export Functionality does not work in IE <p>http://dabeng.github.io/OrgChart/export-orgchart/</p><p>该提问来源于开源项目:dabeng/OrgChart</p></div>

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,829
精华内容 1,531
热门标签
关键字:

orgchart