最近工作中有个需求是生成组织结构图,看了许多案例之后决定选择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(&