动态载入数据的无刷新TreeView控件(1)

    上次我介绍过，使用popup窗口来制作无限级菜单。由于当时对于JavaScript的了解比较有限，加之又把主要的精力都focus到popup窗口本身的一些问题上去了，所以关于菜单的设计中还是有很多不合理的地方。后来因为需要又作了一个TreeView控件，不过由于需求变化大，被改得来结构相当的乱了，于是抽空重构一下，并把一些设计步骤记录下来，欢迎大家讨论并提意见。

    虽然使用脚本制作的TreeView已经有很多了，不过对于做自己的产品来说，要使用现成的控件是很困难的。首先要能免费授权，其次需要有自己所期望的所有功能，三需要代码清晰到能很快理解并修改。免费可能是最简的要求了，而功能和可修改性却就不容易了，所以最后自己实现一个反而更省事。微软的Microsoft.Web控件包里有个强大的TreeView，不过遗憾的是那个是后台数据邦定的，Expand或Collapse节点需要doPostBack操作:(。

    既然开始都说了，现成的TreeView很多了，那么这个TreeView就必须站在巨人的肩膀上了。首先图标资源就不用自己弄了，从r.a.d.treeview上弄了一套下来(下载它的一个试用版本，里面有所有的图标，不用在网页里去弄)，本来这玩意儿到处都有，只是它太全了，足有10多套各种风格的。

    制作这个菜单，最重要的有两点，数据结构和UI表现(当然还有操作，不过这是以前者为基础的)。TreeView的数据结构，其实和Menu那个非常的相似，一个Tree类，一个TreeNode类，然后相互组合嵌套就可以了。只是在显示上需要有个合理的子树缩进，略显比菜单麻烦，因为菜单都是相对Parent菜单条目定位。UI表现使用Table元素来做为菜单整体，每一行TR元素作为一个菜单条目。这都不是难点，而最困难的是子树的层次缩进，从目前我所看到的树控件来讲，都是使用类似递归的方式来生成树的层次线条。而由于我前不久做过一个Menu控件，所以非常希望能像Menu那样，子菜单缩紧只用关心父菜单条目，那样实现起来就简洁多了，于是我设计了这样一种新的菜单UI元素的摆放层次。
  
    R.A.D树控件是使用DIV元素来生成树的UI表现，通过嵌套DIV来实现子树，不过子树缩进做的比较郁闷，居然是用一大堆的图片来当作SPACE(因为用别的东西不好控制宽度)。我实现的TreeView中，每个Tree层次是完整独立的，子树作为一个整体潜入父TreeNode，缩进完全由菜单层次自动维护，就是说每个菜单项生成相同的HTML代码。

    Tree类的结构：

 function Tree(attribute, style)
 {
    this.Extends(CollectionBase);
    this.m_Nodes = this.m_InnerArray;

    this.m_ParentNode = null;
    this.m_ActiveNode = null;
    this.m_Element = null;
    this.m_TreeType = TreeType.Normal;
    this.m_TreeLevel = 0;
    this.m_IsEventAttached = false;
    this.m_Id = __GlobalTreeCache__.NewId();
    __GlobalTreeCache__[this.m_Id] = this;
   
    this.m_Attributes = attribute ? attribute : new TreeAttribute();
    this.m_Styles = style ? style : new TreeStyle();   

    this.InsertAt = function(node, index)
    {
         this.base.InsertAt.Call(this, node, index);
         node.m_Tree = this;  
    };
       
    this.toString = function()
    {
        return '[class Tree]';
    };  
 }

    这个结构中，m_TreeLevel是树的层次数，本来用我这种表格嵌套结构，不需要知道树中的层次也是可以的，可是如果不知道当前树的层次是不是Root层，不能正确地生成节点前的操作提示图标。__GlobalTreeCache__是一个全局Hash Table，原理可以参看Menu的实现第三节，作用是为了快速检索TreeNode，而避免每次都去遍历整棵树。m_Attributes & m_Styles是设置TreeView属性和风格的类，在一个TreeView中只分别保持一份实例。

    TreeNodeBase类的结构(TreeNode的所有和UI相关的内容，在TreeNodeBase中生成)：

 function TreeNodeBase(text, action, icon, subtree)
 {
    this.m_Text = text;
    this.m_Tooltip = ''; 
    this.m_Atction = action;
    if ( subtree )
    {
        subtree.m_ParentNode = this;
        this.m_ChildTree = subtree;
    }
    this.m_Tree = null; 
    this.m_Icon = null;
    this.m_IconPath = icon;
   
    this.m_IsChildExpanded = false;
    this.m_IsLazyLoad = false;
    this.m_IsLoaded = false;
    this.m_Checked = false;
    this.m_Disabled = false;  
   
    this.m_Element = null;
      
    this.toString = function()
    {
        return '[class TreeNodeBase]';
    };
 }

    这个类比较清楚，每个属性的作用都一目了然，就不多说了。

    下一节讲TreeAttributes和TreeStyle类。

    注：CollectionBase，Extends，Call。
    
    To be continued . . .