相信用过dtree的童靴的不在少数,网络上流传的JS树有很多,例如雪花树MzTreeView,EXT、Struts2出来之后,也有自己的树控件,但是这么多风姿卓约的倩影中,我独爱,独爱dtree那一棵。原因有二:1.简单易用,能满足基本需要 2.代码简单,扩展起来也很容易。 这就像找MM一样,简单单纯傻傻的MM好,那些复杂要猜心的就让她靠边吧,不能把握的再美再好咋都不要,哈哈,扯远了。
言归正传,先介绍dtree的基本使用。第一步,引用dtree的资源,在你的页面文件head标签中引用dtree的js文件和css样式文件。例如我的代码如下,路径视你存放dtree资源的具体情况而定:

<link href="/css/dtree.css" rel="stylesheet" type="text/css" /> 

<script src="/js/dtree.js" type="text/javascript"></script>

第二步,定义和展示树。dtree通常可放在一个div中,在你的页面文件中要显示树的地方,添加下列代码:

<div class="dtree" >
<script type="text/javascript"> /* 1. 定义一个树对象 */
var d = new dTree('d'); // 隐含创建一个根节点,id等于-1,不可见 /* 2. 添加一级节点 */
d.add("0","-1","所有类别"); //这里-1是前面根节点的id,说明是新增的节点是d的直接子节点 /* 循环添加其他节点 */
/* 3. 参数说明:1.ID 2.父ID 3.名称 4.URL 5.热点提示 6.URL显示目标target 7.节点关闭时图标 8.节点打开时图标 9.判断节点是否打开 */ <c:forEach items="${userLogSortList}" var="treeNode"> d.add( "${treeNode.sortId}","${treeNode.parentId}","${treeNode.sortName}", "${treeNode.url}","${treeNode.sortName}","logList"); </c:forEach> /* 4.写的div中展示 */
document.write(d); </script>
</div>

对前面代码,简单说明:其中注释里1到3步是对树各节点的定义,注释4是把树最终展示到页面,其中1到3步的代码中用到EL循环和表达式,EL是什么就不要我解释了吧?!如果你不想使用dtree默认的节点关闭和打开的图标,你也可以在add函数的第7个和第8个参数中填上你自己中意的图标路径。

怎么样,很简单吧,当然,树的数据需要你在后台准备好,这对那种树控件都是逃避不了的工作。 但在实际使用中,dtree会有不足,在有些应用场景不能满足我们的需求,所以有必要对dtree进行扩展,这就好比为了爱,我们会不断使自己进步,让自己变得更优秀,尽力把最美好的一面展示给对方,我想dtree如果有灵性,她也希望如此的,呵呵。但是在向完美靠近的过程中,需要根据自身实际情况采取合适的方法,否则适得其反,所以我们有必要先了解dtree,打开你的dtree.js文件吧,让我们感受感受dtree的内心,就像感受和情人之间的心灵默契,有些东西语言是多余的。
dtree.js中最主要有下面几个函数:
1.节点定义函数:function Node(id, pid, name, url, title, target, icon, iconOpen, open)
其中函数中_is属性表示是否被选择,_ls属性表示是否为最后一个兄弟节点,_hc表示是否有子节点,_p指向父节点.

2.树对象定义函数:function dTree(objName) :
该函数完成后述功能:a.定义树全局配置信息 b.定义树默认图标 c.创建树对象和根节点,创建根节点时会调用函数1.

3.节点添加函数:dTree.prototype.add = function(id, pid, name, url, title, target, icon, iconOpen, open) 实际是调用函数1定义节点属性,同时把节点增加到树对象的aNodes节点数组中

4.dTree.prototype.node = function(node, nodeId) 
根据定义构建节点的图标、url(关联展开和关闭函数到非末节点)以及显示文本。

5.dTree.prototype.addNode = function(pNode) 
根据定义构建树首次展示的结构模型,会调用函数4

6.dTree.prototype.toString = function() 
调用函数4、5,串化dtree展示到页面div中。

以上函数1到3在前面代码中定义的步骤时会调用,函数4到5在前面代码中展示树的步骤会调用,这是最重要的几个函数了,
是dtree的思想精华所在了,呵呵,其他的是事件触发函数。学习prototype的童靴也可以用dtree.js作为学习的入门课本,不错的。

了解了dtree的内心,我们再来说说扩展,我这里的第一个需求是为dtree增加checkbox按钮,我想这个是很多童靴都想要的吧,网上已经有很多这样的例子,我也就借花献佛了、抛金引玉了。

步骤1,把函数1头修改为function Node(id, pid, name, url, title, target, icon, iconOpen, open,checked,isBottom) ,在函数体增加下列代码:

this.checked=checked;
this.isBottom=isBottom;

步骤2,在函数2的函数体的config信息中增加下列代码:

check: false ,
useAllData: false

其中useAllData这个属性及相关代码可能不是你想要的,但这里我一起给列出来了。

步骤3,函数3的函数体修改后如下:

var node = new Node(id, pid, name, url, title, target, icon, iconOpen, open, checked,isBottom);

this.aNodes[this.aNodes.length] = node;
var n;
var len = this.aNodes.length;
if ( node.checked ){
var pid = node.pid;
var bSearch;
do{
bSearch = false;
for( n = 0; n < len; n++){
if ( this.aNodes[n].id == pid){
if (this.aNodes[n].checked == false){
this.aNodes[n].checked=true;
pid = this.aNodes[n].pid;
bSearch= true;
break;
}
}
}
}while(bSearch==true);
}

后面两重循环的作用是,当一个节点被勾选时候,改变其父辈祖宗节点的选择状态定义。

步骤4,在函数4中创建图标的代码段中增加下列代码,该代码的作用是用来构建节点checkbox的图标以及为节点关联checkbox勾选触发函数:

if(this.config.check == true){
if(node.checked ==true){
str+= '<input type="checkbox" id="c'+ this.obj + nodeId + '" value="'+ node.id +'" ';
if (this.config.useAllData) { str+= ' name="dataId" '; }
if (!this.config.useAllData) { str+= node.isBottom ? ' name="dataId" ':' name="nodeId"'; }
str+= ' onclick="javascript:'+this.obj+'.cc('+nodeId+')" checked />';
}else{
str+= '<input type="checkbox" id="c'+ this.obj + nodeId + '" value="'+ node.id +'" ';
if (this.config.useAllData) { str+= ' name="dataId" '; }
if (!this.config.useAllData) { str+= node.isBottom ? ' name="dataId" ':' name="nodeId"'; }
str+= ' onclick="javascript:'+this.obj+'.cc('+nodeId+')" />';
}
}

步骤5,增加一个新的函数,就是步骤4的cc函数,作用是单节点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 ==f alse){
var clicknode=node
do{
for( j=0; j<l en; j++){
if(this.aNodes[j].pid==clicknode.pid&&document.getElementById ("c"+this.obj+j).checked==true){
return;
}
}
if ( j == len) {
for(k=0;k<len;k++){
if (this.aNodes[k].id == clicknode.pid ){
document.getElementById("c"+this.obj+k).checked=false;
clicknode=this.aNodes[k];
break;
}
}
} }while(clicknode.pid!=-1); }
if(cs==true){
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);
} }

稍微麻烦点,但是看到checkbox出来时,我想你会有成就感,就象历尽艰辛情路追到你心仪女孩后时内心的雀跃。

最后讲讲扩展的第二个需求,为末级节点增加外部js函数调用,外部js函数是留给童靴们在使用时去实现的,这样子,童靴们可以在这个外包js函数去定制和树有关的其他业务动作,甚至是异步调用,实现ajax的无刷新效果。具体扩展方法是,在函数4中判断url的代码中再增加一个分支,代码如下:

else if ((!this.config.folderLinks || !node.url) && !node._hc && node.pid != this.root.id){
str += '<a href="javascript: ' + this.obj + 'treeNodeClick(' + node.id + ');" class="node">';
}

dtree的使用和扩展的更多相关文章

  1. Asp.net Boilerplate之AbpSession扩展

    当前Abp版本1.2,项目类型为MVC5. 以属性的形式扩展AbpSession,并在"记住我"后,下次自动登录也能获取到扩展属性的值,版权归"角落的白板报"所 ...

  2. 恢复SQL Server被误删除的数据(再扩展)

    恢复SQL Server被误删除的数据(再扩展) 大家对本人之前的文章<恢复SQL Server被误删除的数据> 反应非常热烈,但是文章里的存储过程不能实现对备份出来的日志备份里所删数据的 ...

  3. .NET Core中间件的注册和管道的构建(3) ---- 使用Map/MapWhen扩展方法

    .NET Core中间件的注册和管道的构建(3) ---- 使用Map/MapWhen扩展方法 0x00 为什么需要Map(MapWhen)扩展 如果业务逻辑比较简单的话,一条主管道就够了,确实用不到 ...

  4. .NET Core中间件的注册和管道的构建(2)---- 用UseMiddleware扩展方法注册中间件类

    .NET Core中间件的注册和管道的构建(2)---- 用UseMiddleware扩展方法注册中间件类 0x00 为什么要引入扩展方法 有的中间件功能比较简单,有的则比较复杂,并且依赖其它组件.除 ...

  5. 采用EntityFramework.Extended 对EF进行扩展(Entity Framework 延伸系列2)

    前言 Entity Framework 延伸系列目录 今天我们来讲讲EntityFramework.Extended 首先科普一下这个EntityFramework.Extended是什么,如下: 这 ...

  6. Dapper扩展之~~~Dapper.Contrib

    平台之大势何人能挡? 带着你的Net飞奔吧!http://www.cnblogs.com/dunitian/p/4822808.html#skill 上一篇文章:Dapper逆天入门~强类型,动态类型 ...

  7. ExtJS 4.2 Date组件扩展:添加清除按钮

    ExtJS中除了提供丰富的组件外,我们还可以扩展他的组件. 在这里,我们将在Date日期组件上添加一个[清除]按钮,用于此组件已选中值的清除. 目录 1. Date组件介绍 2. 主要代码说明 3. ...

  8. .NET Core的文件系统[5]:扩展文件系统构建一个简易版“云盘”

    FileProvider构建了一个抽象文件系统,作为它的两个具体实现,PhysicalFileProvider和EmbeddedFileProvider则分别为我们构建了一个物理文件系统和程序集内嵌文 ...

  9. Hawk 6. 编译和扩展开发

    Hawk是开源项目,因此任何人都可以为其贡献代码.作者也非常欢迎使用者能够扩展出更有用的插件. 编译 编译需要Visual Stuido,版本建议使用2015, 2010及以上没有经过测试,但应该可以 ...

随机推荐

  1. MySQL- 锁(1)

    锁是计算机协调多个进程或线程并发访问某一资源的机制.在数据库中,除传统的计算资源(如CPU.RAM.I/O等)的争用以外,数据也是一种供许多用户共享的资源.如何保证数据并发访问的一致性.有效性是所有数 ...

  2. JVM GC (一)

    1. 先来说GC工作在哪块区域呢? 程序计数器,虚拟机栈(也就平时所说的栈), 本地方法栈这三区域随着线程而生,随着线程而灭,出栈入栈的操作,在栈中分配配的多少内存都具 有确定性,在这几个区域就不用考 ...

  3. magento csv导入

  4. 删除Checkout with Multiple Addresses

    如果选择No,您的客户在结账时只可以输入一个收货地址,订单的货物都会送到这个地址.如果您选择Yes,您的客户将可以选择发货到多个地址,在购物车中的Proceed to Checkout按钮下面将会出现 ...

  5. Mac废纸篓 不能完全清空的有效解决方法

    摘自:http://www.neonan.com/articles/5582 对于苹果用户来说, 可能都会遇到过这样的情况(尽管这种情况是不常出现的!), Mac OS X系统突然出现一些顽固的文件家 ...

  6. ASP.NET MVC Template

    http://bradwilson.typepad.com/blog/2009/10/aspnet-mvc-2-templates-part-1-introduction.html http://st ...

  7. MySQL的半同步复制监控

    (1)master端 >show variables like 'rpl_semi_sync%'; +------------------------------------+-------+ ...

  8. MySQL-profiling的使用

    分析SQL执行带来的开销是优化SQL的重要手段.在MySQL数据库中,可以通过配置profiling参数来启用SQL剖析.该参数可以在全局和session级别来设置.对于全局级别则作用于整个MySQL ...

  9. Java基础之处理事件——添加菜单图标(Sketcher 8 with toolbar buttons and menu icons)

    控制台程序. 要为菜单项添加图标以补充工具栏图标,只需要在创建菜单项的Action对象中添加IconImage对象,作为SMALL_ICON键的值即可. // Defines application ...

  10. 收集一些java相关的文章

    有些文章看了,以后想再看已经忘了在哪里了.故在此一一记录下那些值得看的文章. 1:如何确定Java对象的大小 中文版本 :http://article.yeeyan.org/view/104091/6 ...