当前位置: 首页 > 工具软件 > OrgChart > 使用案例 >

关于OrgChart中toggleSiblingsResp属性不起作用的一些解决方法(OrgChart去掉多余的箭头)

罗星洲
2023-12-01

最近工作中有个需求是生成组织结构图,看了许多案例之后决定选择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');
      }
    },
    //
这是我第二篇博客,欢迎斧正。
 类似资料: