关于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(&
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
vue-orgchart是一个基于Vue.js的组织结构图插件。它可以帮助我们在网页展示公司的组织结构图,以便更清晰地了解公司的层级关系和工作流程。 在使用vue-orgchart时,我们首先需要安装和引入该插件,并在Vue实例注册它。接下来,我们可以通过在Vue模板使用<vue-orgchart>标签来创建组织结构图。该标签接受一个名为"nodes"的属性,用于传递组织结构的数据。 组织结构的数据可以是一个包含了所有节点信息的数组。每个节点都有一个唯一的id属性和一个parentId属性,用于确定节点之间的父子关系。另外,我们还可以在节点添加其他自定义的属性,例如节点的名称、职位等。 一旦我们传递了组织结构的数据,vue-orgchart会根据数据自动生成组织结构图。图的每个节点都会根据数据的父子关系自动连接起来,形成一个层级结构。我们可以通过自定义样式来美化组织结构图,例如调整节点的颜色、样式和大小等。 此外,vue-orgchart还支持一些交互功能。我们可以通过点击节点来展开或收起其子节点,以便更好地查看组织结构的细节。同时,我们还可以通过监听节点的点击事件,来实现一些自定义的功能,例如在点击节点时展示该节点的详细信息或跳转到相关页面等。 总的来说,vue-orgchart是一个简单而强大的工具,可以帮助我们快速创建和展示公司的组织结构图。它具有灵活性和交互性,可以根据我们的需求进行定制和扩展。无论是在人力资源管理、项目管理还是组织沟通,vue-orgchart都能为我们提供便利和帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值