整个的实现过程还是有点曲折:
之前使用的生成树结构的页面,是利用从服务器获取的所有数据,通过一系列javascript脚本函数,一次性地生成整个树结构目录。这种方式对付系统的功能菜单还游刃有余,但是要生成包含上千条数据的树结构时,客户端的浏览器需要十几秒钟才能把整个树结构建立起来、显示在页面上,这对于用户来说是不可忍受的——其实对于我们开发者来说,也是不可忍受的。那么一个可行的办法就是,利用AJAX技术,先显示树结构的第一级节点,当点击某个节点时,再从服务器获取该节点的子节点,显示出来。这样,每次与服务器交互的数据量不大,加快了页面响应。
一开始我打算利用RAILS中的AJAX机制,配合使用之前那个版本中的javascript函数。但是那个版本的思路,是基于从服务器获取的树结构数据,通过循环、递归,在服务器端生成好要在客户端页面执行的一系列javascript函数调用,以生成树结构。至此,还算是比较符合AJAX的思路,但是下一步就大相径庭了:旧版本的是将生成的那一大串javascript函数调用的字符串,一次性地完全返回给客户端页面,客户端页面在加载前,已经获得了这一大串字符串,只需简单地把它加载,就一次性的执行它、生成树结构了。这种方式,等于没有给AJAX留下插足的任何机会。
此路不通,于是我转而寻找网上别人做的AJAX树,试图将其移植过来,为我所用。之前就找到过一个.NET版的,用C#写的,还没仔细看过。于是打开VS2005,建好了ASPX工程,研究了一下这个.NET版的AJAX树。这个版本自带了一个ACCESS数据库,里面有一些演示数据。把IIS架起来后,运行得还真挺顺畅。这个AJAX树的功能做得还挺强,可以实现在页面上对树节点的添加、删除、编辑、拖拽移动操作。代码也比较清晰:一个htm页面和一个aspx页面,其中aspx页面中定义了一些服务器端函数,组织出相应的要返回给htm页面的html代码段。然而,要把这个移植过来也不容易,首先是对其生成html代码段的思路不熟悉,不好控制,另外一点,它是通过response.write返回所生成的html代码段,与RJS中直接指定页面元素进行控制的思路又不一样。
也是由于通过对以上两种方式的探索,使得我对做AJAX树的思路更加清晰的原因吧,我最终决定还是自己动手,完全自己做一个RAILS下的出来吧。尽管最终从核心内容到细节控制,总算是把这棵树给捣腾出来了,但中间遇到几个问题,有的不知道是否RAILS本身就不支持,还有的明明书上、别人都行得通,但我这就是不行。不知个中缘由,列在这里,若有人能够解答,还望不吝赐教!谢过先!
问题一:用RJS的insert_html辅助方法,无法在一个table最后添加一行(即
问题二:在使用RJS时,在“render :update”代码段,只能是单纯的一句调用辅助方法的语句,其它的,无论是加点if判断,还是再使用另外一个辅助方法,代码全都失效。本想先用insert_html添加元素,再用call调用javascript函数之类,完全行不通,最终是预先在要插入元素的地方放置一个空的容器,然后换用replace_html,将容器中的空内容“换”成返回的html代码段,也达到了添加页面元素的效果。
问题三:这个是最为奇怪的问题了。当我组合待返回的html元素的代码时,由于该元素还要继续带有AJAX链接,故本想用“#{}”将Ruby代码嵌入——这种方法理论上讲是可行的,可我在实际操作中,记得好像只成功了一两次,基本上都实现不了AJAX效果(实际上是没效果)。无奈之下,我根据页面初始显示的第一级树节点,查看了页面代码,看到了生成的AJAX代码,再依照它的样子,替换掉我本来想用Ruby代码的部分——也就是说,我最终不是用嵌入的Ruby代码,而是直接写出将要生成的AJAX代码——这样的代码是多么的丑陋啊!
不过,整个过程下来,还是略有一些可以总结的东西:
总结一:由于树节点中要显示的文本中,有的会有加号“+”,而恰巧该文本还是要向服务器发送的参数,这种情况下,在组合要返回的html代码段时,加号会被当作连接字符串的操作,那么在必要的地方,则把加号替换成其它不会被误解的符号,如下划线“_”,而在传给数据库做查询用时,再替换回来。Ruby中将字符串中的模式替换成指定内容的函数是gsub,如:str.gsub("+","_"),就是把str中的加号替换成下划线。该函数的第一个参数也可以是正则表达式。
总结二:对于页面上要显示的每一个树节点,都用一个只有一行的table来控制,这样做有一个好处,就是每个节点都可以独立地控制显示位置,而不用考虑colspan属性,只需在前面添加指定个数的td即可,具体做法见“总结三”。
总结三(控制树节点的显示级别位置的方法):点击树节点,向服务器发送该节点的ID,从而获取该节点的子节点。与此同时,还要返回一个本节点的级别(页面初始显示的第一级节点的级别为0)。在生成子节点的html代码段时,得到父节点的级别,加上1,即为子节点的级别。根据级别数做循环,向包含子节点内容的table中添加相应个数的td。在所添加的td中,填入若干空格( )(数量自定,一般2~3个为宜),但是空格只有与td配合使用效果才好,否则容易错位。或者事先用windows的画图工具做一个白色小方块的bmp文件(方块大小根据已有的在树的节点前面表示展开、收拢节点的图片设定),然后在td中嵌入这个小方块图片也行。如某个二级节点,其html代码段为:
| 二级节点 |
Ajax教程相关栏目本月热门文章
- 1【Linux驱动开发】设备树详解(二)设备树语法详解
- 2别跟客户扯细节
- 3Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区
- 4【Java】对象处理流(ObjectOutputStream和ObjectInputStream)
- 5【分页】常见两种SpringBoot项目中分页技巧
- 6一文带你搞懂OAuth2.0
- 7我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节:虚拟机与Java虚拟机介绍
- 8【Spring Cloud】新闻头条微服务项目:FreeMarker模板引擎实现文章静态页面生成
- 9JavaSE - 封装、static成员和内部类
- 10树莓派mjpg-streamer实现监控及拍照功能调试
- 11用c++写一个蓝屏代码
- 12从JDK8源码中看ArrayList和LinkedList的区别
- 13idea 1、报错java: 找不到符号 符号: 变量 log 2、转换成Maven项目
- 14在openwrt使用C语言增加ubus接口(包含C uci操作)
- 15Spring 解决循环依赖
- 16SpringMVC——基于MVC架构的Spring框架
- 17Andy‘s First Dictionary C++ STL set应用
- 18动态内存管理
- 19我的创作纪念日
- 20Docker自定义镜像-Dockerfile
热门相关搜索
路由器设置
木托盘
宝塔面板
儿童python教程
心情低落
朋友圈
vim
双一流学科
专升本
我的学校
日记学校
西点培训学校
汽修学校
情书
化妆学校
塔沟武校
异形模板
西南大学排名
最精辟人生短句
6步教你追回被骗的钱
南昌大学排名
清朝十二帝
北京印刷学院排名
北方工业大学排名
北京航空航天大学排名
首都经济贸易大学排名
中国传媒大学排名
首都师范大学排名
中国地质大学(北京)排名
北京信息科技大学排名
中央民族大学排名
北京舞蹈学院排名
北京电影学院排名
中国戏曲学院排名
河北政法职业学院排名
河北经贸大学排名
天津中德应用技术大学排名
天津医学高等专科学校排名
天津美术学院排名
天津音乐学院排名
天津工业大学排名
北京工业大学耿丹学院排名
北京警察学院排名
天津科技大学排名
北京邮电大学(宏福校区)排名
北京网络职业学院排名
北京大学医学部排名
河北科技大学排名
河北地质大学排名
河北体育学院排名



