dtree的使用和扩展
相信用过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+= ' οnclick="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+= ' οnclick="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">'; }
转载于:https://www.cnblogs.com/iteakey/p/4052167.html
dtree的使用和扩展相关推荐
- layui文件树Dtree的使用
1.下载Dtree文件 下载地址:https://fly.layui.com/extend/dtree/ 将文件解压后放到项目静态文件的位置 2.使用 在页面分别引入dtree.css和dtreefo ...
- dtree树形结构异步传输
首先引入css文件 https://gitee.com/sunzhenzhen/ziyuanmulu/blob/master/src/main/webapp/layui/css/layui.css h ...
- layui树形菜单右键_layui.dtree帮助手册
iconfont: 该参数为具体某个元素使用的字体样式集,默认是使用组件提供的dtreefont图标库中的图标组成的集合.在一切都默认的基础下,所有的图标都会从该图标库中取得,包括用户自定义的icon ...
- VS Code 安装 Go 插件、自定义扩展配置、断点调试
1. 安装插件 使用快捷键 Ctrl+Shift+X 打开插件安装页面,安装 Go 插件. 2. 自定义扩展配置 使用快捷键 Ctrl+, 打开自定义配置页,编辑 settings.json ,定义与 ...
- VS Code 安装插件、自定义模板、自定义配置参数、自定义主题、配置参数说明、常用的扩展插件
1. 下载和官网教程 下载地址:https://code.visualstudio.com/ 官方教程:https://code.visualstudio.com/docs 2. 安装插件 安装扩展插 ...
- gcc 自动识别的文件扩展名,gcc/g++ -x 选项指定语言,不同 gcc 版本 -std 编译选项支持列表
对于执行 C 或者 C++ 程序,需要借助 gcc(g++)指令来调用 GCC 编译器. 对于以 .c 为扩展名的文件,GCC 会自动将其视为 C 源代码文件 对于以 .cpp 为扩展名的文件,GCC ...
- 用动态实现扩展TVM
用动态实现扩展TVM Extending TVM with Dynamic Execution Outline ● Motivation for Dynamism ● Representing Dyn ...
- TVM apps extension示例扩展库
TVM apps extension示例扩展库 此文件夹包含TVM的示例扩展库.演示了其它库如何在C++和Python API中扩展TVM. 该库扩展了TVM的功能. python模块加载新的共享库, ...
- Python 扩展 Op
Python 扩展 Op 注意 :本文涉及的 Python Kernel 仅在 gcc 4.8.5 编译环境下充分测试,进一步的完善计划见 Issue 3951. 背景介绍 OneFlow 将各种对于 ...
最新文章
- 【精心挑选】10款基于 jQuery 的图片360度旋转插件
- Struct2中三种获取表单数据的方式
- 《构建之法》阅读第四章、第十七章收获
- C++ 从函数或方法返回内存 实现返回多个变量
- JDK 5 ~ 10 新特性倾情整理
- 使用jOOQ和JavaFX将SQL数据转换为图表
- 【CodeForces - 1038C】Gambling (博弈问题,优先队列模拟,贪心)
- gohu恒温花洒使用教程_使用家庭助理构建更好的恒温器
- FreeRTOS内核实现04:空闲任务与阻塞延时
- c语言 写高斯分布函数
- Java关键字与保留字
- raid卡缓存对硬盘性能_机械硬盘寿命探究(续)
- Jmeter性能测试实践--登录场景设计
- GITHUB无法打开与下载失败解决方法总结
- U-BOOT添加命令
- 大数据学习路线图,大数据需要学什么
- Jmeter源码分析(二)
- php.ini配置文件详解(mac nginx1.8.0 php5.6 )持续更新中
- 电商运营指标体系梳理
- 继电器为何要并联二极管使用
热门文章
- startos 5.1 如何 root 登陆
- JavaScript 类型总览(图)
- One Day-XML:XPath
- POJ - 2528 线段树+离散化
- Linux实战教学笔记49:Zabbix监控平台3.2.4(一)搭建部署与概述
- Lua 函数、闭包、尾调用总结
- 监控录像帮忙找回医院被偷的女婴
- 【原译】简单的Malloc实现
- 模块全解======ruby的类是单继承生物、所以出现了module、实现了多继承
- 红楼梦 --- 花开在眼前