做 WEB 程序的人多数应该听说过 dtree,这个插件还不错,简单、效率还算可以,而且可以在cookie 中保存树的状态(刷新页面树会保持节点展开、收拢状态),如果节点量不是很大的情况下,是个不错的选择。但这个插件不带 checkbox。
dtree 的节点(Node)是个对象,所有节点保存在树(dTree)对象的一个属性里,重载了两个对象的 toString()函数,在页面显示的时候执行所有的 toString()操作。搞清程序的大致流程,改造工作就比较简单了,分以下几步:
1.给树对象的 config 对象添加一个控制 checkbox 是否显示的属性;
this.config = {
target : null,
folderLinks : true,
useSelection : true,
useCookies : true,
useLines : true,
useIcons : true,
useStatusText : false,
closeSameLevel : false,
inOrder : false,
check:false //**新加的
}
2.修改节点对象的 toString()方法,添加...input type="checkbox"...代码;
if(this.config.check==true){
str+= '<input type="checkbox" id="c'+ this.obj + nodeId + '" onclick="javascript:'+this.obj+'.cc('+nodeId+')"/>';
}
3.写 checkbox 页面元素的 onclick 事件处理函数,这个函数用来智能控件树节点的 checkbox 状态。也就是说,勾选一个节点的 checkbox,自动勾选其所有父节点及其所有子节点;取消勾选节点的 checkbox,自动取消勾选其所有子节点的勾选状态,而其父节点的勾选状态不变。这个是个比较重要的新功能,一些具有 checkbox 的页面插件并不具备这个功能,这个功能使用递归算法实现。
dTree.prototype.cc=function(nodeId){
var cs = document.getElementById("c"+this.obj+nodeId).checked;
var n,node = this.aNodes[nodeId];
var len =this.aNodes.length;
for (n=0; n<len; n++) {
if (this.aNodes[n].pid == node.id) {
document.getElementById("c"+this.obj+n).checked=cs;
this.cc(n);
}
}
if(cs==false)return;
var pid=node.pid;
var bSearch;
do{
bSearch=false;
for(n=0;n<len;n++){
if(this.aNodes[n].id==pid){
document.getElementById("c"+this.obj+n).checked=true;
pid=this.aNodes[n].pid;
bSearch= true;
break;
}
}
}while(bSearch==true);
}
分享到:
相关推荐
该资料包括dtree和dtree_checkbox(dtree复选框),众所周知,dtree是个不错的JS控件,好资料当然要和大家分享^_^
dtree +checkBox全选 。。。。dtree +checkBox全选 。。。。dtree +checkBox全选 。。。。dtree +checkBox全选 。。。。dtree +checkBox全选 。。。。dtree +checkBox全选 。。。。
三个常用树控件dtree最新dtree带checkbox还有mztreeview1.0跟2.0里面还有本人写的部分demo如果是常用开发请使用mztree1.0或dtree 如果有特殊需求请使用带checkbox的dtree或mztree2.0
本人根据dtree添加了checkbox的功能,能默认选中,方便好用
3、添加css文件自动加载方法,使用时只需在head区引用dtree-ck.compress.js。 4、添加获取选中节点、名称、值、数量的方法 getSelectedNodes(): getSelectedNodes()['nodes']:获取选中节点,dTree节点对象数组 ...
dtree带checkbox,java项目
dtree修改版-添加checkbox: 由于原版dtree作者没有加上复选框功能,我用来做用户模块权限功能的时候很不好用,网上也找到一些基于dtree添加了checkbox的修改版,但是用起来很不顺手,最后不得不根据自己的需要一再...
在dtree原有基础上添加了checkbox功能
NULL 博文链接:https://liu-shui8.iteye.com/blog/591865
dtree支持动态添加,删除节点dtree支持动态添加,删除节点dtree支持动态添加,删除节点dtree支持动态添加,删除节点
DTree CheckBox JS树 无限级树 灵活
dtree 带checkBox 选中父节点,子节点全选。子节点取消选中,父节点取消,并且此节点保持原有状态
dtree 框架 还有checkbox 选择框 dtree 框架 还有checkbox 选择框
dtree+jquery+oracle+tomcat 从oracle数据库中取出dtree的节点信息,在jsp页面使用jquery动态生成带checkBox的dtree 测试时请访问main.jsp WebRoot/db目录为数据库建表脚本;
dtree.js动态树增加checkbox功能属性
纯javascript实现,有checkbox的dtree,下载就可以试用,有完整实例
有dtree做的 带checkbox的权限树
本工程使用dTree组件实现树形菜单的展示 有静态树形菜单和动态(从数据库获取数据)树形菜单展示两种 ...菜单既有普通的树结构展示,也有方便做权限等功能的带选择框的展示(含带默认选中checkbox的处理)
修改了传统带checkbox的dtree中选中复选框时的操作,大大提升了全选,选父节点时子节点全部选中 等的速度