问题是这样的,数据库里要配置访问权限的视图有几百个,当然已经按照属性分门别类了,可以用菜单树逐层浏览;我用带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]); } ......
这样就可以了,测试一下吧!其他操作方法均不受影响!