动态载入数据的无刷新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]';
    };  
 }

  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]';
    };
 }

    To be continued . . .

本文转自博客园鸟食轩的博客，原文链接：http://www.cnblogs.com/birdshome/，如需转载请自行联系原博主。