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