动态载入数据的无刷新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 . . .