最近一直很忙,自己负责几个模块的设计开发,还有和其他服务接口的测试联调,整个系统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]);
}
......
这样就可以了,测试一下吧!其他操作方法均不受影响!
分享到:
相关推荐
本工程使用dTree组件实现树形菜单的展示 有静态树形菜单和动态(从数据库获取数据)树形菜单展示两种 ...菜单既有普通的树结构展示,也有方便做权限等功能的带选择框的展示(含带默认选中checkbox的处理)
demo以及源码 博文链接:https://lanrenjun.iteye.com/blog/824985
结合网上资料整理出的wicket组织树,节点带checkbox,数据可逐层加载
树形菜单带checkbox,方便易用,简单修改,树形菜单带checkbox实现全选,反选等等
实现右键(展开所有、关闭所有、选择所有、反选所有) 实现选中上级时自动选择下级所有
可实现全选择功能,并能实现,当一个子菜单取消时,其父菜的全选也自动取消,支持无级菜单
js树,带checkBox,js树,带checkBox
带checkbox的树 checkbox tree tree tree checkbox
带checkbox的树,自己捣鼓的,类似于jq的那种
jQuery的高性能TreeView源码(带CheckBox) 1:支持静态的树,即一次性将全部数据加载到客户端。 2:异步树,即一次只加载一级或若干级节点,子节点可以异步加载数据。 3:Checkbox树(可能是静态树也可能是异步树...
FlexViewer 树形结构带checkbox,勾选checkbox节点调用地图加载点标注
有dtree做的 带checkbox的权限树
带CheckBox的TreeView,可以在点击CheckBox或者TreeViewItem的时候改变勾选状态。
//设置一个标志位,在整棵树加载完成后就将标志位设置为false,不允许勾选checkbox了,在加载数据完成之前是可以勾选的,用来在数据中设置勾选了哪些节点 //这样就可以实现读取url数据时是可以设置勾选了哪些节点,在...
带复选框(checkbox)的树带复选框(checkbox)的树带复选框(checkbox)的树带复选框(checkbox)的树
listview+checkbox,动态加载及分页的实现,结合一起使用,很有帮助的,而且在实际项目中也是经常用到的。。。
select下带框中带checkbox多选框
实现右键(展开所有、关闭所有、选择所有、反选所有) 实现选中上级时自动选择下级所有
带有checkbox的权限树,当选中父节点时,子节点全选中,子节点未全部选中是,父节点半选中,子节点全部选中是,父节点同时选中
checkbox树形结构