Javascript脚本树开发详解（一）详细设计文档

设计优点

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" />&nbsp;产品目录</label>
        </div>
        <div id="ParentDiv_0-0-0" childNum="1">
            <div id="0-0-0" style="border-width:thin;margin-left:0px;" class="" onclick="MenuActiveEvent(this)" opentag="open" name="蔬菜">
                <label id="label_0-0-0" style="cursor:default;">&nbsp;&nbsp;<img id="img_0-0-0" alt="" style="cursor:default;" src="imgs/folder-opened.gif" />&nbsp;蔬菜</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对象