xtree的基本应用---入门级

liss

浏览: 842988 次
性别:
来自: 广州

最近访客更多访客>>

akacd

石不易

844700118

Agy0514

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

应用服务器 XML Ajax JavaScript CSS

由于公司要求做一棵关于公司员工选择的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 中 ShowModalDialog 的使用方 ... | java反射中Method类invoke方法的用法

2010-06-21 16:08
浏览 1229
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论