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

    注:CollectionBaseExtendsCall
    
    To be continued . . .

posted on 2005-03-11 23:33  birdshome  阅读(...)  评论(...编辑  收藏

导航