moonpiazza的专栏

用户操作

[留言] [发消息] [加为好友]

订阅我的博客

[编辑]moonpiazza的公告

[编辑]文章分类

存档

xml应用(3):附带选择功能的树的实现 XMLSelTree(V1.0) 收藏

XMLSelTree(V1.0)
演示：http://61.163.246.155/pro/XMLSelTree/

示例图：

一：功能简介：

客户端环境

IE5.x

IE6

无限级树结构

不限制，理论上为树的深度可以无限

数据加载:a.一次加载 b.动态加载 c. a+b

是否只显示树的一个枝节

是否自动展开枝节下第一个叶

是否每次重新加载子节点

节点图标有节点属性动态指定

当前节点图标改变，父系节点图标改变

当前节点高亮显示

选择节点所包含的数据子集

子集数据:选择节点数据数据子集时动态加载

子节点选择状态,自动跟随父节点的选择状态

当所有子节点全部选中，所有父系节点自动选中

当子节点有一个未选中，所有父系节点自动取消选中状态

当节点获得焦点，是否同时改变节点的选择状态

自由指定节点数据子集中，数据的分隔符

二：实现过程

感谢以下参考程序的作者：
MSDN: Grant Harris, Bryn Waibel
http://msdn.microsoft.com/library/shared/deeptree/htc/deeptree.htc
CSDN: ChinaOk
http://www.ChinaOk.net/***(现在访问不到了 :( )

关键方法：
1. 设定全局对象，获得当前节点
2. 使用xmldom动态加载节点数据(xml格式字符串)
3. 根据客户端IE版本不同，调用不同版本xsl文件 4. 使用xsl转化xml数据，获得节点相关属性
5. 依照节点层次结构，获得当前节点的父系节点与子系节点
6. 依照节点层次关系，显示为树状结构
7. 同步(异步)当前节点及其父系节点,子系节点的选择状态

三：使用说明：由于水平有限，有不足和需要改进的地方，请多多指点.

说明
1. 枝节点:有子节点的节点
2. 叶节点:没有有子节点的节点
3. 节点属性根据需要选择指定节点属性
4. 节点属性区分大小写,注意!

XML数据格式

<TreeNode
Title="XML/SOAP"	节点标题(必须)	必须
Caption="XML/SOAP 描述"	节点描述	可选
Href="http://*...*/"	节点链接	可选
Target="frameName"	链接目标窗口名字	可选
NodeImgSrc="*/*.gif"	节点图标(一般为*0.gif,1.gif,2.gif,*3.gif),参看下面说明	可选
NodeXMLSrc="*/*.xml"	通过URL动态在加载子节点数据,可用程序动态生成xml数据(如***.asp)	可选
CheckData="moonpiazza"	子节点数据(选择数据)，如：例子中的用户名	可选
CheckDataSrc="*/*.asp"	过URL动态在加载子节点数据(选择数据),获得字符串,如例子中的用户数据	可选

XMLSelTree 配置
1. 参看js文件(treeRes/XMLSelTree.js)中的注释
2. 全局变量:m_oConfig;
3. 函数:TreeConfig;
图标
1. 枝节点图标:treeRes/images/NodeImg1.gif(子节点展开前)
2. 枝节点图标:treeRes/images/NodeImg2.gif(子节点展开后)
3. 叶节点图标:treeRes/images/NodeImg0.gif
4. 叶节点图标:treeRes/images/NodeImg3.gif(点击后,可选)
5. 根据需要修改XMLSelTree.xsl(或XMLSelTreeforIE5.xsl)中的图标相对路径,默认图标