以前没写过Blog，现在心血来潮想写一篇。呵呵，望大家不要笑话。希望高手能指点，菜鸟们与我一起交流共同进步，终有一天我们也能成为高手，哈哈。

----这是我的项目结构图

ExtJs Grid + Struts2 + JSON_职场

   ExtJs是一个Ajax框架，我们能它做出很多丰富的效果，而且实现简单。这里我用Struts2 + JSON +ExtJs 的grid组件做了例子。

-------前台部分

首先，一个表格应该有列定义，即定义表头ColumnModel：
// 定义一个ColumnModel，表头中有四列
var cm = new Ext.grid.ColumnModel([
    {header:'编号',dataIndex:'id'},
    {header:'年龄',dataIndex:'age'},
    {header:'名称',dataIndex:'name'},
    {header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;
    该ColumnModel定义了表格的四个列，其每列的名称和对应的数据键。请注意defaultSortable属性，即为每个列都安上一个可以排序的功能。如果只想某些列举有该功能，可以设置：
{header:'编号',dataIndex:'id',Sortable:true}

Grid控件和其它可以显示数据的控件，能够支持多种数据类型，如二维数组、Json数据和XML数据，甚至包括我们自定义的数据类型。Ext为我们提供了一个桥梁Ext.data.Store，通过它我们可以把任何格式的数据转化成grid可以使用的形式，这样就不需要为每种数据格式写一个grid的实现了。

   var ds = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url:'data.asp'}),
        reader: new Ext.data.JsonReader({
            totalProperty: 'totalProperty',
            root: 'root'
        }, [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });

    ds.load({params:{start:0,limit:10}});

  ds对应两部分,proxy与render。proxy告诉我们从哪里得到数据，render告诉我们如何解析得到的数据。现在用的是Ext.data.HttpProxy，它将从向给定地址发送请求，并取得结果数据。Ext.data.JsonReader用来解析取得结果数据，每行按顺序读取四个数据，第一个叫id，第二个叫age，第三个叫name，第四个descn。这些是跟cm定义中的dataIndex对应的。这样cm就知道哪列应该显示那条数据了。

   记得要执行一次ds.load()，对数据进行初始化。这里给定两个参数，见名思意，这两个参数是用来进行后台排序的。

----grid.jsp

  1. <%@ page language="java" contentType="text/html; charset=UTF-8" 
  2.     pageEncoding="UTF-8"%> 
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  4. <html> 
  5. <head> 
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  7.     <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" /> 
  8.      <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script> 
  9.     <!-- ENDLIBS --> 
  10.  
  11.     <script type="text/javascript" src="ext/ext-all.js"></script> 
  12.    <script type="text/javascript" src="js/paging.js"></script> 
  13. <title>Struts2 Grid</title> 
  14. </head> 
  15. <body> 
  16.     <div id="grid"></div> 
  17. </body> 
  18. </html> 

-----page.js

 

  1. Ext.onReady(function(){ 
  2.     var sm = new Ext.grid.CheckboxSelectionModel(); 
  3.     
  4.     var cm = new Ext.grid.ColumnModel([ 
  5.         new Ext.grid.RowNumberer(), 
  6.         sm, 
  7.         {header:'编号',dataIndex:'id'}, 
  8.         {header:'名称',dataIndex:'name'}, 
  9.         {header:'年龄',dataIndex:'age'}, 
  10.         {header:'描述',dataIndex:'descn'} 
  11.     ]); 
  12.     cm.defaultSortable = true; 
  13.  
  14.     var ds = new Ext.data.Store({ 
  15.         proxy: new Ext.data.HttpProxy({url:'gridUtil.action'}), 
  16.         reader: new Ext.data.JsonReader({ 
  17.             totalProperty: 'totalProperty', 
  18.             root: 'root' 
  19.         }, [ 
  20.             {name: 'id'}, 
  21.             {name: 'name'}, 
  22.             {name: 'descn'},{name:'age'} 
  23.         ]) 
  24.     }); 
  25.     ds.load({params:{start:0,limit:10}}); 
  26.     
  27.     var grid = new Ext.grid.GridPanel({ 
  28.         el: 'grid', 
  29.         ds: ds, 
  30.         cm: cm, 
  31.         sm: sm, 
  32.         title: 'struts2->JSON', 
  33.         //height:400, 
  34.         autoHeight: true, 
  35.        bbar: new Ext.PagingToolbar({ 
  36.             pageSize: 10, 
  37.             store: ds, 
  38.             displayInfo: true, 
  39.             displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条', 
  40.             emptyMsg: "没有记录" 
  41.         }), 
  42.         tbar: new Ext.Toolbar({ 
  43.             items:[ 
  44.                     { 
  45.                         id:'buttonA' 
  46.                         ,text:"Button A" 
  47.                         ,handler: function(){ alert("You clicked Button A"); } 
  48.                     } 
  49.                     , 
  50.                     '-' 
  51.                    // new Ext.Toolbar.SplitButton({}) 
  52.                     ,{ 
  53.                         id:'buttonB' 
  54.                         ,text:"Button B" 
  55.                         ,handler: function(){ alert("You clicked Button B"); } 
  56.                     } 
  57.                     , 
  58.                     '-' 
  59.                     ,{ 
  60.                         id:'buttonc' 
  61.                         ,text:"Button c" 
  62.                     } 
  63.                 ] 
  64.             })  
  65.        /* tbar: new Ext.PagingToolbar({ 
  66.             pageSize: 10, 
  67.             store: ds, 
  68.             displayInfo: true, 
  69.             displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条', 
  70.             emptyMsg: "没有记录" 
  71.         })*/ 
  72.     }); 
  73.     grid.render(); 
  74. }) 

---后台部分

------struts.xml

 

  1. <?xml version="1.0" encoding="GBK" ?> 
  2. <!DOCTYPE struts PUBLIC 
  3.         "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" 
  4.         "http://struts.apache.org/dtds/struts-2.0.dtd"> 
  5. <struts> 
  6.     <constant name="struts.i18n.encoding" value="UTF-8"/> 
  7.     <package name="example" extends="json-default" > 
  8.         <action name="gridUtil" class="org.lee.GridUtil"> 
  9.             <result type="json" /> 
  10.         </action> 
  11.     </package> 
  12. </struts> 

第一个地方配置struts.i18n.encoding常量，不再使用GBK编码，而是UTF-8编码，这是回为AJAX的POST请求都是以UTF-8的方式进行编码的。

第二个地方是配置包，自己的包继承json-defalut包，而不再继承默认defalut包，这是因为只有在该包下才有json结果类型 。一旦我们将某个逻辑视图名配成json类型，这将意味着该逻辑视图无须指定物理视图资源，因为json插件会将Action序列化后发送给客户端。

---User.java

  1. package org.lee; 
  2.  
  3. import java.util.List; 
  4.  
  5. public class User { 
  6.  
  7.     private int id; 
  8.     private String name; 
  9.     private String age; 
  10.     private String descn; 
  11.  
  12.     public int getId() { 
  13.         return id; 
  14.     } 
  15.     public void setId(int id) { 
  16.         this.id = id; 
  17.     } 
  18.     public String getName() { 
  19.         return name; 
  20.     } 
  21.     public void setName(String name) { 
  22.         this.name = name; 
  23.     } 
  24.     public String getAge() { 
  25.         return age; 
  26.     } 
  27.     public void setAge(String age) { 
  28.         this.age = age; 
  29.     } 
  30.     public String getDescn() { 
  31.         return descn; 
  32.     } 
  33.     public void setDescn(String descn) { 
  34.         this.descn = descn; 
  35.     } 
  36.      
  37. } 

这里定义了一个User对像，当作数据载体。

---GridUtil.java

  1. package org.lee; 
  2.  
  3. import java.util.ArrayList; 
  4. import java.util.List; 
  5.  
  6.  
  7. import com.opensymphony.xwork2.Action; 
  8.  
  9. public class GridUtil implements Action{ 
  10.  
  11.     private int totalProperty = 100; 
  12.     private List root; 
  13.      
  14.     public List getRoot() { 
  15.         return root; 
  16.     } 
  17.     public void setRoot(List root) { 
  18.         this.root = root; 
  19.     } 
  20.     public int getTotalProperty() { 
  21.         return totalProperty; 
  22.     } 
  23.     public void setTotalProperty(int totalProperty) { 
  24.         this.totalProperty = totalProperty; 
  25.     } 
  26.     public String execute(){ 
  27.          
  28.         root = new ArrayList(); 
  29.         User user1 = new User(); 
  30.         user1.setAge("20"); 
  31.         user1.setDescn("descn1"); 
  32.         user1.setId(1); 
  33.         user1.setName("name1"); 
  34.         root.add(user1); 
  35.         User user2 = new User(); 
  36.         user2.setAge("19"); 
  37.         user2.setDescn("descn2"); 
  38.         user2.setId(2); 
  39.         user2.setName("name2"); 
  40.         root.add(user2); 
  41.         User user3 = new User(); 
  42.         user3.setAge("14"); 
  43.         user3.setDescn("descn3"); 
  44.         user3.setId(3); 
  45.         user3.setName("name3"); 
  46.         root.add(user3); 
  47.          
  48.         return Action.SUCCESS; 
  49.     } 
  50.      
  51. } 

定义了一个Action用于进行数据转化与返回。可以在这里进行与数据库交互，totalProperty是总记录数，root是所有数据库取出我值，它是一个List集合。

基本就这么多了，剩下的大家运行看看自己应该能理解。项目源文件由于附伯大小限制，我把ExtJs框架从项目里面移除。