jquery combotree解决点击文字不能展开下级的问题

combotree在项目开发中很适用,但是网上的这方面的资料很少,要么自己用input和div,加个树控件去写一个,但是我比较推荐基于jquery的easyui,css样式也方便修改,但是easyui的combotree一直有bug,就是点击树节点的时候,不会展开下级,网上找到了人家的解决方法,我就在这里保留一份了。

版本是:jquery easyui 1.2.6


其中有一个combotree(下拉树)的功能,但是只有点击树前面的展开三角才会展开下级菜单,点击文字则会使下拉书隐藏~
因为这些代码都是动态生成的,所以只有修改jquery.easyui.min.js里的方法,最可气的是easyui的js代码是经过加密的,看起来非常麻烦~~

下面开始说解决办法,看源代码可以知道,easyui总共生成里四部分的东西
<div style="cursor: pointer;" class="tree-node" node-id="1001">
 <span class="tree-indent"></span>  //这个是展开图片前面的空白部分
 <span class="tree-hit tree-collapsed"></span> //这个是展开图片
 <span class="tree-icon tree-folder"></span> //这个是展开图片后面的文件夹图片
 <span class="tree-title">总裁办</span> //这个事最后的文本文字
</div>


查找:jquery.easyui.min.js源代码

function _88(_89) {
    var _8a = $.data(_89, "tree").options;
    var _8b = $.data(_89, "tree").tree; ("div.tree-node", _8b).unbind(".tree").bind("dblclick.tree",function() {
        _132(_89, this);
        _8a.onDblClick.call(_89, _117(_89));
    }).bind("click.tree",function() {
 	//这里是点击其他部分导致下拉树被隐藏的代码
	/**需要替换的代码,start**/
        _132(_89, this);
        _8a.onClick.call(_89, _117(_89));
	/**end**/
    }).bind("mouseenter.tree",function() {
        $(this).addClass("tree-node-hover");
        return false;
    }).bind("mouseleave.tree",function() {
        $(this).removeClass("tree-node-hover");
        return false;
    }).bind("contextmenu.tree",function(e) {
        _8a.onContextMenu.call(_89, e, _b3(_89, this));
    }) $("span.tree-hit", _8b).unbind(".tree").bind("click.tree",function() {
 	//这里是点击展开图片的代码
 				
        var _8c = $(this).parent();
        _f7(_89, _8c[0]);
        return false;
    }).bind("mouseenter.tree",function() {
        if ($(this).hasClass("tree-expanded")) {
            $(this).addClass("tree-expanded-hover");
        } else {
            $(this).addClass("tree-collapsed-hover");
        }
    }).bind("mouseleave.tree",function() {
        if ($(this).hasClass("tree-expanded")) {
            $(this).removeClass("tree-expanded-hover");
        } else {
            $(this).removeClass("tree-collapsed-hover");
        }
    }).bind("mousedown.tree",function() {
        return false;
    });
    $("span.tree-checkbox", _8b).unbind(".tree").bind("click.tree",function() {
        var _8d = $(this).parent();
        _aa(_89, _8d[0], !$(this).hasClass("tree-checkbox1"));
        return false;
    }).bind("mousedown.tree",function() {
        return false;
    });
};

把下面这段代码替换到,需要替换的代码中去,就可以解决问题了:

var _8c = $(this);
//下面需要判断是否是叶子节点,不是展开,是则显示在input上,这部分也可以直接修改_f7方法里的代码
var hit = $(_8c[0]).children("span.tree-hit");
if (hit.length == 0) {
	//如果等于0则说明是叶子节点,直接使用原来的代码就可以
	_132(_89, this);
  _8a.onClick.call(_89, _117(_89));
} else {
	//否则就是有下级数据的节点,展开树
	_f7(_89, _8c[0]);
  return false;
}


这样的combotree就挺好了。基本满足项目需要。

你可能感兴趣的:(jquery,jquery,easyui,combotree,combotree,esayUI)