java_web_Jquery_jqgrid从Struts中获取数据显示前台

 

先看看效果图,在博文的最下面我们上传我的源码,因为压缩后还是有6M,所以只能去下载中心下载,下面会留有地址

源码里面有两个一个是页面上直接取的,还有一个是从struts后台取出来显示到页面的,下面只介绍第二种

 

 

  
  
  
  
  1. <!--  引入CSS:  --> 
  2. <link href="<%=basePath%>/css/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />   
  3.        
  4. <link href="<%=basePath%>/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />   
  5.        
  6. <!--引入JS:   --> 
  7.      
  8.  <script src="<%=basePath%>/js/jquery-1.7.2.js" type="text/javascript"></script>   
  9.       
  10. <script src="<%=basePath%>/js/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>   
  11.      
  12. <script src="<%=basePath%>/js/grid.locale-cn.js" type="text/javascript"></script>   
  13.      
  14. <script src="<%=basePath%>/js/jquery.jqGrid.min.js" type="text/javascript"></script> 
  15.  
  16. <script type="text/javascript">   
  17. </script> 

这个是引入的css和js

 

  
  
  
  
  1. <body> 
  2.     <table id="gridTable"></table>  
  3.     <div id="gridPager" style="margin-bottom:15px;"></div> 
  4.   
  5.   
  6.     <script type="text/javascript">   
  7.      
  8.     $(function() 
  9.     { 
  10.         $("#gridTable").jqGrid({ 
  11.                 url:"getJqgrid.action", 
  12.                 datatype: "json", 
  13.                 height: 250, 
  14.                 colNames:['编号','用户名', '性别', '邮箱', 'QQ','手机号','出生日期'], 
  15.                 colModel:[ 
  16.                         {name:'id',index:'id', width:60, sorttype:"int",editable:true}, 
  17.                         {name:'userName',index:'userName', width:90,editable:true}, 
  18.                         {name:'gender',index:'gender', width:90,editable:true}, 
  19.                         {name:'email',index:'email', width:125,sorttype:"string",editable:true}, 
  20.                         {name:'QQ',index:'QQ', width:100,editable:true},                 
  21.                         {name:'mobilePhone',index:'mobilePhone', width:120,editable:true},                 
  22.                         {name:'birthday',index:'birthday', width:100, sorttype:"date",editable:true}                 
  23.                 ], 
  24.                 sortname:'id', 
  25.                 sortorder:'asc', 
  26.                 viewrecords:true, 
  27.                 altRows:true, 
  28.                 rowNum:10, 
  29.                 rowList:[10,20,30], 
  30.                 jsonReader:{ 
  31.                     root:"dataRows",                // 数据行(默认为:rows) 
  32.                     page:"curPage",            // 当前页 
  33.                     total:"totalPages",    // 总页数 
  34.                     records:"totalRecords",    // 总记录数 
  35.                     repeatitems : false                // 设置成false,在后台设置值的时候,可以乱序。且并非每个值都得设 
  36.                 }, 
  37.                 prmNames:{rows:"page.pageSize",page:"page.curPageNo",sort:"page.orderBy",order:"page.order"}, 
  38.                 pager:"#gridPager", 
  39.                 caption: "从Struts2中获取数据" 
  40.         }).navGrid('#pager2',{edit:true,add:false,del:false}); 
  41.  
  42.     }); 
  43.     </script> 
  44.      
  45.      
  46.      
  47.   </body> 

jsp页面代码部分就是这样了很简单

action代码部分的注释是转载于其他道友的博文,下面贴上代码

 

  
  
  
  
  1. package com.cloudWinter.jjqfrid; 
  2.  
  3. import java.util.ArrayList; 
  4. import java.util.HashMap; 
  5. import java.util.List; 
  6. import java.util.Map; 
  7.  
  8. import com.opensymphony.xwork2.ActionSupport; 
  9.  
  10.  
  11. /** 
  12. * 该Struts2向客户端返回一个json对象。为了简便,数据不是从数据库获得的。 
  13. * jqGrid默认期望返回的json对象格式要求如下: 
  14. * {"page":"1","total":"2","records":"13", 
  15. * "rows":[ 
  16. *                 {id:"1",cell:["1","polaris","男","[email protected]","772618379","18329382732","1985-10-2"]}, 
  17. *                 {id:"2",cell:["2","张三","女","[email protected]","272618382","15329382732","1986-10-12"]}, 
  18. *                 {id:"3",cell:["3","王五","女","[email protected]","172635372","13329389832","1987-12-21"]}, 
  19. *                 {id:"4",cell:["4","赵六","男","[email protected]","372618332","18929343731","1988-09-22"]} 
  20. *         ] 
  21. * } 
  22. * 当然,在js中,可以通过jqGrid的jsonReader属性来修改默认格式 
  23. * 因为默认的格式,rows的数据要求顺序不能变,且每个字段都得有值(空也得有"")。因而, 
  24. * 在jsonReader中定义repeatitems : false。这样,rows就变成了: 
  25. * "rows":[ 
  26. *                 {id:"1",userName:"polaris",gender:" 男",email:"[email protected]",QQ:"772618379",mobilePhone:"18329382732",birthday:"1985-10-2"]}, 
  27. *                 {id:"2",userName:"徐新华",gender:" 男",email:"[email protected]",QQ:"272618382",mobilePhone:"15329382732",birthday:"1986-10-12"]}, 
  28. *                 {id:"3",userName:"王五",gender:" 女",email:"[email protected]",QQ:"172635372",mobilePhone:"13329389832",birthday:"1987-12-21"]}, 
  29. *                 {id:"4",userName:"赵六",gender:" 女",email:"[email protected]",QQ:"372618332",mobilePhone:"18929343731",birthday:"1988-09-22"]} 
  30. *         ] 
  31. * @author cloudwinter  
  32. * 
  33.  
  34. /** 
  35.  * @author cloudwinter 
  36.  *  
  37.  * 2013-1-11    
  38.  * 
  39.  * 
  40.  *  description: 测试jquery_Jqfrid插件的运用 
  41.  * 
  42.  * 
  43.  */ 
  44. public class Test extends ActionSupport{ 
  45.      
  46.     /** 
  47.      * 自定义uid 
  48.      */ 
  49.     private static final long serialVersionUID = 1L; 
  50.      
  51.     /** 
  52.      * 该属性专门用于接收删除的数据的ID(主键)。注意,当支持一次删除多记录时,id的值是通过','号分隔的多个 
  53.      */ 
  54.     protected String id; 
  55.      
  56.     /** 
  57.      * 总页数 
  58.      */ 
  59.     protected int totalPages; 
  60.      
  61.     /** 
  62.      * 显示第几页 
  63.      */ 
  64.     protected int curPage; 
  65.      
  66.     /** 
  67.      * 总记录数 
  68.      */ 
  69.     protected int totalRecords; 
  70.      
  71.     /** 
  72.      * 保存实际的数据 
  73.      */ 
  74.     protected List<Map<String,Object>> dataRows = new ArrayList<Map<String,Object>>(); 
  75.      
  76.      
  77.     public String getJqgrid() 
  78.     { 
  79.         /** 
  80.          * 构建几条数据 
  81.          */ 
  82.         int i=0
  83.         for(i=0;i<4;i++) 
  84.         { 
  85.             // 定义一个Map<String,Object>存放一行行数据 
  86.             Map<String, Object> parmMap = new HashMap<String, Object>(); 
  87.             parmMap.put("id", i); 
  88.             parmMap.put("userName""userName-"+i); 
  89.             parmMap.put("gender""gender-"+i); 
  90.             parmMap.put("email""email-"+i); 
  91.             parmMap.put("QQ""QQ-"+i); 
  92.             parmMap.put("mobilePhone""mobilePhone-"+i); 
  93.             parmMap.put("birthday""birthday-"+i); 
  94.             dataRows.add(parmMap); 
  95.         } 
  96.         totalPages = 1
  97.         curPage = 1
  98.         totalRecords = i; 
  99.          
  100.         return SUCCESS; 
  101.     } 
  102.      
  103.     public String showList() 
  104.     { 
  105.         return SUCCESS; 
  106.     } 
  107.      
  108.      
  109.      
  110.  
  111.     /** 
  112.      * 以下是set、get方法 
  113.      * @return 
  114.      */ 
  115.     public String getId() { 
  116.         return id; 
  117.     } 
  118.  
  119.  
  120.     public void setId(String id) { 
  121.         this.id = id; 
  122.     } 
  123.  
  124.  
  125.     public int getTotalPages() { 
  126.         return totalPages; 
  127.     } 
  128.  
  129.  
  130.     public void setTotalPages(int totalPages) { 
  131.         this.totalPages = totalPages; 
  132.     } 
  133.  
  134.  
  135.     public int getCurPage() { 
  136.         return curPage; 
  137.     } 
  138.  
  139.  
  140.     public void setCurPage(int curPage) { 
  141.         this.curPage = curPage; 
  142.     } 
  143.  
  144.  
  145.     public int getTotalRecords() { 
  146.         return totalRecords; 
  147.     } 
  148.  
  149.  
  150.     public void setTotalRecords(int totalRecords) { 
  151.         this.totalRecords = totalRecords; 
  152.     } 
  153.  
  154.  
  155.     public List<Map<String, Object>> getDataRows() { 
  156.         return dataRows; 
  157.     } 
  158.  
  159.  
  160.     public void setDataRows(List<Map<String, Object>> dataRows) { 
  161.         this.dataRows = dataRows; 
  162.     } 
  163.  
  164.  
  165.      
  166.      
  167.      
  168.      
  169.      
  170.      
  171.      
  172.  

最后看下struts.xml,我这边分了两个部分为了方便扩展

这个是struts.xml

  
  
  
  
  1. <?xml version="1.0" encoding="UTF-8" ?> 
  2. <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"  "http://struts.apache.org/dtds/struts-2.0.dtd"> 
  3. <struts> 
  4.     <constant name="struts.custom.i18n.resources" value="param_config" /> 
  5.     <constant name="struts.ui.theme" value="simple" /> 
  6.     <!-- 设置字符的编码集否则会乱码 --> 
  7.     <constant name="struts.i18n.encoding" value="utf-8"></constant> 
  8.     <!-- 为true代表开发模式打开,修改配置文件无需重启服务 --> 
  9.     <constant name="struts.devMode" value="true" /> 
  10.  
  11.     <include file="../conf/struts/test.struts.xml" /> 
  12.      
  13.  
  14.     <!-- 定义全局的异常  --> 
  15.     <package name="jqgrid" extends="json-default"> 
  16.         <global-results> 
  17.             <result name="error">/jsp/common/error.jsp</result> 
  18.         </global-results> 
  19.     </package> 
  20.  
  21. </struts> 

这个是test.struts.xml

 

  
  
  
  
  1. <?xml version="1.0" encoding="UTF-8" ?> 
  2. <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"  "http://struts.apache.org/dtds/struts-2.0.dtd"> 
  3. <struts> 
  4.     <package name="test" extends="jqgrid"  namespace="/">  
  5.          
  6.         <!-- 显示列表 --> 
  7.         <action name="showList" class="com.cloudWinter.jjqfrid.Test" method="showList"> 
  8.             <result name="success">/jsp/jqgrid/list.jsp</result> 
  9.         </action> 
  10.          
  11.         <!-- 从后台取数据这里显示 --> 
  12.         <action name="getJqgrid" class="com.cloudWinter.jjqfrid.Test" method="getJqgrid"> 
  13.             <result type="json"></result> 
  14.         </action> 
  15.          
  16.     </package> 
  17. </struts> 

下载地址http://down.51cto.com/data/660096

你可能感兴趣的:(struts2,后台取数据,Jquery_jqfrid)