上次我介绍过，。由于当时对于JavaScript的了解比较有限，加之又把主要的精力都focus到popup窗口本身的一些问题上去了，所以关于菜单的设计中还是有很多不合理的地方。后来因为需要又作了一个TreeView控件，不过由于需求变化大，被改得来结构相当的乱了，于是抽空重构一下，并把一些设计步骤记录下来，欢迎大家讨论并提意见。

    虽然使用脚本制作的TreeView已经有很多了，不过对于做自己的产品来说，要使用现成的控件是很困难的。首先要能免费授权，其次需要有自己所期望的所有功能，三需要代码清晰到能很快理解并修改。免费可能是最简的要求了，而功能和可修改性却就不容易了，所以最后自己实现一个反而更省事。微软的Microsoft.Web控件包里有个强大的TreeView，不过遗憾的是那个是后台数据邦定的，Expand或Collapse节点需要doPostBack操作:(。     既然开始都说了，现成的TreeView很多了，那么这个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类的结构：

    这个结构中，m_TreeLevel是树的层次数，本来用我这种表格嵌套结构，不需要知道树中的层次也是可以的，可是如果不知道当前树的层次是不是Root层，不能正确地生成节点前的操作提示图标。__GlobalTreeCache__是一个全局Hash Table，原理可以参看 ，作用是为了快速检索TreeNode，而避免每次都去遍历整棵树。m_Attributes & m_Styles是设置TreeView属性和风格的类，在一个TreeView中只分别保持一份实例。     TreeNodeBase类的结构(TreeNode的所有和UI相关的内容，在TreeNodeBase中生成)：     这个类比较清楚，每个属性的作用都一目了然，就不多说了。     下一节讲TreeAttributes和TreeStyle类。     注： ， ， 。     

    . . .

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