Dtree【树形下拉框】

1、从网上下载dtree控件.

2、在Jbuilder中新建Web应用，命名为TreeLearing

3、解压缩dtree.rar包。

把dtree目录拷贝至TreeLearing应用中。

dtree目录下包括这些文件：example01.html 、 dtree.js 、 api.html 、 dtree.css 和img目录

注意：除了api.html之外，其它的文件都是必须拷贝的。只有这个api.html是对dtree控件的函数介绍。

4、复制example01.html，并把粘贴后的文件重命名为Tree.jsp

注意dtree目录下的文件结构不要改变，否则树就不会正常显示

5、在Web应用中指定首页为Tree.jsp页面。

6、Tree.jsp中的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
<title>Destroydrop » Javascripts » Tree</title>

</head>

<body>

<h1><a href="/">Destroydrop</a> » <a href="/javascripts/">Javascripts</a> » <a href="/javascripts/tree/">Tree</a></h1>

<h2>Example</h2>

<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>

d = new dTree('d');

   d.add(0,-1,'My example tree');
  d.add(1,0,'Node 1','example01.html');
   d.add(2,0,'Node 2','example01.html');
   d.add(3,1,'Node 1.1','example01.html');
   d.add(4,0,'Node 3','example01.html');
   d.add(5,3,'Node 1.1.1','example01.html');
   d.add(6,5,'Node 1.1.1.1','example01.html');
   d.add(7,0,'Node 4','example01.html');
   d.add(8,1,'Node 1.2','example01.html');
   d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
   d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
   d.add(11,9,'Mom\'s birthday','example01.html');
   d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');

document.write(d);

//-->
</script>

</div>

</body>

</html>

7、删除紫红色部分的代码，因为不需要哦。

8、注意看绿色和蓝色部分的代码，这才是真正为树添加节点的部分。

d.add(0,-1,'My example tree');
这一句为树添加了一个根节点，显示名称为'My example tree'

d.add(1,0,'Node 1','example01.html');
这一句在树的根节点下面添加了一个子节点。（d.add（）方法的参数具体含义可参见api.html文件）

常用的：

第一个参数，表示当前节点的ID

第二个参数，表示当前节点的父节点的ID

第三个参数，节点要显示的文字

第四个参数，点击该节点的超链接（注意也可以是某个servlet或是struts应用中的某个.do请求）

第五个参数，鼠标移至该节点时显示的文字

第六个参数，指定点击该节点时在哪个桢中打开超链接

转载于:https://www.cnblogs.com/LeeYan/archive/2009/01/12/1374102.html

Dtree【树形下拉框】相关推荐

ajax使用json下拉框,ajax请求后台得到json数据后动态生成树形下拉框的方法
如下所示: $(function(){ $.ajax({ url:"departmentAction_getAllDep.action", type:"post" ...
iview 下拉select样式_Vue.js相关：iview实现select tree树形下拉框的示例代码
Vue.js相关:iview实现select tree树形下拉框的示例代码发布于 2020-3-16| 复制链接摘记: 本文介绍了iview实现select tree树形下拉框的示例代码,分享给大 ...
treeselect只选了分支节点全选_vue Treeselect 树形下拉框:获取选中节点的ids和lables操作...
API: https://vue-treeselect.js.org/#events 1.ids: 即value 1.lable: 需要用到方法:@select(node,instanceId) 和 ...
JavaScript树形下拉框
js库地址:https://github.com/hzwy23/Hselect 这个JS文件是对select标签的一个扩展,使得select能够支持树形下拉框 1.依赖关系: 使用这段js代码之前,请 ...
easyui复杂表单_jQuery EasyUI 表单 – 创建树形下拉框（ComboTree） | 菜鸟教程
jQuery EasyUI 表单 - 创建树形下拉框树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务 ...
element做树形下拉_一个基于 elementUi的vue树形下拉框组件
# wl-vue-select,wl-tree-selectcss # 简介vue 用于vue框架的树形下拉框及带全选的普通下拉框. node Tree drop-down box for vue ...
element做树形下拉_一个基于 elementUi 的树形下拉框组件vue
wl-vue-select,wl-tree-select 简介用于vue框架的树形下拉框及带全选的普通下拉框. Tree drop-down box for vue framework and or ...
树形下拉框字体变粗问题
树形下拉框点击选中后,选中的字体颜色变粗,再次打开下拉框,未选中的字体也会变粗,解决方法: <style lang='less'> // el-tree 字体不加粗 .el-tree .e ...
EasyUI：combotree(树形下拉框)复选框选中父节点(子节点的状态也全部选中)输入框中只显示父节点的文本值
在开发过程中遇到的小案例效果展示未处理之前的效果: 处理之后的效果: 需求详情 combotree(树形下拉框)复选框选中父节点时输入框只显示父节点的文本值,但是子节点的状态是选中的. 当所有子节 ...
php 下拉树多项选择框,jQuery树形下拉框插件multipleTree升级
插件描述:tree是基于jqueryztree开发的树形下拉选择框插件,支持ie8+谷歌,火狐,360等浏览器(multipleTree升级版) 更新时间:2020-09-26 00:48:20 更新 ...

Dtree【树形下拉框】

Dtree【树形下拉框】相关推荐

最新文章

热门文章