- 浏览: 826369 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (530)
- Java编程 (64)
- C/C++/D (6)
- .Net/C# (9)
- Ruby (12)
- JavaScript (77)
- XML (1)
- JSON (1)
- Ajax (17)
- ExtJs (81)
- YUI (1)
- JQuery (7)
- DWR (1)
- HTML (7)
- CSS (7)
- Database (6)
- PowerDesigner (23)
- DB2 (2)
- Oracle (57)
- MS SQL Server (8)
- MySQL (6)
- JSP/Servlet/JSTL/TagLib (3)
- Spring (1)
- Hibernate (0)
- iText (0)
- Struts (0)
- Struts2 (0)
- iReport (0)
- FreeMarker (0)
- HttpClient (1)
- POI (6)
- FckEditor (15)
- Eclipse / MyEclipse (10)
- IntelliJ IDEA (0)
- NetBeans (0)
- Tomcat (11)
- WebLogic (1)
- Jboss (3)
- jetty (4)
- IIS (2)
- CVS/VSS (1)
- FTP (1)
- Windows/DOS (6)
- Linux/Unix (0)
- 软件建模 UML (0)
- Design Pattern & Thinking In Programming (10)
- 数据结构与算法 (12)
- 软件项目管理 (9)
- 行业应用解决方案 (3)
- 电脑软件与故障解决 (13)
- 编程语言 (1)
- 十万个为什么 (3)
- JBPM (2)
- sysbase (2)
- JDBC (8)
- Ant (2)
- Case-计算机辅助软件工程 (1)
- WebService (4)
- 浏览器 (1)
最新评论
-
gaoqiangjava:
同一楼,还请大手帮解决
JAVA读取word文件 -
hyl523:
// 判断数组中的第一个值是否未定义,如果未定义,便定义为空对 ...
javascript面向对象之二 命名空间 -
ping12132200:
ping12132200 写道我抱着个错不是因为:body标签 ...
extjs在IE报对象不支持此属性或方法 -
ping12132200:
我抱着个错不是因为:body标签内的第一个元素不能为文本tex ...
extjs在IE报对象不支持此属性或方法 -
fireinjava:
呀,不错,转走了,谢谢啦~
利用OpenOffice将word转换成PDF
由于公司要求做一棵关于公司员工选择的JS控件树,以前我们一直使用的都是dTree,由于没有采用AJAX,服务器在北京的话,使用起来超慢,于是上面要求修改此树,没想到任务落到了我的头上,没办法,硬着头皮做吧。正在我想有什么办法的时候,同事推介用用Xtree,于是我开始去学习这个东东,现在只能是基本应用,也想共享一下自己的学习必得。
1、下载:http://webfx.eae.net/dhtml/xtree2b/,里面包括了API,和DEMO,都是E文的,不过很容易看懂的。也可以直接在此网站点击相关DEMO看效果,很不错的。
2、就是使用了:可以直接打开下载解压后的文件中的相关DEMO看看效果。不过要注意,因为Xtree使用了AJAX,也使用到了XML,不知道什么原因,在IE里本地打开动态加载的树时会报JS错误,也不能正常打开树(通过服务器器不会出错),在FireFox中就能本地正常打开。
3、建立自己的树:Xtree有两种树,一种是静态树,一种是动态树。也可以将这两种树综合在一起使用。
大家要去参考一下网上的“分析xloadtree, 用ajax实现的动态目录树 ”这篇文章,写得不错。
(1)、静态树:
<html>
<head>
<title>测试树</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="css/xtree2.css">
<script type="text/javascript" src="js/xtree2.js"></script>
</head>
<body>
<script type="text/javascript">
var tree = new WebFXTree("测试树");//构造一棵树
for (var i = 0; i < 50; i++){
tree.add( new WebFXTreeItem("子结点 " + i) );//加入结点
}
tree.write();//输入树
</script>
<body>
</html>
(2)、动态树
var tree = new WebFXLoadTree("Hello World", "tree.xml");//打开根结点时,即从tree.xml文件中得到子树,也可是从服务器返回的XML流
tree.write();
(3)、两种树综合(从XML文件中读到子树结点):
var tree = new WebFXTree("Root");
tree.add(new WebFXTreeItem("Tree Item 1"));
//从tree.xml文件中动态加载子树,此处的XML文件可以是从服务器方返回来的XML流,
//如:tree.add(new WebFXLoadTreeItem("从服务器返回", "tree.jsp"));
tree.add(new WebFXLoadTreeItem("Tree Item 2", "tree.xml"));
tree.add(new WebFXTreeItem("Tree Item 4"));
tree.write();
tree.jsp文件如下:
<%@ page language="java" contentType="text/xml; charset=UTF-8" pageEncoding="UTF-8" %>
<%
response.setContentType("text/xml"); //这句必须要,只有设置了才是能XML流形式输出到客户端
out.println("<tree>");
out.println("<tree text=\"Load tree.xml\" src=\"http://webfx.eae.net/dhtml.htm?ddd=dd&dd=44\" />");
out.println("</tree>");
%>
4、tree.xml说明:
在动态生成一棵树时就会用到tree.xml文件,它是一个标准的XML文件。
它由一个外层的tree无属性元素,再内部包括多个子tree元素组成。
使用要注意的是:
如果要使用到中文或汉字的话,最好在文件开始处加入<?xml version="1.0" encoding="gb2312"?>否则会报乱码的JS错误。
另外就是XML文件中的特殊字符处理,这是使用这个很伤脑壳的地方,大家可以查考xtree所附带的TREE.XML文件,讲得很清楚。
<?xml version="1.0" encoding="gb2312"?>
<tree>
<tree text="Load "tree1.xml" (Should raise error)" src="tree1.xml" toolTip="Tool Tip"/>
<tree text="Load "tree2.xml" (Should raise error)" src="tree2.xml"
onerror="this.setText('Load "tree2.xml" (Raised error)')"/>
<tree text="Loaded Item 1" action="http://webfx.eae.net" />
<tree text="Loaded Item 2" expanded="true">
<tree text="Loaded Item 2.1" action="javascript:alert( tree.getSelected().getId() )" id="custom-id"/>
</tree>
<tree text="Loaded Item 3 (click to set src)" onaction="this.setSrc(this.getSrc() ? null : 'tree3.xml')"
onload="this.setText('Loaded Item 3 (changed onload)')"/>
<tree text="Load treeLARGE.xml" src="treeLARGE.xml" toolTip="XML file with 500 items"/>
<tree text="Deep nesting" src="nest.xml.pl" />
</tree>
其实xtree还提供了两个JS文件:xtree2.js,xloadtree2.js,里面包括了xtree的工作原理和相关方法及属性,
没事大家可以去看看,对操作树很有用处的,如:选择/得到指定结点的信息,得到/修改结点的图标等等。
我在使用时由于TOMCAT设置成不允许客户端缓存,感觉树大了就有点点慢,所以建议大家使用时允许客户端缓存,会快很多。
JS文件中的方法和属性,下一篇BLOG再写了。上班哟。
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/yuansicau/archive/2006/08/09/1041767.aspx
发表评论
-
javascript面向对象之一 类
2011-06-06 16:46 957javascript中的类多数是用 ... -
javascript面向对象之二 命名空间
2011-06-06 16:24 1197javascript中本没有命名空间的概念,但是要体现面向对象 ... -
网页特效代码
2011-06-01 16:38 10571. Flip! 一个 jQuery 插件 http://l ... -
js 操作select 大全
2010-11-04 13:49 7031判断select选项中 是否存在Value="pa ... -
Dialog 超酷js弹出层 完美兼容所有浏览器 华丽呈现超强功能
2010-11-03 13:05 1322http://www.iteye.com/topic/4800 ... -
IE6对display:table-row不支持
2010-11-02 19:34 1572http://topic.csdn.net/u/2010070 ... -
javascript中字符串转化为json对象
2010-07-30 09:11 1190http://www.json.org/js.html To ... -
IE6的base标签导致页面结构大混乱
2010-07-20 16:27 1047这是一个非常隐秘也是非常强大的bug,我真不知微软的IE开发人 ... -
汇总让IE6崩溃的几种方法
2010-07-20 16:25 1110经常遇到莫名其妙让IE6崩溃的事情。今天看到了一篇好文章,数字 ... -
JS添加事件处理函数
2010-07-08 23:41 1058作为一种事件驱动的编 ... -
js压缩工具
2010-07-04 23:50 1764javascriptcompressor.com ( ... -
Javascript 中 ShowModalDialog 的使用方法
2010-06-21 16:13 1398ShowModalDialog函数的功能 ... -
javascript实现上传图片前的预览效果
2010-06-16 20:35 1360<script>function yulan(){ ... -
重写window.confirm函数
2010-06-12 11:06 2282重写window.confirm函数为了让它能够默认选择取消按 ... -
改善window的alert提示信息框样式
2010-06-12 11:05 1427<input type="button&quo ... -
jsgraphics图形库
2010-05-10 22:58 1593http://www.walterzorn.com/jsgra ... -
JavaScript图形库jsGraphics
2010-05-10 22:57 2449JavaScript图形库Raphaël < JavaS ... -
千一JS控件
2010-05-10 22:31 812千一JS控件--滑块条 千一JS控件--进度条 千一JS控 ... -
JavaScript 生成曲线图
2010-05-10 22:28 1188引用方法 new gov.Graphic(par1,par2 ... -
腾讯检测 IP 省市的接口
2010-05-10 22:26 1426利用 JavaScript 调用。 <script ...
相关推荐
网上搜集的dtree、xtree和jquery-treeview构建树型菜单,供大家参考
LayUI树形下拉多选选择器扩展包
2010-5-29 修改增强 by newtower qq:30234923 , 为尊重作者, 仍用 xtree2 的名字, 实质已相当于 xtree 3.0 release 经过修改 和 充实demo范例, 已经完全满足商业化应用, 开源免费 目前实用效果最好的web树菜单, 可...
44. 相对dTree来说, xTree功能要多一些, 能动态增减树的节点 45. 引入树: 46. <!-- The xtree script file --> 47. <script src="xtree.js"></script> 48. <link type="text/css" rel="stylesheet" href="xtree....
学习和运用Xtree的资源包及使用实例及API,值得学习
xtree-树型控件 博文链接:https://seawavecau.iteye.com/blog/108475
xtree的菜单树,代码比较全,要的打包带走。
作废 xtree2b, 目前最好的, 速度快, 可焦点, ie, firefox 下都完美显示 经过整理
扩展xtree选择树
xtree1.1和例子 包含文件xloadtree.js,xmlextras.js,xtree.css,xtree.js 例子为WebProject,加入myEclipse可以运行
xtree一颗完整的树xtree+oracle+struts实现
WEB XTREE 树状菜单,嵌套在html标签中.
xtreedemo源代码,包含xtree.js等资源
xtree简明教程、例子
XTREE是一个基于AJAX实现的树形菜单。它的原理就是每次都只加载当前结点下的所有结点,而对开发人员来说,就是只需要按一定的格式,生成一段 XML代码。XTREE可以自己定制每个结点的ICON和链接。XTREE是基于对象的,...
XTREE_API
xtree开发包