利用xslt、xml,ajax实现了一个无限级树型导航

虽然树型导航已经很多了,作为初学者我还是想自己弄一个,看看这个东西是怎么实现的?顺便学下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下删除不能正常实现,还有解决下。

如果您感兴趣的可以下载下来试试看哦,下载页面地址:http://www.elooog.cn/view.asp?id=45

原文地址:https://www.cnblogs.com/hongyin163/p/1414687.html