首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

struts2调整ExtJS实现动态树加载

2012-10-06 
struts2整合ExtJS实现动态树加载?在研究ExtJS Tree动态构建时,按照ExtJS推进的方法是通过TreeLoader加载数

struts2整合ExtJS实现动态树加载

?在研究ExtJS Tree动态构建时,按照ExtJS推进的方法是通过TreeLoader加载数据,加载的数据的格式是JSON。在ExtJS的例子check-tree.html中,直接利用后端的check-nodes.json来构建,但是在实际的工程中,有很多是根据不确定的数据内容来构建Tree的。

??? 在Java开发的Web中利用Struts实现后端的servlet,可以提供相应的json格式,实现ExtJS Tree的动态构建。在网上搜索相应的技术文章是,发现利用jsp作为中间转换的例子,url:http://www.blogjava.net/usherlight/archive/2008/02/19/180590.html,觉得不是很理想,在struts2中引入了plugin的机制,有现成的struts-json-plugin包,如何利用action直接通过Ext.Tree.TreeLoader直接加载Tree的数据,在上述文章中,指出:

?"最近尝试用extjs来展示树状菜单。着实花了一番功夫。树状菜单的菜单项需要动态加载,而目前版本的extjs中只支持JSON格式的数据。查了一些资料,决定使用struts2的json-plugin。首先按照例子做了一个,但是结果就是不成功,界面上只出来了一个js中生成的root节点,不能加载从后台生成的数据。研究后发现是数据格式有问题。使用json-plugin生成的数据格式如下:
{"cls":"folder","id":10,"leaf":false,"children":[{"cls":"file","id":11,"leaf":true,"children":null,"text":"S600"},{"cls":"file","id":12,"leaf":true,"children":null,"text":"SLK200"}],"text":"Benz"}
而extjs需要的数据格式如下:
[{"cls":"folder","id":10,"leaf":false,"children":[{"cls":"file","id":11,"leaf":true,"children":null,"text":"S600"},{"cls":"file","id":12,"leaf":true,"children":null,"text":"SLK200"}],"text":"Benz"}]
区别很小,就只相差最外面的两个方括号。但是少了这两个方括号,在json中,含义迥然不同,前者表示一个对象,而后者表示一个数组。而extjs中 tree的dataloader需要的数据必须是一个数组。而这样的数据格式是json-plugin自动生成的,无法改变。所以,我最后放弃了json -plugin,转而使用json-lib来解决这个问题。"

在struts-json-plugin中返回的数据的确有这个问题,经过仔细分析,在struts-json-plugin的配置中是可以解决这个问题的,通过wrapPrefix和wrapSuffix设置,可以解决上面的问题,struts config文件中的设置如下:

?struts2调整ExtJS实现动态树加载struts2调整ExtJS实现动态树加载

    ?action的实现类Menu的代码如下:

    ?struts2调整ExtJS实现动态树加载struts2调整ExtJS实现动态树加载
      ?struts2调整ExtJS实现动态树加载struts2调整ExtJS实现动态树加载
        ?struts2调整ExtJS实现动态树加载struts2调整ExtJS实现动态树加载
          "'text': 'To Do'," +
          "'cls': 'folder'," +
          "'expanded': true," +
          "'children': [" +
          "{" +
          "'text': 'Go jogging'," +
          "'leaf': true," +
          "'checked': true" +
          " }," +
          "{" +
          "'text': 'Take a nap'," +
          "'leaf': true," +
          "'checked': false" +
          "}," +
          " {" +
          "'text': 'Climb Everest'," +
          "'leaf': true," +
          "'checked': false" +
          "}" +
          "]" +
          "}" ;
          返回的: ["{'text': 'To Do','cls': 'folder','expanded': true,'children': [{'text': 'Go jogging','leaf': true,'checked': true },{'text': 'Take a nap','leaf': true,'checked': false}, {'text': 'Climb Everest','leaf': true,'checked': false}]}"]  怎么去掉双引号 ……  谢谢!

热点排行