easyui combotree 点击父节点展开或折叠效果实现

我的easyui是1.6.7版本。目前最新版本。如果你的是其他版本。可能源代码不同。就不能用这个方法了。

先看下要实现的效果。这样的一个combotree。我试过使用checkbox实现单选。也是可以的。但是我要的最终效果是要根据选中的子节点。逐级找到父节点并最终显示成逐级的字符串。就像这样。

假如我选中了住房公积金。那么显示的值是“一、生成成本 1.人工成本 1.4住房公积金 ”。中间的冒号分号是客户要的效果。最终是做的拼接字符串。然后清空combotree值。在设置成我的值。

如果使用checkbox的话大家可以试一下。不管使用oncheck函数还是onselect函数。最终显示效果都是我生成的字符串前面又多出来一个 “住房公积金”字符串。。

原因目前没查到。但是我使用onclick可以正常设置值。如果使用onclick的话 又会出现不能做checkbox 选中效果的问题。。

如果实现了选中效果又会出现前面多出一个 字符串的问题。。

最终我只能放弃checkbox的方式。使用不带checkbox的树。

这个树最终实现就是下图的效果。

 这棵树点击叶子节点会生成我想要的值到combox框内。但是点击父节点树就会消失。可以在点击事件内做父节点判断。然后做展开或折叠。但是树还是会消失。这样很不利于客户操作。客户只是想看折叠一个树。快速寻找自己想选择的树。但是树消失了又要点击一遍很不方便。百度了一下。找到了1.2.6的源代码修改方案。但是我的是1.6.7 不能使用。于是自己找了一下。不是很难。

首先看下源代码 

下面是easyui生成的dom

 // 整个div包含空白部分
     //tree-indent是占位用的
     
     //这是最前面的小箭头点击它可以展开或折叠父节点
     //这是文件夹图标
    1.3、社会保险费 // 这是文本标题

 这里是点击dom执行的函数。行数是jquery.easyui.min.js的1398行

}).bind("click",function(e){
var tt=$(e.target); // tt是dom对象.如果点击的是span那么就是span。点击div就是div。
var _e8=tt.closest("div.tree-node");
if(!_e8.length){
return;
}
if(tt.hasClass("tree-hit")){ // 这里判断了span如果有tree-hit类。执行_146()函数。修改这里就可以
_146(_e4,_e8[0]); // 这个函数就是打开或折叠父类
return false;
}else{
if(tt.hasClass("tree-checkbox")){
_10d(_e4,_e8[0]);
return false;
}else{
_18b(_e4,_e8[0]);
_e5.onClick.call(_e4,_eb(_e4,_e8[0]));
}
}
e.stopPropagation();
}

从源代码可以看出 只有tree-hit类点击时执行了展开或折叠功能。如果加入tree-title是不是就可以了呢？答案是不可以。。因为tree-title还有其他功能比如。作为菜单时点击会跳转页面。如果这里直接加入一个tree-title判断将会使正常的跳转功能失效。

我的做法是。当点击这个div或点击tree-hit的兄弟节点时。假设点击的是带有tree-title类的span。。那么这个tree-title类的span必定有一个兄弟节点的类是tree-hit。如果没有。那么他就是叶子节点。继续往下走就行了 。。有的话就是可展开的父节点。如果点击的是div。那么它就有一个子节点 带有tree-hit类。于是源码修改如下

}).bind("click",function(e){
var tt=$(e.target);
var _e8=tt.closest("div.tree-node");
if(!_e8.length){
return;
}
//这里加入查询tt兄弟和tt子节点。如果找到就展开或折叠
if(tt.hasClass("tree-hit") || tt.siblings(".tree-hit").length > 0 || tt.children(".tree-hit").length > 0){ 
_146(_e4,_e8[0]);
return false;
}else{
if(tt.hasClass("tree-checkbox")){
_10d(_e4,_e8[0]);
return false;
}else{
_18b(_e4,_e8[0]);
_e5.onClick.call(_e4,_eb(_e4,_e8[0]));
}
}
e.stopPropagation();
}

只需要加入 两个判断条件就可以实现。

这样的combotree 舒服多了。