用Anthem.Net + 微软TreeView.htc构建Ajax树控件

 

用Anthem.Net + 微软TreeView.htc构建Ajax树控件

 

 　　在最近的一个项目中，采用了Ajax，用的是anthem.net提供的一组控件，基本上不需要任何配置就可以使用，非常的方便。但美中不足的是没有为我们提供树控件，而项目中又有许多的地方需要用到树控件，没有办法呀，只得自己写了，挽起袖子，拼了，自己写。

　　在没开始写之前，我也初步的分析了一下，这个树控件也不是那么好写的，要是好写网上也遍地都是了，最根本的是怎样在前台生成树控件？这可把我难住了，项目这么紧，javascript又没怎么写过，在网上找了好多js的树控件，但都感觉使用起来不是很方便，最终想到了微软提供的web控件中有树控件，而且他也有相对应的前台树控件。微软不愧是微软，把js封装成了组件(HTC)，又能在前台用，也能再后台用。

最终方案：anthem.net + 微软TreeView.htc，开发环境：VS2003。

　　Anthem.net已经封装好了Ajax，不用我操心，微软TreeView提供了强大的js操作功能，也不用我操太多的心，我把他们结合起来就OK了。

　　为了开发人员使用方便，我需要封装一下树控件，使开发人员不用关心细节。我设计了三个类，一个是TreeNode抽象出来树结点，一个是TreeNodeCollection结点集合类，用来增加子结点，这样进行递归，理论上就支持无限子结点了；最后一个是AnthemTreeView，树控件的主体类。另外，还有一个tree.js文件，负责与后台的交互以及一些功能的实现。在做这个树控件的时候有一点是非常重要的，就是要保持前台与后台树控的一致，不能说前台5个结点，后台有8个，这也是难题之一。为了解决这个难题我想到了两个方法，第一，是每次我都根据后台的树结点集合，重新生成前台的树控件；第二，是前台第一次由后台生成以前就不在重新生成，每次树结点有改动，都用js来维护前台与后台的一致。实践证明，第一种方案在树结点过多的时候会非常的慢，每次树控件都要刷新。下面具体说一下树控件的实现。

生成树件

     　生成树控件的动作只在页面第一次加载后进行，为什么是“加载后”呢，如果树结点过多，会造成后台生成页面的时间非常长，所以需要异步执行，就是当页面全部生成后，再用js异步调用后台的方法返回树控的树结点集合，anthem.net会把你返回的对象翻译成js对象，让你在前台使用起来也非常的舒服，前台根据对象再生成树控件，在前台主要是用TreeView.htc中提供的方法。

树结点的增、删、改

    　如果在页面被回传时，树控件被修改，树控件会根据被修改的结点生成一组有规则数据（说的更好听一点也叫协议），发送到前台，由前台的js动态的改变树树点。另外在维护树结点的展开属性时，使用了一个隐藏域来记录哪些结点被展开或关闭，以便在页面回传时及时的更新树结点集合。

树操作被选中

    　用<script EVENT = onselectedindexchange for=””>这种方法在前台为树控件的onselectedindexchange事件绑定方法，使树结点在改变时由JS调用后台的方法来执行由开发人员为树控件结点改变定义的事件代码。

     　经过在项目中的使用，这个树控件用起来还算可以，满足了基本的需求，但有些地方写的还不是很完善，需要进一步的修改。下面是这个树控件的效果：