xyTree4.12使用手册

最新推荐文章于 2024-05-04 14:33:04 发布

杰锋

最新推荐文章于 2024-05-04 14:33:04 发布

阅读量2.7k

点赞数

分类专栏：案例网页技巧插件应用文章标签： function string tree html ie stylesheet

案例同时被 3 个专栏收录

120 篇文章 0 订阅

订阅专栏

插件应用

72 篇文章 0 订阅

订阅专栏

网页技巧

53 篇文章 0 订阅

订阅专栏

看详细的例子

《xyTree4.12使用手册》

概述：

为了在HTML页面中使用树，我写了这几个js文件，参照了国外网站的xTree，图片也基本是用它的，生成的DOM结构也和它几乎一样，只是代码彻底的不同。
载入文件的图片loading.gif从流行框架ext拷贝而来
这个树的组件主要有：
6个js程序文件
1个css文件
1个images文件夹，内有几张图片
用户自己的数据文件，可以搞成js文件形式，也可以在java程序中写好，传给jsp。

主要不同点：

    我有复选框。
    xTree是在初始化树时，就把DOM结构全部生成，(所以初始化慢，点击节点快)。
    xyTree是当点击加号时，生成DOM结构，点击减号就隐藏，再点击加号时只是简单的去掉隐藏，所有如某个节点下有多个节点，第一次点击会稍慢些。(所以初始化快，点击节点稍慢，但可接收)

另外：

在IE6.0和FireFox2.0测试通过，一个字，快！
请仔细看文档最后的版本更新说明
如想使用，只需把xyTree文件夹拷贝出来即可，数据文件要自己写，或用java/jsp生成
要简单，没有运行时删除节点的方法，但有了动态添加节点的功能
不能拖动
点击节点会有反应，可以自己写函数
后缀是Normal的类用于普通树，另外3个用于复选框树
如果某个页面要同时出现这两种树，就加载6个js文件，否则加载3个
样式表xtree.css通用
6个类之间没有继承关系，其实不好，有组合关系，下一个版本就使用继承
基于对象的使用方式，可以在页面中放置任意棵树，互相不会受影响。
完全开源
使用命名空间xyTree
只要发挥想象力，还可以有很多方法可以添加，主要看业务需求
这一版无复选框树有部分功能仍未实现，下一版本4.2会使用继承的语法统统实现
关于动态添加节点的说明参见DivTree

类一览

DivTreeNormal
TreeNormal
NodeNormal

DivTree
Tree
Node

类 DivTreeNormal

DivTreeNormal代表普通树。(有部分功能暂未实现，下一版补齐)

在数据js文件中添加节点时必须按顺序，以下代码会产生错误：

node1 = new xyTree.Node('下关分局');
node1.id = 1;
tree1.add(node1);

node222 = new xyTree.Node('玄武分局');
node222.id = 3;
tree1.add(node222);

node2 = new xyTree.Node('下关派出所1');
node2.id = 2;
node1.add(node2);

以下代码是正确的：

node1 = new xyTree.Node('下关分局');
node1.id = 1;
tree1.add(node1);

node2 = new xyTree.Node('下关派出所1');
node2.id = 2;
node1.add(node2);

node222 = new xyTree.Node('玄武分局');
node222.id = 3;
tree1.add(node222);

1)必须以深度遍历的方式初始化树的所有节点
2)如想修改单击节点的反应要自己写回调函数，见HTML示例
3)点击根节点图标，会收缩，再点击，展开
4)根节点图片和一般节点的缺省图片都可以换，如果不喜欢那个文件夹的话，在本类中修改全局变量xyTree.TreeConfig即可
5)也可以用img属性替节点指定不同的图片
下面给出了一个最简单的例子：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>xyTree</title>
<link type="text/css" rel="stylesheet" href="xyTree/xtree.css" /> 
<script src="xyTree/TreeNormal.js"></script>
<script src="xyTree/NodeNormal.js"></script>
<script src="xyTree/DivTreeNormal.js"></script>
<script src="data_example3.js"></script>
<script>
function init(){
  document.getElementById('ceshi3').appendChild(Content.div);
  Content.init();
}
window.onload = init; 
</script>
</head>

<body>
<div id="ceshi3"></div>
</body>
</html>

另请参见：

DivTree

域和方法	返回值	参数	描述
DivTreeNormal(String name)	构造方法，返回一个DivTreeNormal对象	name:根节点名称	建立一个普通树对象。
DivTreeNormal(String name,String img)	构造方法，返回一个DivTreeNormal对象	name:根节点名称 img:用户指定的根节点图标	建立一个普通树对象。并指定了根节点图标
tree	TreeNormal	(none)	只读域，获得树的包含所有节点的对象
div	HTMLElement	(none)	只读域，获得树的div对象
init()	(none)	(none)	把树的第1级节点显示出来，只用于初始化时
init(Function funa,Function funb)	(none)	funa:单击节点的回调函数，funb:单击根节点的回调函数	把树的第1级节点显示出来，只用于初始化时，并指定单击(根)节点的回调函数
add(NodeNormal node)	(none)	node:待添加的1级节点	给树添加第一级节点
defaultClickRootNode()	(none)	(none)	默认的单击根节点的响应方法
defaultClickNode(Node node)	(none)	node:被点击的节点	默认的单击节点的响应方法
hideTreeBody()	(none)	(none)	隐藏树身
showTreeBody()	(none)	(none)	显示树身

类 TreeNormal

TreeNormal代表普通树的数据结构，可以获得数组形式的所有节点和树形式的所有节点，可以获得包含自己的树对象。

另请参见：

DivTreeNormal
NodeNormal

域和方法	返回值	参数	描述
treename	Stirng	(none)	只读域，获得树的根节点名称
maxlevel	int	(none)	只读域，获得树的最大级别，就是层数
root	NodeNormal	(none)	只读域，获得树的根节点，然后可以获得所有节点
divtree	DivTreeNormal	(none)	只读域，获得树
treeArray	Array:NodeNormal	(none)	只读域，获得树所有节点对应的一个简单的数组

类 NodeNormal

NodeNormal代表普通节点。

关于给节点加属性：
如想要加属性name2，
可以在js数据文件中设置相应的属性，如下
node1 = new xyTree.Node('下关分局');
node1.id = 1;
node1.name2 = '分局';
tree1.add(node1);
就可以了，当然，id属性不是必须的.
还有，自己设的属性名不能是parent,tree等下面表中的属性

如果愿意，可以给节点指定不同图标，如下,也是在js数据文件中。
node1 = new xyTree.Node('下关分局');
node1.img = "images/1.gif";
通常情况下，要指定就全指定，要么就都不指定。

另请参见：

DivTreeNormal
TreeNormal

域和方法	返回值	参数	描述
name	Stirng	(none)	只读域，节点名称，也就是在页面的显示
img	Stirng	(none)	可读写域，节点的图标路径，初始化节点时指定或者不指定
parent	NodeNormal	(none)	只读域，获得节点的父节点，只有根节点的该属性值为null
previous	NodeNormal	(none)	只读域，获得节点的前一个节点
next	NodeNormal	(none)	只读域，获得节点的下一个节点
child	Array	(none)	只读域，获得节点的子节点，数组成员类型还是NodeNormal
level	int	(none)	只读域，获得节点的级别，根节点为0
tree	TreeNormal	(none)	只读域，获得节点的树对象，如要获得最外层的树则使用node.tree.divtree
add(NodeNormal node)	(none)	node:待添加的节点	给节点添加子节点

类 DivTree

DivTree代表复选框树。

使用和DivTreeNormal一样，只是方法多了几个。

脚本是一种很自由的东西，有些功能在DivTree类中实现，有些功能在Node类中实现，还有些功能在两个类里面都实现，不过是一个类的方法里只有一句话，调用另一个类的方法。
init()方法的实现和以前不同了，有默认的行为
addDynamic()方法注意要添加子节点的节点自己必须已经被加载到树中，
不能这样：定义两个节点，并把一个定义为另一个的父节点，再把父节点加载到树中
应该这样：定义一个节点，加载到树中，再定义一个节点，加载到刚才节点下面
最简单省事的办法，我建议在用户访问页面时一次性加载所有节点，或干脆和我一样写成js数据文件，而不要动态添加节点。
如果仍然希望在用户点击节点时通过ajax动态添加节点，这个应该还是可以的，不过要：
(1) 在从数据库读取每个节点时，同时获取它有无子节点，并保存在客户端的树节点的自定义属性中
(2) 自己写树的点击节点的事件，脚本判断这个节点是否有子节点，（通过自定义属性）
(2-1)无，什么都不做
(2-2)有，当前客户端树的被点击节点有子节点吗？
(2-2-1)有则直接显示(调用树的expandNode()方法，传的参数应该是任意一个子节点)，或什么都不做
(2-2-2)无则用ajax访问数据库，得到节点并生成Node对象，再调用父节点的addDynamic()方法动态添加并会自动显示。

另请参见：

DivTreeNormal

域和方法	返回值	参数	描述
DivTree(String name)	构造方法，返回一个xyTree.DivTree对象	name:根节点名称	建立一个复选框树对象。
DivTree(String name,String img)	构造方法，返回一个xyTree.DivTree对象	name:根节点名称 img:用户指定的根节点图标	建立一个复选框树对象。并指定了根节点图标从以下版本开始：4.1
tree	xyTree.Tree	(none)	只读域，获得树的节点数组对象
div	HTMLElement:div	(none)	只读域，获得树的DOM对象
add(xyTree.Node node)	(none)	node:待添加的1级节点	给树添加第一级节点
addDynamic(xyTree.Node node)	(none)	node:动态添加的一级节点	给树动态添加一级节点，页面上立刻显示,背景渐变从以下版本开始：4.1
addDynamic(Array:xyTree.Node arr)	(none)	arr:动态添加的一级节点数组	给树动态添加一批一级节点，页面上立刻显示,背景渐变从以下版本开始：4.1
expandNode(xyTree.Node node)	(none)	node:将要显示的节点	树显示指定的节点,有默认的背景渐变时间是300 从以下版本开始：4.1
expandNode(xyTree.Node node,int ms)	(none)	node:将要显示的节点，ms:渐变的毫秒间隔	树显示指定的节点，背景渐变从以下版本开始：4.1
expandCheckedNode(xyTree.Node node)	(none)	node:将要显示的节点	树显示指定的节点并选中，背景渐变，有默认的背景渐变时间是300 从以下版本开始：4.1
expandCheckedNode(xyTree.Node node,int ms)	(none)	node:将要显示的节点，ms:渐变的毫秒间隔	树显示指定的节点并选中，背景渐变从以下版本开始：4.1
findOneNodeByName(String name)	xyTree.Node	name:想找的节点名称	根据名称得到一个节点，如果树有重复名称的节点，则只返回先加载到树里的那一个。从以下版本开始：4.1
findOneNodeById(String \| int id )	xyTree.Node	id:想找的节点id，是用户自己定义的	根据id寻找一个节点，用户必须给每个节点设id属性，并保证它的唯一性从以下版本开始：4.1
getNodes()	Array:xyTree.Node	(none)	返回节点数组，不含子节点，较常用
getNodesAll()	Array:xyTree.Node	(none)	返回节点数组，全部
getNodesMoji()	Array:xyTree.Node	(none)	返回节点数组，末级节点，不一定最后一层
getNodesDisplay()	Array:xyTree.Node	(none)	返回节点数组，正在显示的最末级节点。也就是说，看不到的节点即便它被选中了，也不会返回从以下版本开始：4.11
hideTreeBody()	(none)	(none)	隐藏树身
init()	(none)	(none)	把树的第1级节点显示出来，只用于初始化时。有默认的点击节点的方法，默认为点击复选框。通常状况下用户会在网页初始化程序中调用
init(Function funa,Function funb)	(none)	funa:单击节点的回调函数，funb:单击根节点的回调函数	把树的第1级节点显示出来，只用于初始化时，并指定单击(根)节点的回调函数通常状况下用户会在网页初始化程序中调用从以下版本开始：4.1
initClearAllCheckBox()	(none)	(none)	清除节点的选中状态从以下版本开始：4.1
initTreeForm()	(none)	(none)	树的形状复位从以下版本开始：4.1
initReset()	(none)	(none)	树的完全复位，等同于最开始加载状态，实际上是连续执行了上面两个方法从以下版本开始：4.1
isSelectAll()	boolean	(none)	所有节点是否都被选中，是则true
showTreeBody()	(none)	(none)	显示树身

类 Tree

Tree代表复选框树的数据结构，可以获得数组形式的所有节点和树形式的所有节点，可以获得包含自己的树对象。

公共属性和TreeNormal一样，

另请参见：

DivTree
Node

域和方法	返回值	参数	描述
treename	Stirng	(none)	只读域，获得树的根节点名称
maxlevel	int	(none)	只读域，获得树的最大级别，就是层数
root	xyTree.Node	(none)	只读域，获得树的根节点，然后可以获得所有节点
divtree	xyTree.DivTree	(none)	只读域，获得树
treeArray	Array:xyTree.Node	(none)	只读域，获得树所有节点对应的一个简单的数组

类 Node

Node代表复选框节点。

关于给节点加属性：看NodeNormal类的说明
其实与NodeNormal类差别还是不小的，但是公共属性一样。

动态添加节点的注意点同DivTree上
颜色渐变方法slowChange()最后会强制节点文字的背景变成白色,可能有的用户的树的背景色不是白色的，
方法是:
在树初始化后，加一句：xyTree.CONSTANT.color = ['#ffff00','#ffff33','#ffff66','#ffff99','#ffffcc','#ffffff']; 把最后一项改成自己的背景色即可。
如果觉得颜色渐变方法时间太长的话，方法为
在树初始化后，加一句：xyTree.CONSTANT.timenum = 100; 把最后一项改成自己需要的时间即可。单位：毫秒

另请参见：

DivTree
Tree

域和方法	返回值	参数	描述
name	Stirng	(none)	只读域，节点名称，也就是在页面的显示
img	Stirng	(none)	可读写域，节点的图标路径，初始化节点时指定或者不指定
parent	xyTree.Node	(none)	只读域，获得节点的父节点，只有根节点的该属性值为null
previous	xyTree.Node	(none)	只读域，获得节点的前一个节点
next	xyTree.Node	(none)	只读域，获得节点的下一个节点
child	Array:xyTree.Node	(none)	只读域，获得节点的子节点，数组成员类型还是xyTree.Node
level	int	(none)	只读域，获得节点的级别，根节点为0
tree	xyTree.Tree	(none)	只读域，获得节点的树对象，如要获得最外层的树则使用node.tree.divtree
img	String	(none)	可读写域，用来设置节点的图片url 从以下版本开始：4.1
add(xyTree.Node node)	(none)	node:待添加的节点	给节点添加子节点
addDynamic(xyTree.Node node)	(none)	node:动态添加的节点	给节点动态添加子节点从以下版本开始：4.1
addDynamic(Array:xyTree.Node arr)	(none)	arr:动态添加的节点数组	给节点批量的动态添加子节点从以下版本开始：4.1
addDynamic(Array:xyTree.Node arr)	(none)	arr:动态添加的节点数组	给节点批量的动态添加子节点从以下版本开始：4.1
loadingGif()	(none)	(none)	使节点的文件夹图标显示为调用的样子从以下版本开始：4.12
loadingGifRenew()	(none)	(none)	使节点的文件夹图标显示从调用的样子恢复成正常模样从以下版本开始：4.12
slowChange()	(none)	(none)	节点背景色渐变，默认300毫秒从以下版本开始：4.1
slowChange(int ms)	(none)	ms:渐变的ms间隔	节点背景色渐变从以下版本开始：4.1
expand()	(none)	(none)	把自己显示出来，在DivTree类中有类似方法，有渐变从以下版本开始：4.1
expandChecked()	(none)	(none)	把自己显示出来并选中，在DivTree类中有类似方法，有渐变从以下版本开始：4.1
getNodeLink()	Array:xyTree.Node	(none)	返回从根节点到自己的节点链，0是根节点，最后是自己从以下版本开始：4.1

更新说明：

4.12版更新说明：(2007/07/27)
(1)修正重要bug：在IE浏览器中，如果设置
   IE->工具->Internet选项->常规->设置->每次访问此页时检查，
   那么图片会莫名其妙消失，现已更正。
   原因：
   单击链接元素会有奇怪的特征，图片会消失
   解决方案：
   (1-1)去除html代码和javascript代码中的href属性，不用。
   (1-2)不知为何，样式中鼠标移上的样式没有显示。
   (1-3)使用万能的javascript，定义如下，样式当然随便：
     a.onmouseover = function (){this.style.color='blue';}
     a.onmouseout  = function (){this.style.color='black';}
(2)添加Node类的方法loadingGif()和loadingGifRenew()方法
   会使节点的文件夹图标显示为调用的样子，另一个恢复
(3)写了一个模拟ajax的示例，有些不满意，主要是
   其实节点是有子节点的，可是第一次显示出来时是个文件图标而非文件夹图标，
   加号也是的，将来可能会写一个AjaxTreeNormal类和AjaxTree类。
   难道要使用多重继承吗？不敢想象。
(4)小插曲：火狐中允许非标准数组写法[1,3,77,]，而IE中只有标准数组写法[1,3,77]      
   另：火狐中鼠标的指针样式cursor好像可选值要少一些，IE多一些
(5)这一版更新的文件很多，不再列举   
   

(2)本来说这一版要实现继承的，但未实现。为了不食言，定义为4.11版。
(3)关于IE显示图片丢失的情况，确保IE->工具->Internet选项->常规->
   设置->自动，情况就好多了。这也是IE默认配置。
   如果设置为“每次访问此页时检查”(显然是Web程序员的设置)会丢失图片，但在图片处右击鼠标，
   选择“显示图片”，倒也能显示，奇怪的IE。   

4.11版更新说明：(2007/07/21)
(1)添加DivTree树的第4个返回节点的函数getNodesDisplay，
   意思是根据当前树的展开形状返回最末级节点，这个最末级节点是眼睛看到的，
   不一定是真正的叶节点。
(2)本来说这一版要实现继承的，但未实现。为了不食言，定义为4.11版。
(3)关于IE显示图片丢失的情况，确保IE->工具->Internet选项->常规->
   设置->自动，情况就好多了。这也是IE默认配置。
   如果设置为“每次访问此页时检查”(显然是Web程序员的设置)会丢失图片，但在图片处右击鼠标，
   选择“显示图片”，倒也能显示，奇怪的IE。   

4.1版更新说明：(2007/06/16)
(1)使用方法大改变，现在用户只需把xyTree文件夹和html文件放到一起就可以了，
   目录结构更加清晰，更像是一个组件包了。
(2)添加了命名空间xyTree，为此修改了所有的js文件和css文件，还包括数据js文件.
   所以原先的用户需要替换程序js文件和css文件，还修改数据js文件，是有点麻烦。
(3)原先在html文件中是：
	document.getElementById('ceshi1').appendChild(treeXiaqu.div);
	treeXiaqu.init(); //这句话不会象前一版本默认有对话框弹出
   现在默认是点击复选框或文件夹（视哪种树而定，提供缺省单击的行为，见示例5和示例6），
   如果用户不满意，可以自己写回调函数，见下面的说明(8)
(4)去除了一个小bug，如果用户仍然想使用4.0版的树，可以，但必须自己改DivTree.js 
    第326行原先是 
    this.div.firstChild.firstChild.src = TreeConfigNormal.rootIcon; 
    应改成: 
    this.div.firstChild.firstChild.src = TreeConfig.rootIcon;
    第331行原先是 
    this.div.firstChild.firstChild.src = TreeConfigNormal.openRootIcon; 
    应改成: 
    this.div.firstChild.firstChild.src = TreeConfig.openRootIcon;
(5) 现在可以对节点方便的指定图片，如果不指定，就使用
    TreeConfig或TreeConfigNormal的缺省图片。
    不管哪种树，想指定根节点就在树(在js数据文件中)的构造方法的第二个参数填上图片路径，
    想指定节点的图标就在初始化节点时(在js数据文件中)加img属性，见文档中的说明。
    还可以改样式表第21行的样式，这个样式决定了指定的图片样式，而不会影响缺省图片的样式。
(6) 添加了一个复选框树的方法，initClearAllCheckBox(),
    可以清空树的所有被选中的复选框，树的形状不变。
(7) 添加了一个复选框树的方法，initTreeForm(),
    可以把树的节点展开形状恢复到初始状态，但节点的选中情况不变
(8) 添加了一个复选框树的方法，initReset(),
    可以清空树的所有被选中的复选框，并且把树的节点展开形状恢复到初始状态。
(9) 添加了我刚刚学会的回调函数的用法，           
    回调函数的用法是这样的：
    程序库中（就是我写的程序）
    function a(funb){
      //执行一些过程，结果保存在result变量中
      var result = /* 结果 */;
      funb(result);    //funb是个您写的函数的名称
    }
    而您写的程序（html或js）中有这个函数
    function funbbb(resu){
      alert(resu);
      /*在这里就得到了结果，可能是对象或数值，并可以随便使用*/
    }
    您这样调程序库
    a(funbbb);
    上面这句的意思是先到程序库中执行一个函数，然后，自动
    返回到您写的函数中，还能从参数中得到结果。参数的个数最好与库的开发者指定的个数相同。
    回调函数的好处是：隔离了库和用户，现在您不必修改程序库也可以自由使用（注意作用域）。
    当然您要改了再用，也没关系，改吧。
    这我这里，回调函数的确是一种“漂亮的解决方案”，
    主要是用户的html中树的初始化方法先暂时有两种。
    第一种：treeXiaqu.init();//提供默认的行为
    第二种：treeXiaqu.init(funa,funb)//见示例和文档
(10)可以动态添加节点了，不能删除，也不打算做，又开始跟刚开始写这个程序时一样鼓捣竖线，加号，文件夹
(11)节点的颜色渐变，
(12)还有一些琐碎方法不再列举了

    
    
    

4.0版更新说明：(2007/05/16)
1）在IE6.0和FireFox2.0上测试通过，其实就css文件里多了一句话
2）专门加了一个API使用文档。
3）为了在同一个文件中混合使用两种树，改类名了，
4）添加了隐藏树身和显示树身的方法

3.1版更新说明
(1)图片改成gif
(2)对对象的命名有了好方法。

3.0版更新说明：
新增方法：
(1)树的方法getNodesAll(),返回一个数组，所有被选中的节点（当然不含半灰色的节点，下同）
(2)树的方法getNodesMoji(),返回一个数组，末级所有被选中的节点，注意不一定是最后一层。
(3)把单击一般节点和根节点的方法放到DivTree.js文件的最后，方便使用者修改。
(4)单击一般节点的方法：clickNode()
(5)单击根节点的方法:clickRootNode()，一般用户都要修改
(6)又把单击根节点的图标的方式修改了，
   改成和最开始一样，点一下，其余节点消失，再点出现。
(7)试图用document.createDocumentFragment()优化代码，不过看起来没什么效果。

2007/02/09
新加方法判断是否根节点被选中
isSelectAll();
true表示被选中
false表示不被选中


 
 xyTree4.11.zip (82.7 KB) 
描述: 同上一版相比改动很小。 
下载次数: 778 
 
 xyTree4.12.zip (86.3 KB) 
描述: 有模拟ajax动态加载节点的例子，很酷哦！ 
下载次数: 1965

杰锋

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
xyTree4.12使用手册

看详细的例子《xyTree4.12使用手册》概述：为了在HTML页面中使用树，我写了这几个js文件，参照了国外网站的xTree，图片也基本是用它的，生成的DOM结构也和它几乎一样，只是代码彻底的不同。载入文件的图片loading.gif从流行框架ext拷贝而来这个树的组件主要有： 6个js程序文件 1个css文件 1个images文件夹，内有几张图片用户自己的数据文件，可以搞成js文件形式，也可以在java程序中写好，传给jsp。主要不同点：我有复选框。 xTree是在初始化树
复制链接

扫一扫