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

    今天完成了对菜单输出部分的重构实现，就是怎么样把我们的JS类变成能看到的实实在在的树。这个步骤虽然不是很难，不过很多细微的东西还是值得注意的。具体输出HTML代码的结构可以参看(1)中的图示，而我们的重点是讲讲为TreeView显示正确的层次结构图标。

    由于我开始说了，希望树的UI逻辑有比较高的内聚性，所以使用了一个可以递归的UI层次结构。我们使用一个TABLE元素来作为树的一个Level的容器，每个TABLE中的一个TR作为一个TreeNode的显示元素。TR又分为两个TD，第一个TD放Hierarchy图标；第二个TD中放TreeNode的具体内容，包括Image、CheckBox和Span(文字放Span中)。

    虽然贴代码不是写文章的好习惯，不过我觉得参照代码来说，还是更容易理解的。

<script language="JavaScript">
TreeNodeBase.prototype.Render = function(doc)
{
    var tr = doc.createElement('TR');
    tr.Comment = 'TreeNode'; 
    tr.Object = this;
    this.m_Element = tr;
   
    var tdOpIcon = doc.createElement('TD');
    tr.appendChild(tdOpIcon);
    var opImg = doc.createElement('IMG');
    tr.OpIcon = opImg;
    opImg.src = TreeStyle.OpIcon(this.GetOpIconName());
    tdOpIcon.appendChild(opImg);
   
    var tdContent = doc.createElement('TD');
    tr.appendChild(tdContent); 
    tdContent.noWrap = 'noWrap'; 
    var hasCheckBox = this.Attributes('HasCheckBox');
    if ( hasCheckBox )
    {
        var input = doc.createElement('INPUT');
        input.type = 'checkbox';
        input.onfocus = function(){ FindParentElement(this, 'TD').focus(); };
        tr.CheckBox = input;
        tdContent.appendChild(input);
    }     
    var icon = doc.createElement('IMG');
    icon.src = TreeStyle.Icon(this.m_IconPath);
    tdContent.appendChild(icon);
    tr.Icon = icon;
    
    var span = doc.createElement('SPAN');
    span.noWrap = 'nowrap';
    var textIndent = this.Attributes('TextIndent');
    if ( textIndent > 0 )
    {
         indent = doc.createElement('SPAN');
         indent.style.width = textIndent;
         tdContent.appendChild(indent);
    }
    tdContent.appendChild(span);
    span.innerText = this.m_Text; 
    tr.Content = span;
    return tr;
};
</script>

    我之前说过，菜单的UI元素都在TreeNodeBase这个类中负责生成，事件处理放在TreeNode中，所以这里我们只关注UI呈现问题。doc参数其实就是document，写在这里是为了防止在popup中使用时可能出问题，因为只有来自同一个document对象创建的HTML对象才能append到一起。tr.Object=this;和this.m_Element=tr;是用来建立脚本对象和DHTML对象的双向快捷引用，不过这里有一个IE内存泄露潜在问题(我前面的随笔有讲)，怎么办？在Dispose中处理就行了。后面的就比较按部就班了，OpIcon是表示Hierarchy的TreeView操作图标，Icon是内容中的图标，CheckBox是一个Optional的条目，最后是用Span括起来的TreeNode的文本。

 TreeNodeBase.prototype.Dispose = function()
 {
    if ( this.m_Element )
    {
         this.m_Element.clearAttributes();
         this.m_Element = null;
    }
 };

    接下来说TreeView呈现中比较麻烦的OpIcon问题，就是上面代码中的：

 opImg.src = TreeStyle.OpIcon(this.GetOpIconName());

哇，这么简单就搞定了?! 做梦呢。

    由于使用了TABLE嵌套，同级菜单条目之间的连接变得非常的容易处理。就只有两种情况，对于有子菜单的TreeNode，如果不是该Level上最后一个Node，则显示一个"|"线，如果是最后一个Node，则什么都不用显示。然后每个OpIcon就对应于每个Node(一一对应)，我们知道就是那些什么"+"、"-"、"|"和"|-"一类的东西了。对于普通Level上的OpIcon是比较容易处理的，可是对于Root那个Level，还需要做很多的特殊处理，以优化其显示。获取节点OpIcon图标的代码如下：

<script language="javascript">
TreeNodeBase.prototype.GetOpIconName = function()
{
    var nodeCount = this.m_Tree.m_Nodes.length;
    if ( ( nodeCount > 1 || this.m_IsLazyLoad ) && !this.IsLastNode() )
    {
        if ( !this.m_ChildTree )
        {
            if ( this.IsFirstNode() && this.m_Tree.m_ParentNode == null )
            {
                return 'TopLine';
            }
            else
            {
                return 'MiddleCrossLine';
            }
        }
        else
        {
            if ( this.m_IsChildExpanded )
            {
                if ( this.IsFirstNode() && this.m_Tree.m_ParentNode == null )
                {
                    return 'TopMinus';
                }
                else
                {
                    return 'MiddleMinus';
                }
            }
            else
            {
                if ( this.IsFirstNode() && this.m_Tree.m_ParentNode == null )
                {
                    return 'TopPlus';
                }
                else
                {
                    return 'MiddlePlus';
                }
            }
        }
    }
    else
    {
        if ( !this.m_ChildTree )
        {
            if ( this.IsFirstNode() && this.m_Tree.m_ParentNode == null )
            {
                return 'SingleNode';
            }
            else
            {    
                return 'BottomLine';
            }
        }
        else
        {
            if ( this.m_IsChildExpanded )
            {
                if ( this.IsFirstNode() && this.m_Tree.m_ParentNode == null )
                {
                    return 'SingleMinus';
                }
                else
                {
                    return 'BottomMinus';
                }
            }
            else
            {
                if ( this.IsFirstNode() && this.m_Tree.m_ParentNode == null )
                {
                    return'SinglePlus';
                }
                else
                {
                    return 'BottomPlus';
                }
            }
        }
    }
    return '';
};
</script>

    从上面的代码可以看出，判断节点在Level是IsFirstNode还是IsLastNode是非常重要的哦，虽然这两个方法都简单到只有一行代码。TreeStyle.OpIcon是一个用于支持不同风格OpIcon图标的静态方法。

TreeStyle.OpIcon = function(imageName)
{
    return 'Skins/default/' + imageName + '.gif';
};

    附上各中TreeView呈现的外观样式：
  
    to be continued . . .