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

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

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

    附上各中TreeView呈现的外观样式：
  

    to be continued . . .

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