`
bright_future
  • 浏览: 88899 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Struts2与Ext JS数据表格GridPanel之间的数据传递

    博客分类:
  • ext
阅读更多


本帖介绍如何通过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;
 }
@Override
public 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>

分享到:
评论

相关推荐

    ext.net 动态创建gridpanel

    GridPanel 是 ExtJS(Ext.NET 的基础)中的一个重要组件,用于展示数据表格。在这个场景中,我们将深入探讨如何使用Ext.NET代码动态创建GridPanel,并在各种窗口中灵活展示。 1. **动态创建GridPanel**: 在Ext...

    Ext.grid.GridPanel属性祥解

    `Ext.grid.GridPanel`是ExtJS中用于展示表格数据的核心组件之一。它提供了丰富的配置选项和方法来帮助开发者灵活地控制表格的表现形式及功能。对于初学者或者希望深入理解`GridPanel`特性的Web开发人员来说,掌握其...

    Ext的gridpanel控件二次加载问题

    在Ext JS这个强大的JavaScript框架中,GridPanel是一个非常重要的组件,用于展示数据表格。然而,在实际应用中,可能会遇到一个常见的问题:当GridPanel需要进行第二次加载时,数据或者功能可能会丢失。这个问题主要...

    Ext.grid.GridPanel 删除线

    Ext.grid.GridPanel 删除线 放到example文件夹下运行

    Ext GridPanel 中实现加链接操作

    Ext GridPanel 是该框架中的一个重要组件,常用于展示表格数据。本文将详细介绍如何在 Ext GridPanel 中实现加链接操作,包括基本原理、代码实现及注意事项。 #### 一、Ext GridPanel 基础 在了解如何添加链接之前...

    Json(struts2+Ext)

    标题中的“Json(struts2+Ext)”指的是在Java Web开发框架Struts2中结合Ext库进行JSON数据交互的相关技术。Struts2是一个流行的MVC框架,而JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,常用于...

    基于EXT2.0.2表格间数据拖拽

    DragDrop组件允许用户将元素从一个位置拖动到另一个位置,而DragDropGroup则使得多个DragDrop对象能够相互交互,例如在不同的表格之间进行数据交换。 首先,我们需要创建两个EXT Grid实例,每个Grid都有自己的...

    Ext2.2.GridPanel分页处理+dwrproxy(js对象和json两种数据)

    总结一下,本话题介绍了如何在Ext2.2的GridPanel中实现分页处理,利用DWRProxy与后台进行数据交互。无论数据是以JS对象还是JSON格式传输,关键在于理解数据流的过程,并正确配置相关的Store、Reader和DWR方法。通过...

    ext + struts2 例子

    本文将详细介绍EXT与Struts2的结合使用,并通过标题和描述中的关键词,如“树”、“gridpanel”、“分页”、“文件上传”和“tabpanel”,深入探讨这些组件的应用。 EXT是一个强大的JavaScript库,它提供了丰富的...

    ext gridpanel 跨行

    在Ext JS中,GridPanel是一个表格视图,它可以显示由Store管理的数据集。每个单元格对应一个数据字段,每一行则代表一个数据记录。GridPanel提供了排序、分页、筛选等多种功能,使得数据管理变得简单。 跨行...

    Ext表格获取后台数据

    ExtJS是一款基于JavaScript的RIA(Rich Internet Application,富互联网应用)框架,它提供了许多强大的功能和组件,其中之一就是表格组件Ext.grid.GridPanel。 Ext.grid.GridPanel是一个功能强大的表格控件,它...

    Ext实现GridPanel内嵌行内嵌表格(RowExpander)

    在本文中,我们将深入探讨如何使用ExtJS库中的RowExpander插件来实现在GridPanel中内嵌行内的表格。ExtJS是一个强大的JavaScript框架,它提供了丰富的组件和功能,用于构建复杂的Web应用程序。RowExpander插件是...

    EXTJSEXT实例GridPanel.

    EXTJS的核心是其组件模型,GridPanel就是其中一种非常重要的组件,常用于展示数据表格。这个实例"EXTJSEXT实例GridPanel"旨在教授如何在EXTJS中创建并使用GridPanel。 GridPanel是EXTJS中的一个核心组件,它允许...

    JavaScript的Ext JS框架中的GridPanel组件使用指南

    JavaScript的Ext JS框架中的GridPanel组件是一个强大的表格展示和管理工具,它允许开发者高效地处理大量数据,并提供了诸如数据排序、分组、编辑等多种功能。GridPanel与TreePanel虽然都有表格展示的功能,但...

    EXT JS 3.0 中文版文档

    2. **数据绑定**:EXT JS 的数据绑定机制使得UI与数据模型之间能够实现双向同步,简化了数据更新和显示的过程。 3. **高级表格**:EXT JS 3.0 的GridPanel组件支持分页、排序、过滤、行编辑等功能,能处理大量数据...

    EXT GridPanel获取某一单元格的值

    EXT GridPanel是EXT JS库中的一个核心组件,用于创建数据密集型的表格视图。它在Web应用程序中常用于展示大量结构化数据,并提供多种交互功能,如排序、分页、筛选和编辑等。在EXT GridPanel中,获取某一单元格的值...

    ExtJs 2.0 GridPanel+Struts2 with JSON plugin[更新代码]

    在这个项目中,JSON 插件被用来在 ExtJS 和 Struts2 之间传递数据。 GridPanel 是 ExtJS 中的核心组件之一,它能够展示表格数据,并提供了排序、分页、筛选等多种功能。在 ExtJS 2.0 中,GridPanel 的配置和使用...

    Ext教程表单表格的使用

    总结来说,EXT表单FormPanel和表格GridPanel是EXT JS中构建动态Web应用的关键组件,它们提供了丰富的功能和灵活的配置,可以实现复杂的用户界面和数据管理。通过理解并熟练运用这两个组件,开发者能够构建出交互性强...

    GridPanel中的单元格不能选中复制的解决方法

    我们可以创建一个新的JavaScript文件,并在ext-all.js后面引入。代码如下: if (!Ext.grid.GridView.prototype.templates) { Ext.grid.GridView.prototype.templates = {}; } Ext.grid.GridView.prototype....

    深入浅出Ext JS(第2版) 随书光盘提供的书中实例

    2. **数据绑定**:Ext JS支持与服务器端的数据进行双向绑定,实例中会展示如何使用Store、Model和Proxy来处理数据,以及GridPanel如何动态显示和编辑数据。 3. **表格和表单**:演示了如何创建复杂的表格系统,包括...

Global site tag (gtag.js) - Google Analytics