带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]);
	}
......

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

评论

1 楼 smallcat 2011-11-22  

高人。