先看看效果图,在博文的最下面我们上传我的源码,因为压缩后还是有6M,所以只能去下载中心下载,下面会留有地址
源码里面有两个一个是页面上直接取的,还有一个是从struts后台取出来显示到页面的,下面只介绍第二种
- <!-- 引入CSS: -->
- <link href="<%=basePath%>/css/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
- <link href="<%=basePath%>/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
- <!--引入JS: -->
- <script src="<%=basePath%>/js/jquery-1.7.2.js" type="text/javascript"></script>
- <script src="<%=basePath%>/js/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
- <script src="<%=basePath%>/js/grid.locale-cn.js" type="text/javascript"></script>
- <script src="<%=basePath%>/js/jquery.jqGrid.min.js" type="text/javascript"></script>
- <script type="text/javascript">
- </script>
这个是引入的css和js
- <body>
- <table id="gridTable"></table>
- <div id="gridPager" style="margin-bottom:15px;"></div>
- <script type="text/javascript">
- $(function()
- {
- $("#gridTable").jqGrid({
- url:"getJqgrid.action",
- datatype: "json",
- height: 250,
- colNames:['编号','用户名', '性别', '邮箱', 'QQ','手机号','出生日期'],
- colModel:[
- {name:'id',index:'id', width:60, sorttype:"int",editable:true},
- {name:'userName',index:'userName', width:90,editable:true},
- {name:'gender',index:'gender', width:90,editable:true},
- {name:'email',index:'email', width:125,sorttype:"string",editable:true},
- {name:'QQ',index:'QQ', width:100,editable:true},
- {name:'mobilePhone',index:'mobilePhone', width:120,editable:true},
- {name:'birthday',index:'birthday', width:100, sorttype:"date",editable:true}
- ],
- sortname:'id',
- sortorder:'asc',
- viewrecords:true,
- altRows:true,
- rowNum:10,
- rowList:[10,20,30],
- jsonReader:{
- root:"dataRows", // 数据行(默认为:rows)
- page:"curPage", // 当前页
- total:"totalPages", // 总页数
- records:"totalRecords", // 总记录数
- repeatitems : false // 设置成false,在后台设置值的时候,可以乱序。且并非每个值都得设
- },
- prmNames:{rows:"page.pageSize",page:"page.curPageNo",sort:"page.orderBy",order:"page.order"},
- pager:"#gridPager",
- caption: "从Struts2中获取数据"
- }).navGrid('#pager2',{edit:true,add:false,del:false});
- });
- </script>
- </body>
jsp页面代码部分就是这样了很简单
action代码部分的注释是转载于其他道友的博文,下面贴上代码
- package com.cloudWinter.jjqfrid;
- import java.util.ArrayList;
- import java.util.HashMap;
- import java.util.List;
- import java.util.Map;
- import com.opensymphony.xwork2.ActionSupport;
- /**
- * 该Struts2向客户端返回一个json对象。为了简便,数据不是从数据库获得的。
- * jqGrid默认期望返回的json对象格式要求如下:
- * {"page":"1","total":"2","records":"13",
- * "rows":[
- * {id:"1",cell:["1","polaris","男","[email protected]","772618379","18329382732","1985-10-2"]},
- * {id:"2",cell:["2","张三","女","[email protected]","272618382","15329382732","1986-10-12"]},
- * {id:"3",cell:["3","王五","女","[email protected]","172635372","13329389832","1987-12-21"]},
- * {id:"4",cell:["4","赵六","男","[email protected]","372618332","18929343731","1988-09-22"]}
- * ]
- * }
- * 当然,在js中,可以通过jqGrid的jsonReader属性来修改默认格式
- * 因为默认的格式,rows的数据要求顺序不能变,且每个字段都得有值(空也得有"")。因而,
- * 在jsonReader中定义repeatitems : false。这样,rows就变成了:
- * "rows":[
- * {id:"1",userName:"polaris",gender:" 男",email:"[email protected]",QQ:"772618379",mobilePhone:"18329382732",birthday:"1985-10-2"]},
- * {id:"2",userName:"徐新华",gender:" 男",email:"[email protected]",QQ:"272618382",mobilePhone:"15329382732",birthday:"1986-10-12"]},
- * {id:"3",userName:"王五",gender:" 女",email:"[email protected]",QQ:"172635372",mobilePhone:"13329389832",birthday:"1987-12-21"]},
- * {id:"4",userName:"赵六",gender:" 女",email:"[email protected]",QQ:"372618332",mobilePhone:"18929343731",birthday:"1988-09-22"]}
- * ]
- * @author cloudwinter
- *
- /**
- * @author cloudwinter
- *
- * 2013-1-11
- *
- *
- * description: 测试jquery_Jqfrid插件的运用
- *
- *
- */
- public class Test extends ActionSupport{
- /**
- * 自定义uid
- */
- private static final long serialVersionUID = 1L;
- /**
- * 该属性专门用于接收删除的数据的ID(主键)。注意,当支持一次删除多记录时,id的值是通过','号分隔的多个
- */
- protected String id;
- /**
- * 总页数
- */
- protected int totalPages;
- /**
- * 显示第几页
- */
- protected int curPage;
- /**
- * 总记录数
- */
- protected int totalRecords;
- /**
- * 保存实际的数据
- */
- protected List<Map<String,Object>> dataRows = new ArrayList<Map<String,Object>>();
- public String getJqgrid()
- {
- /**
- * 构建几条数据
- */
- int i=0;
- for(i=0;i<4;i++)
- {
- // 定义一个Map<String,Object>存放一行行数据
- Map<String, Object> parmMap = new HashMap<String, Object>();
- parmMap.put("id", i);
- parmMap.put("userName", "userName-"+i);
- parmMap.put("gender", "gender-"+i);
- parmMap.put("email", "email-"+i);
- parmMap.put("QQ", "QQ-"+i);
- parmMap.put("mobilePhone", "mobilePhone-"+i);
- parmMap.put("birthday", "birthday-"+i);
- dataRows.add(parmMap);
- }
- totalPages = 1;
- curPage = 1;
- totalRecords = i;
- return SUCCESS;
- }
- public String showList()
- {
- return SUCCESS;
- }
- /**
- * 以下是set、get方法
- * @return
- */
- public String getId() {
- return id;
- }
- public void setId(String id) {
- this.id = id;
- }
- public int getTotalPages() {
- return totalPages;
- }
- public void setTotalPages(int totalPages) {
- this.totalPages = totalPages;
- }
- public int getCurPage() {
- return curPage;
- }
- public void setCurPage(int curPage) {
- this.curPage = curPage;
- }
- public int getTotalRecords() {
- return totalRecords;
- }
- public void setTotalRecords(int totalRecords) {
- this.totalRecords = totalRecords;
- }
- public List<Map<String, Object>> getDataRows() {
- return dataRows;
- }
- public void setDataRows(List<Map<String, Object>> dataRows) {
- this.dataRows = dataRows;
- }
- }
最后看下struts.xml,我这边分了两个部分为了方便扩展
这个是struts.xml
- <?xml version="1.0" encoding="UTF-8" ?>
- <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.0.dtd">
- <struts>
- <constant name="struts.custom.i18n.resources" value="param_config" />
- <constant name="struts.ui.theme" value="simple" />
- <!-- 设置字符的编码集否则会乱码 -->
- <constant name="struts.i18n.encoding" value="utf-8"></constant>
- <!-- 为true代表开发模式打开,修改配置文件无需重启服务 -->
- <constant name="struts.devMode" value="true" />
- <include file="../conf/struts/test.struts.xml" />
- <!-- 定义全局的异常 -->
- <package name="jqgrid" extends="json-default">
- <global-results>
- <result name="error">/jsp/common/error.jsp</result>
- </global-results>
- </package>
- </struts>
这个是test.struts.xml
- <?xml version="1.0" encoding="UTF-8" ?>
- <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.0.dtd">
- <struts>
- <package name="test" extends="jqgrid" namespace="/">
- <!-- 显示列表 -->
- <action name="showList" class="com.cloudWinter.jjqfrid.Test" method="showList">
- <result name="success">/jsp/jqgrid/list.jsp</result>
- </action>
- <!-- 从后台取数据这里显示 -->
- <action name="getJqgrid" class="com.cloudWinter.jjqfrid.Test" method="getJqgrid">
- <result type="json"></result>
- </action>
- </package>
- </struts>
下载地址http://down.51cto.com/data/660096