struts2 jquery grid plugin 简单应用(一) -- Grid列表显示

83453065

2013-06-06

关注关注

项目用到struts-jquery-grid，自己做个简单的测试加深理解

参考：

http://code.google.com/p/struts2-jquery/wiki/GridTag

http://blog.csdn.net/gengv/article/details/5714834

一、MyEclipse中新建ssh项目（略），导入grid插件包

struts2-jquery-plugin-3.x.x.jar(用到sj里面Dialog)

struts2-jquery-grid-plugin-3.x.x.jar

二、JSP页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="sjgrid" uri="/struts-jquery-grid-tags"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<base href="<%=basePath%>">
	
	<title>Test001.Demo-用户列表</title>
	<script type="text/javascript" src="<%=basePath%>js/jquery/jquery-1.6.2.js"></script>
	<sj:head jqueryui="true" jquerytheme="myredmond" locale="zh-CN"
		customBasepath="jquerygridtheme/themes" />
	<script type="text/javascript" src="<%=basePath%>js/jquery/jquery.jqGrid.js"></script>
	
	<script type="text/javascript" src="<%=basePath%>js/user/user.js"></script>
	
</head>

<body>

	this is userlist page!
	<div id="userlist">

		<div id="gridDiv">

			<!--********* grid查询请求连接 *********-->
			<s:url id="searchurl" action="user!search.action"></s:url>
	<sjgrid:grid height="422"  id="userGrid" href="%{searchurl}" multiselect="true"
		autowidth="true" navigatorDelete="false"
		onCompleteTopics="jqgridComplete" gridModel="gridModel"
		rowList="1,5,10" rowNum="5" rownumbers="true" 
		navigator="true" pager="true" viewrecords="true" 
		navigatorEdit="false" navigatorSearch="false" footerrow="true"
		userDataOnFooter="true" multiselectWidth="40"
		prmNames="{page:'jQueryGridBean.page',rows:'jQueryGridBean.rows',
					sort:'jQueryGridBean.sort',order:'jQueryGridBean.order'}"
		navigatorAdd="false"  caption="用户列表" dataType="json">
		
		<!--********* 共有属性 *********-->
		<sjgrid:gridColumn name="id"  index="id" 
			title="id"></sjgrid:gridColumn>
		
		<sjgrid:gridColumn name="name" index="name" editable="true"
			title="姓名" sortable="true"></sjgrid:gridColumn>
		
	</sjgrid:grid>
		</div>
	</div>

	

</body>
</html>

1.引入标签struts-jquery-tags、struts-jquery-grid-tags

2.引入js、css

---自定义主题:

a.项目WebRoot下新建目录，结构如下[/WebRoot/jquerygridtheme/themes]

b.在struts-jquery-plugin插件包拷贝theme主题redmond，放到新建目录themes中，改为myredmond

c.jsp页面添加sj:head标签

<sj:head jqueryui="true" jquerytheme="myredmond" locale="zh-CN"
		customBasepath="jquerygridtheme/themes" />

标签引入文件：

jquery.struts2-3.x.x.min.js、jquery.subscribe.min.js、jquery.ui.core.min.js、jquery-1.x.x.min.js、jquery-ui.css

标签属性：

jqueryui-true引入jqueryuijs、css
jquerytheme-引入主题名(主题文件夹名)
locale-引入本地化语言js
customBasepath-引入主题文件根目录

3.声明Grid标签

prmNames：传入后台参数

{page:'jQueryGridBean.page'}:后台jQueryGridBean.page属性获取page值

三、Java

---UserAction.java

/**
 * test.用户
 * Namespace("/user")
 */
@Controller
@Namespace("/user")
@Results( {
	@Result(name = "success", location = "userList.jsp")
	 })
public class UserAction extends BaseAction<User>{
	

	private static final long serialVersionUID = -518583705783894216L;

	private UserDAO userDAO;
	
	private String id;
	
	private List<User> users;

	
	@Override
	public String execute() throws Exception {
		return ActionSupport.SUCCESS;
	}
	
	/**
	 * @Grid
	 * 	超简单显示Grid用户列表...
	 * @return
	 */
	public String search() throws Exception {
	  List<User> users = userDAO.findAll();     
          jQueryGridBean.gridModel = users;
	  return JQUERY_GRID_RESULT;
	}


	@Autowired
	public void setUserDAO(UserDAO userDAO) {
		this.userDAO = userDAO;
	}


	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public List<User> getUsers() {
		return users;
	}
	public void setUsers(List<User> users) {
		this.users = users;
	}
}

---BaseAction.java

package com.test.web.action;

import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.apache.struts2.ServletActionContext;
import org.apache.struts2.convention.annotation.Namespace;
import org.apache.struts2.convention.annotation.Result;
import org.apache.struts2.convention.annotation.Results;
import org.apache.struts2.json.annotations.JSON;
import org.springframework.stereotype.Controller;

import com.opensymphony.xwork2.ActionSupport;
import com.test.util.JQueryGridBean;

/**
 * action基类 
 */
@Controller
@Namespace("/")
@Results( {
	@Result(name = "jquerygrid", type = "json", params = {
		"ignoreHierarchy", "false", "root", "jQueryGridBean" })//返回jQueryGridBean json数据
	})
public class BaseAction<T> extends ActionSupport{
	
	
	private static final long serialVersionUID = -2473510974731716761L;

	protected static final String JQUERY_GRID_RESULT = "jquerygrid";
	
	public JQueryGridBean<T> jQueryGridBean = new JQueryGridBean<T>();
	
	
	

}

---JQueryGridBean

package com.test.util;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.stereotype.Component;

/**
 * 封装与页面grid交互参数
 */
@Component
public class JQueryGridBean<T> {
	
	public int rows = 0;

	public int page = 0;
	
	public Boolean success = true;

	public String order = "";

	public String sort = "";

	public long total = 0;

	public Long records;

	public List<T> gridModel = null;
	
	
	
	public Integer getRows() {
		return rows;
	}
	public void setRows(Integer rows) {
		this.rows = rows;
	}

	
	public Integer getPage() {
		return page;
	}
	public void setPage(Integer page) {
		this.page = page;
	}

	

	
	public long getTotal() {
		return total;
	}
	public void setTotal(long total) {
		this.total = total;
	}

	
	
	public void setRows(int rows) {
		this.rows = rows;
	}

	

	public void clearResult() {
		this.gridModel = new ArrayList<T>();
	}

	
	public Boolean getSuccess() {
		return success;
	}
	public void setSuccess(Boolean success) {
		this.success = success;
	}

	
	public void setPage(int page) {
		this.page = page;
	}

	
	public String getSort() {
		return sort;
	}
	public void setSort(String sort) {
		this.sort = sort;
	}

	
	public String getOrder() {
		return order;
	}
	public void setOrder(String order) {
		this.order = order;
	}

	
	public Long getRecords() {
		return records;
	}
	public void setRecords(Long records) {
		this.records = records;
	}

	
	
	public List<T> getGridModel() {
		return gridModel;
	}
	public void setGridModel(List<T> gridModel) {
		this.gridModel = gridModel;
	}
	
}

prefix struts2 jquery