带checkbox的dhtmlxtree菜单树异步加载时的问题解决

最近一直很忙,自己负责几个模块的设计开发,还有和其他服务接口的测试联调,整个系统web部分的集成,corba、WebService都在向我狂轰滥炸,小米加步枪进行反击的同时,又对dhtmlxtree的源码做了点修改。
问题是这样的,数据库里要配置访问权限的视图有几百个,当然已经按照属性分门别类了,可以用菜单树逐层浏览;我用带checkbox的dhtmlxtree菜单树进行权限配置功能的实现,但是树节点太多了,一次性加载的话,总的xml字符流大概有400KB,初始加载时就比较费时间,大概要用时5-10秒,操作的时候也比较慢;IE确实不怎么样,在各个浏览器里js的运行速度是最慢的,IE上展开一个树节点大概要等待2秒,收起一个树节点大概要3秒,进行别的操作也很缓慢;firefox和google浏览器不错的,任何操作都在可理解的正常范围以内;IE要是不和操作系统绑定,早就被淘汰了。这毕竟是假设,还得寻求兼容的优化方式,那就异步加载呗!
用过的朋友肯定都知道,需要用dhtmlxtree的enableCheckBoxes函数设定启用checkbox;但是异步的情况下,有些子节点在页面中还没有加载,如果用非也子节点前面的多选框选择这支树杈进行批量设置的话,很难判断这些没加载的节点是否已经进行了设置,服务器端也很难进行处理。没办法,dhtmlxtree没有针对于一个节点的配置方法,改源码吧!我的需求只是要在叶子节点上有选择框,并且是单选框。
dhtmlxtree源码中的处理是构架树状菜单的时候其实已经构建了选择框,只是没有显示而已,那样就更好处理了。为了通用,还是在enableCheckBoxes方法设定显示选择框的时候再显示吧!
具体修改:
1.隐藏非叶子节点前面的选择框,这个实现在dhtmlXTreeObject.prototype._createItem函数中
......
......
var td11 = document.createElement("td");
	var inp = this._getImg(this.cBROf ? this.rootId : itemObject.id);
	inp.checked = 0;
	this._setSrc(inp, this.imPath + this.checkArray[0]);
	inp.style.width = "16px";
	inp.style.height = "16px";
	//daoger 2009-10-24 start
	//if (!acheck) {
	//	((!_isIE) ? td11 : inp).style.display = "none";
	//}
	((!_isIE) ? td11 : inp).style.display = "none";
	//daoger 2009-10-24 end
	td11.appendChild(inp);
	if ((!this.cBROf) && (inp.tagName == "IMG")) {
		inp.align = "absmiddle";
	}
	inp.onclick = this.onCheckBoxClick;
	inp.treeNod = this;
	inp.parentObject = itemObject;
	if (!window._KHTMLrv) {
		td11.width = "20px";
	} else {
		td11.width = "16px";
	}
......
......

这里是构建多选框。
2.显示叶子节点前面的单选框。带单选框的节点是作为新建节点添加到别的节点上的,初始化的时候不建立,找到dhtmlXTreeObject.prototype._attachChildNode方法
......
if ((parentObject._r_logic) || (this._frbtr)) {
		//daoger 2009-10-24 start
		if (_isIE) {
			n.htmlNode.childNodes[0].childNodes[0].childNodes[1].childNodes[0].style.display = "";
		} else {
			n.htmlNode.childNodes[0].childNodes[0].childNodes[1].style.display = "";
		}
		//daoger 2009-10-24 end
		this._setSrc(n.htmlNode.childNodes[0].childNodes[0].childNodes[1].childNodes[0], this.imPath + this.radioArray[0]);
	}
......

这样就可以了,测试一下吧!其他操作方法均不受影响!

你可能感兴趣的:(JavaScript,webservice,浏览器,IE,prototype)