今天完成了对菜单输出部分的重构实现,就是怎么样把我们的JS类变成能看到的实实在在的树。这个步骤虽然不是很难,不过很多细微的东西还是值得注意的。具体输出HTML代码的结构可以参看(1)中的图示,而我们的重点是讲讲为TreeView显示正确的层次结构图标。
由于我开始说了,希望树的UI逻辑有比较高的内聚性,所以使用了一个可以递归的UI层次结构。我们使用一个TABLE元素来作为树的一个Level的容器,每个TABLE中的一个TR作为一个TreeNode的显示元素。TR又分为两个TD,第一个TD放Hierarchy图标;第二个TD中放TreeNode的具体内容,包括Image、CheckBox和Span(文字放Span中)。
虽然贴代码不是写文章的好习惯,不过我觉得参照代码来说,还是更容易理解的。
![ContractedBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![dot.gif](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
我之前说过,菜单的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的文本。
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
接下来说TreeView呈现中比较麻烦的OpIcon问题,就是上面代码中的:
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![77_77.gif](https://i-blog.csdnimg.cn/blog_migrate/fa63736dc74e6330917ac8ddfb78b17f.gif)
由于使用了TABLE嵌套,同级菜单条目之间的连接变得非常的容易处理。就只有两种情况,对于有子菜单的TreeNode,如果不是该Level上最后一个Node,则显示一个"|"线,如果是最后一个Node,则什么都不用显示。然后每个OpIcon就对应于每个Node(一一对应),我们知道就是那些什么"+"、"-"、"|"和"|-"一类的东西了。对于普通Level上的OpIcon是比较容易处理的,可是对于Root那个Level,还需要做很多的特殊处理,以优化其显示。获取节点OpIcon图标的代码如下:
![ContractedBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![dot.gif](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
从上面的代码可以看出,判断节点在Level是IsFirstNode还是IsLastNode是非常重要的哦,虽然这两个方法都简单到只有一行代码
![emembarrassed.gif](https://i-blog.csdnimg.cn/blog_migrate/948aee54476d13f4a58bc17607b63dcd.gif)
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![None.gif](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
附上各中TreeView呈现的外观样式:
![TreeView-2.gif](https://i-blog.csdnimg.cn/blog_migrate/6ac99e193f4fa56035270586e6080f63.gif)
to be continued . . .
本文转自博客园鸟食轩的博客,原文链接:http://www.cnblogs.com/birdshome/,如需转载请自行联系原博主。