struts2与ext js数据表格gridpanel之间的数据传递

来源：互联网发布：qq精准定位软件编辑：程序博客网时间：2024/06/13 23:51
本帖介绍如何通过struts 2获取数据，把数据填充到Ext JS的数据表格组件GridPanel中，部分内容是参考网上的一些教程的。 首先，Struts 2和EXT JS之间的数据传输主要是通过JSON数据结构来传递的，可以自己在Action中生成JSON对象，然后前台再用Ext.util.JSON.decode()的方法来解码，但是更加简单的一个方法是使用jsonplugin，可以从http://code.google.com/p/jsonplugin/获得该插件，然后加在项目的lib里。 首先，我们建立一个DO，例如 CODE:public class User {private java.lang.String userId;private java.lang.String fullName;private java.lang.String email; //getters and setters}然后我们可以在Action里面通过Spring和Hibernate来获取List<User>，当然也可以由其他方式取得，和前台是无关的，因此这里省略，只是简单地赋值。 CODE:public class TestJson extends ActionSupport{private List<User> users;private boolean success=true; //在EXT JS中的store对象需要用到的判断属性public boolean isSuccess() {return success;}public void setUsers(List<User> users) {this.users= users;}public List<User> getUsers() {return users;}@Overridepublic String execute() throws Exception {User a = new User ();a.setUserId("id1");a.setFullName("mg");a.setEmail(" scutmg@gmail.com ");ids.add(a);return "success";}} ---------------------------------------------以下是配置文件struts.xml： CODE:<struts><!-- Configuration for the default package. --><package name="default" extends="json-default"><action name="testJson" method="execute" class="TestJson"><result type="json"/></action></package></struts> 需要注意的是package里面的属性extends必须使用json-default来获得json的支持，另外action的result type也要是json。 ----------------------------------------------以下是html页面： CODE:<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</title> <link rel="stylesheet" type="text/css" href="ExtJs/resources/css/ext-all.css" /> <script type="text/javascript" src="ExtJs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ExtJs/ext-all.js"></script> <script>function showUrl(value){return "<a href='[mailto:"+value+ mailto:"+value+]"'>value</a>";}Ext.onReady(function(){var ds = new Ext.data.Store({proxy: new Ext.data.HttpProxy({url:'testJson.action'}),//调用的动作 reader: new Ext.data.JsonReader({root: 'usrs',  //从struts2里面传递过来的参数 successProperty :'success'}, [ //JSON数据的映射{name: 'usrId',mapping:'usrId',type:'string'},{name: 'fullName',mapping:'fullName',type:'string'},{name: 'email',mapping:'email',type:'string'},])});var grid = new Ext.grid.GridPanel({id:"grid",el:"example-grid",ds : ds,store: ds,columns: [{header: "id", width: 120, dataIndex: 'usrId', sortable: true},{header: "usrName", width: 120, dataIndex: 'fullName', sortable: true},{header: "email", width: 120, dataIndex: 'email', renderer:showUrl}   //显示超链接],width:360,height:600});grid.render();ds.load();});</script></head><body><table align="center" width="80%"><tr><td align="center"><div id="example-grid"></div></td></tr></table></body></html>