虽然树型导航已经很多了，作为初学者我还是想自己弄一个，看看这个东西是怎么实现的？顺便学下js、xml、 xslt、dom等等，事情看起来似乎简单，做起来却花了不少功夫，有太多的地方需要完善，不过基本的功能都实现了。

介绍一下这个树型导航，虽然微软提供了一个Treeview，但是要是实现动态加载确不容易，因为webform这种模式使得更 新节点总是刷新页面，虽然有asp.net ajax,但是确实很讨厌在利用asp.net webform模型时在前端生成的凌乱的代码， 和js结合的时候又不方便，虽然有什么脚本管理器，谁愿意把写完的js代码一行一行用引号引上，最后又写到前端呢， 对webform真是又爱又恨啊，他能提高效率，但它不是什么好东西，现在又有了asp.net mvc模型，了解了下，感觉还不 错吧，不过没用过呢，所以在这里建议初学者别去学什么webform了，那个东西确实没用！微软包了一大堆东西，要花好 多时间去学这个处理过程，页面生存在周期之类的东西，等等等等！最后还要绕着弯去实现某些功能，汗！ 还是说下这个树型导航吧，当然前端的js都是一句一句敲上去的，即使是ajax也没有用jqurey实现，Lajax.js文件里有 ajax通信的简单实现，你看到文件里jquery，我是用jquery实现了一个弹出对话框，jquery的语法挺不太习惯的。

这个树型导航主要有以下几个特性：

1、后台利用xml存储数据

就像Treeview一样利用sitemap存储站点结构，xml的形式和树是一样的，组织树型数据要更形象，而且简单。操作 xml要了解一些简单的dom知识。如果了解xpath的话，操作xml节点就很容易了，xpath确实很好用，需要几个小时就能上 手，带来的便利却是极大的。

xml数据中每个节点都带有一个唯一的key值，这个key值便于xpath选取节点，说以key值是唯一的，如果想手工写这 个xml文档的话，一定要确保key值的唯一性。当然，在前几个版本里，我没有用到这个key值，而是利用xpath的 position()计算的每个节点的xpath，编写那个版本的xml不需要key值的。有兴趣可以看下http://www.elooog.cn/post/29.html,后来发现利用position()计算节点的xpath在动态添加删除节点时带来很大的不便 ，因为添加，删除节点时position()的计算结果就变了，不太好弄。

2、利用xslt显示数据

xslt很强大，结合xpath，格式化xml如同写程序一样，方便很多，利用xpath提供的函数判断节点数，进而觉得返回 节点的样式，比如最后一个节点和中间的节点就不一样，利用xslt的模板机制，加上控制流程的语句以及xpath的内置函 数，使得把xml格式化成想要的html变得很有意思，前端是table来显示树型结构。

3、利用ajax技术添加、删除节点

这个树型导航前台节点是动态加载，避免节点过多使得加载速度变慢，前台通过ajax回调参数，获取子节点信息，利 用ajax使得前端不会有刷新，在前端添加和删除节点后台都会同步的添加和删除。

添加节点和删除节点都有做很多的工作，因为添加和删除的节点可能是中间的节点，也可能是最后一个节点，为了确 保虚线显示正确，这里还是要做些工作的。

比如删除节点的时候，你删除的节点可能是父节点，也可能是子节点，你可以选择多个节点一起删除，但是不能一次 删除，因为删除节点时table内的行的索引再变，而且父节点删除子节点也顺带的删除了，所以解决办法是循环获取为删 除的节点，一个循环删一个节点，这样就不会出现问题了。

缺点：

1、感觉在后台保存xml文档的时候有问题，因为完全的读取和保存，数据量大的时候可能会比较慢，待解决。

2、这个项目要是用起来的比较麻烦，最后能像一个插件一样用，比如像fckediter一样就好了。如果做成一个 webControl就好了。

3、浏览器兼容性，现在在IE6下能运行正常，ff下删除不能正常实现，还有解决下。

如果您感兴趣的可以下载下来试试看哦，下载地址: WebTree-v1.0.rar