设计优点
1. 针对树形节点的拖动、顺序调整等事件表现敏捷,其处理时间主要与移动的父节点的子节点容量成正比,保证了在正常使用过程中的响应速度
2. 该树形采取了及时处理变更、改动的机制,保证了页面元素与Xml数据内容的同步变更,并于Xml数据导入前进行数据结构测试,于导出Xml数据前进行Id重置及子节点顺序调整操作,保证了Xml数据前后标准的一致性,也因此避免了在变更过程中的标准变更和排序的问题
3. 该树形的Xml结构简洁,采用单层节点结构,通过Id来保证节点前后的顺序,并支持单树形与多树形展示方案;与此同时,节点必要属性被缩减到3个,即:Id、ParentId和Type,并支持扩展属性,详情见后
4. 该树形功能丰富,包括节点拖动、文件节点上下移动、文件夹节点导入导出等固有功能,同时针对个性开发编写了一部分API函数,包括对节点的添加、修改和删除等操作,同时可以设置树形的多种属性,其中最重要的包括扩展属性的设置等
支持的功能
1. 树形展现
2. 节点随意拖动事件
3. 文件节点在父目录中上下位置的调整、文件夹节点导入子节点或导出子节点的功能
4. 支持Xml文件或Xml字符串格式的数据
5. 树形可配属性包括:设置Xml文件路径或Xml字符串;设置扩展属性;设置树形展现的容器;
6. 树形提供的对外API还包括:对节点及其属性的添加、修改和删除功能、获取错误信息、检测Xml数据是否符合树形标准、获取变更后的Xml数据等方法
设计结构
<div id="showTreeDiv" style="border-width:thin;margin-left:0px;">
<div id="ParentDiv_0-0" childNum="2">
<div id="0-0" style="border-width:thin;margin-left:0px;" class="" opentag="open" name="产品目录">
<label id="label_0-0" style="cursor:default;"><img id="img_0-0" alt="" src="imgs/folder-opened.gif" /> 产品目录</label>
</div>
<div id="ParentDiv_0-0-0" childNum="1">
<div id="0-0-0" style="border-width:thin;margin-left:0px;" class="" οnclick="MenuActiveEvent(this)" opentag="open" name="蔬菜">
<label id="label_0-0-0" style="cursor:default;"> <img id="img_0-0-0" alt="" style="cursor:default;" src="imgs/folder-opened.gif" /> 蔬菜</label>
</div>
</div>
</div>
</div>
Xml数据结构
<?xml version="1.0" encoding="utf-8"?>
<AllNodes>
<NodeGroupList Id="0">
<!--
Id:节点唯一的标识,反应节点的层次关系,跟目录
ParentId:节点父节点的Id
Name:节点的显示名称
Type:节点类型 floder/file
-->
<Node Id="0-0" ParentId="0" Name="产品目录" Type="floder"></Node>
<Node Id="0-0-0" ParentId="0-0" Name="蔬菜" Type="floder"></Node>
<Node Id="0-0-0-0" ParentId="0-0-0" Name="黄瓜" Type="file"></Node>
<Node Id="0-0-0-1" ParentId="0-0-0" Name="西红柿" Type="file"></Node>
<Node Id="0-0-1" ParentId="0-0" Name="水果" Type="floder"></Node>
<Node Id="0-0-1-0" ParentId="0-0-1" Name="苹果" Type="floder"></Node>
<Node Id="0-0-1-0-0" ParentId="0-0-1-0" Name="青苹果" Type="file"></Node>
<Node Id="0-0-1-0-1" ParentId="0-0-1-0" Name="红苹果" Type="file"></Node>
<Node Id="0-0-1-1" ParentId="0-0-1" Name="橙子" Type="file"></Node>
</NodeGroupList>
<!--如果有多个结点组,则并列列出-->
<!--
<NodeGroupList Id="1">
<Node Id="1-0" Name="产品目录" Type="floder"></Node>
</NodeGroupList>
-->
</AllNodes>
对外暴露接口
序号 | 函数 | 函数功能 |
1 | SetXmlFilePath(strXmlFilePath) | 设置脚本树Xml文件的路径 |
2 | SetExParameterToTree(strExParameterString) | 设置扩展属性: strExParameterString 各属性间使用英文逗号进行分隔 |
3 | SetTreeContainerId(strId) | 设置脚本树显示容器 |
4 | SetXmlString(strXmlString) | 设置脚本树Xml字符串 |
5 | ShowJavascriptTree() | 调用内部展示脚本树开关 |
6 | GetLatestXmlDocument() | 获取移动后的脚本树的XmlDocument |
7 | AddNodeToTree(strParentId, strName, strType, strExParameter) | 添加file节点或floder节点: strParentId 要添加到的floder的Id strName 节点显示名称 strType 节点的类型:file或者floder |
8 | RemoveNodeFromTree(strId) | 删除file节点或者floder节点 |
9 | ChangertNodeInTree(strId, strName, strExParameter) | 修改file或者floder节点的名称或者扩展字段 |
10 | CheckXmlContent() | 检测Xml文件或者Xml字符串是否符合脚本树要求(标准格式) |
11 | GetErrorInfo() | 获取错误信息 |
12 | GetCurrentSelectDiv() | 获得当前选中的Div对象 |