JqGrid小试_yui jqgrid 文档-CSDN博客

本文链接：https://blog.csdn.net/jack0511/article/details/6090269

最近研究了一下jquery的一个Grid插件，JqGrid

环境：Struts2.1.8 + Spring3.0.2 + Hibernate3.3.2 + JqGrid3.8.1

参考了这篇文章

http://blog.csdn.net/gengv/archive/2010/07/05/5714834.aspx

参考以下资料：

JSON Plugin

https://cwiki.apache.org/confluence/display/WW/JSON%20Plugin

JqGrid 官方blog

http://www.trirand.com/blog/

DEMO演示

http://www.trirand.com/blog/jqgrid/jqgrid.html

下载

jquery.jqGrid-3.8.1.zip

jquery-ui-1.8.6.custom.zip

引入JS文件:

grid.locale-cn.js
grid.locale-en.js
jquery-1.4.2.min.js
jquery-ui-1.8.6.custom.min.js
jquery.jqGrid.min.js
table.js

引入CSS文件:

jquery-ui-1.8.6.custom.css
jquery.searchFilter.css
style.css
ui.jqgrid.css
ui.multiselect.css
yui.css

WEB-INF下的jar包：

antlr-2.7.6.jar
aspectjrt-1.6.8.jar
aspectjweaver-1.6.8.jar
cglib-nodep-2.2.jar
commons-collections-3.1.jar
commons-dbcp-1.3.jar
commons-fileupload-1.2.1.jar
commons-logging-1.1.1.jar
commons-pool-1.5.4.jar
dom4j-1.6.1.jar
ejb3-persistence-1.0.2.GA.jar
freemarker-2.3.16.jar
hibernate-annotations-3.4.0.GA.jar
hibernate-commons-annotations-3.1.0.GA.jar
hibernate-core-3.3.2.GA.jar
javassist-3.9.0.GA.jar
jstl-1.1.2.jar
jta-1.1.jar
junit-4.8.1.jar
log4j-1.2.16.jar
ognl-2.7.3.jar
slf4j-api-1.6.0.jar
slf4j-log4j12-1.6.0.jar
spring-aop-3.0.2.RELEASE.jar
spring-asm-3.0.2.RELEASE.jar
spring-beans-3.0.2.RELEASE.jar
spring-context-3.0.2.RELEASE.jar
spring-context-support-3.0.2.RELEASE.jar
spring-core-3.0.2.RELEASE.jar
spring-dao-2.0.jar
spring-expression-3.0.2.RELEASE.jar
spring-jdbc-3.0.2.RELEASE.jar
spring-orm-3.0.2.RELEASE.jar
spring-security-config-3.0.2.RELEASE.jar
spring-security-core-3.0.2.RELEASE.jar
spring-security-taglibs-3.0.2.RELEASE.jar
spring-security-web-3.0.2.RELEASE.jar
spring-web-3.0.2.RELEASE.jar
sqljdbc.jar
standard-1.1.2.jar
struts2-convention-plugin-2.1.8.1.jar
struts2-core-2.1.8.1.jar
struts2-json-plugin-2.1.8.1.jar
struts2-spring-plugin-2.1.8.1.jar
xwork-core-2.1.6.jar

struts.xml

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1.7//EN" "http://struts.apache.org/dtds/struts-2.1.7.dtd">  <struts>  <constant name="struts.devMode" value="true" />  <constant name="struts.serve.static.browserCache" value="false"/> <constant name="struts.action.extension" value="action" />  <constant name="struts.configuration.xml.reload" value="true" />  <constant name="struts.multipart.maxSize" value="10240000"/>  <constant name="struts.enable.DynamicMethodInvocation" value="true"/> <constant name="struts.objectFactory" value="spring" /> <include file="struts-login.xml"></include> <include file="struts-userManage.xml"></include> </struts>

struts-userManage.xml

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1.7//EN" "http://struts.apache.org/dtds/struts-2.1.7.dtd">  <struts>  <package name="userManage" extends="json-default"> <action name="userManage" class="userManageAction"> <result name="success">/WEB-INF/jsp/userManage/user-list.jsp</result> </action> <action name="userList" class="userManageAction"> <result name="success" type="json"> <param name="includeProperties"> ^gridModel/[/d+/]/.id, ^gridModel/[/d+/]/.userName, ^gridModel/[/d+/]/.realName/.fullName, ^gridModel/[/d+/]/.realName/.lastName, ^gridModel/[/d+/]/.realName/.firstName, ^gridModel/[/d+/]/.email, ^gridModel/[/d+/]/.age, ^gridModel/[/d+/]/.registerDate, rows, page, total, record </param> <param name="noCache">true</param> <param name="ignoreHierarchy">false</param> </result> </action> </package> </struts>

applicationContext.xml

<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:jee="http://www.springframework.org/schema/jee" xmlns:tx="http://www.springframework.org/schema/tx" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsd http://www.springframework.org/schema/jee http://www.springframework.org/schema/jee/spring-jee-3.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd" default-lazy-init="true"> <description>Spring公共配置 </description>  <bean class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer"> <property name="systemPropertiesModeName" value="SYSTEM_PROPERTIES_MODE_OVERRIDE" /> <property name="ignoreResourceNotFound" value="true" /> <property name="locations"> <list>  <value>classpath*:/application.properties</value>  <value>classpath*:/application.local.properties</value>  <value>file:/var/springside/application.server.properties</value> </list> </property> </bean>  <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close">  <property name="driverClassName" value="${jdbc.driver}" /> <property name="url" value="${jdbc.url}" /> <property name="username" value="${jdbc.username}" /> <property name="password" value="${jdbc.password}" />  <property name="initialSize" value="${dbcp.initialSize}" /> <property name="maxActive" value="${dbcp.maxActive}" /> <property name="maxIdle" value="${dbcp.maxIdle}" /> <property name="defaultAutoCommit" value="false" /> </bean>  <bean id="sessionFactory" class="org.springframework.orm.hibernate3.annotation.AnnotationSessionFactoryBean"> <property name="dataSource" ref="dataSource" /> <property name="hibernateProperties"> <props> <prop key="hibernate.dialect">${hibernate.dialect}</prop> <prop key="hibernate.show_sql">${hibernate.show_sql}</prop> <prop key="hibernate.hbm2ddl.auto">${hibernate.hbm2ddl.auto}</prop>  </props> </property> <property name="packagesToScan" value="com.wen.entity" /> </bean>  <context:component-scan base-package="com.wen" /> <bean id="baseDao" class="com.wen.dao.BaseDaoT" > <property name="sessionFactory" ref="sessionFactory"/> </bean> </beans>

User.java

/** * */ package com.wen.entity; import java.io.Serializable; import java.util.Date; import java.util.List; import javax.persistence.AttributeOverride; import javax.persistence.AttributeOverrides; import javax.persistence.Column; import javax.persistence.Embedded; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.JoinColumn; import javax.persistence.JoinTable; import javax.persistence.ManyToMany; import javax.persistence.OrderBy; import javax.persistence.Table; import javax.persistence.Transient; import org.apache.struts2.json.annotations.JSON; import org.hibernate.annotations.Fetch; import org.hibernate.annotations.FetchMode; /** * @author wenbin.ji * */ @Entity @Table(name="COM_WEN_USER") public class User implements Serializable { @Id @GeneratedValue(strategy=GenerationType.IDENTITY) private Long id; @Column(name="USERNAME",nullable=false,unique=true) private String userName; @Column(name="PASSWORD",nullable=false) private String password; @Column(name="EMAIL",nullable=false) private String email; @Column(name="AGE") private Integer age; @Column(name="REGISTERDATE") private Date registerDate; @Embedded @AttributeOverrides( { @AttributeOverride(name = "lastName", column = @Column(name = "LASTNAME")), @AttributeOverride(name = "firstName", column = @Column(name = "FIRSTNAME")), }) private RealName realName; // @Transient // private String fullName; //@JSON(name="fullName") // @Transient // public String getFullName() { // return this.userName; // } @ManyToMany //中间表定义,表名采用默认命名规则 @JoinTable(name = "COM_WEN_USER_ROLE", joinColumns = { @JoinColumn(name = "USER_ID") }, inverseJoinColumns = { @JoinColumn(name = "ROLE_ID") }) //Fecth策略定义 @Fetch(FetchMode.SUBSELECT) //集合按id排序. @OrderBy("id") //集合必须定义为泛型，才能关联到Role实体 private List<Role> roleList = null;//new ArrayList<Role>(); public Long getId() { return id; } public void setId(Long id) { this.id = id; } public String getUserName() { return userName; } public void setUserName(String userName) { this.userName = userName; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } public List<Role> getRoleList() { return roleList; } public void setRoleList(List<Role> roleList) { this.roleList = roleList; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } public Integer getAge() { return age; } public void setAge(Integer age) { this.age = age; } public Date getRegisterDate() { return registerDate; } public void setRegisterDate(Date registerDate) { this.registerDate = registerDate; } public RealName getRealName() { return realName; } public void setRealName(RealName realName) { this.realName = realName; } }

RealName.java ,User的Component映射类

/** * */ package com.wen.entity; import java.io.Serializable; import javax.persistence.Column; import javax.persistence.Embeddable; /** * @author wenbin.ji * */ @Embeddable public class RealName implements Serializable { private String lastName; private String firstName; private String fullName; public String getFullName() { return this.getLastName()+this.getFirstName(); } public String getLastName() { return lastName; } public void setLastName(String lastName) { this.lastName = lastName; } public String getFirstName() { return firstName; } public void setFirstName(String firstName) { this.firstName = firstName; } }

下面的Action直接使用了前面所说参考文档的代码

JqGridBaseAction.java

/** * */ package com.wen.action; import java.util.Collections; import java.util.List; import com.opensymphony.xwork2.ActionSupport; public abstract class JqGridBaseAction<T> extends ActionSupport { // 和jqGrid组件相关的参数属性 private List<T> gridModel = Collections.emptyList(); private Integer rows = 0; private Integer page = 0; private Integer total = 0; private Integer record = 0; private String sord; private String sidx; private String search; public abstract int getResultSize(); public abstract List<T> listResults(int from, int length); public String refreshGridModel() { try { List<T> results = Collections.emptyList(); record = this.getResultSize(); int from = rows * (page - 1); int length = rows; results = this.listResults(from, length); this.setGridModel(results); total = (int) Math.ceil((double) record / (double) rows); return SUCCESS; } catch (Exception e) { e.printStackTrace(); this.addActionError(e.getMessage()); return ERROR; } } public List<T> getGridModel() { return gridModel; } public void setGridModel(List<T> gridModel) { this.gridModel = gridModel; } 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 Integer getTotal() { return total; } public void setTotal(Integer total) { this.total = total; } public Integer getRecord() { return record; } public void setRecord(Integer record) { this.record = record; } public String getSord() { return sord; } public void setSord(String sord) { this.sord = sord; } public String getSidx() { return sidx; } public void setSidx(String sidx) { this.sidx = sidx; } public String getSearch() { return search; } public void setSearch(String search) { this.search = search; } }

UserManageAction.java

/** * */ package com.wen.action; import java.util.List; import javax.annotation.Resource; import javax.persistence.Transient; import org.springframework.context.annotation.Scope; import org.springframework.stereotype.Controller; import com.opensymphony.xwork2.ActionSupport; import com.wen.dao.UserDao; import com.wen.entity.User; import com.wen.service.UserService; import com.wen.util.ApplicationContextUtil; /** * @author wenbin.ji * */ @Controller @Scope("prototype") public class UserManageAction extends JqGridBaseAction<User> { @Resource private UserService userService = null; private List<User> userList = null; public UserManageAction() { super(); } public List<User> getUserList() { return userList; } public UserService getUserService() { return userService; } public void setUserService(UserService userService) { this.userService = userService; } public String goMain(){ return "success"; } public String showUserList(){ //userList = userService.queryAll(); this.refreshGridModel(); return "success"; } @Override public int getResultSize() { return userService.queryAll().size(); } @Override public List<User> listResults(int from, int length) { return userService.queryAll(); } }

BaseDaoT.java---随便写的，未利用spring声明式事务管理，未加分页处理

/** * */ package com.wen.dao; import java.io.Serializable; import java.util.List; import org.hibernate.Criteria; import org.hibernate.Query; import org.hibernate.Session; import org.hibernate.SessionFactory; import org.hibernate.Transaction; import org.hibernate.criterion.Criterion; import org.hibernate.criterion.Restrictions; import org.springframework.beans.factory.annotation.Autowired; import com.wen.entity.Department; import com.wen.entity.Employee; import com.wen.util.HibernateUtil; /** * 泛型DAO * @author wenbin.ji * */ public class BaseDaoT<T,PK extends Serializable> { private Class<T> type; public BaseDaoT(Class<T> type) { this.type = type; } @Autowired public SessionFactory sessionFactory =null; public SessionFactory getSessionFactory() { return sessionFactory; } public void setSessionFactory(SessionFactory sessionFactory) { this.sessionFactory = sessionFactory; } public PK create(T t){ PK pk = null; Session session = sessionFactory.openSession(); Transaction tx = session.beginTransaction(); try { pk = (PK)session.save(t); tx.commit(); } catch (Exception e) { e.printStackTrace(); tx.rollback(); } finally { if (tx != null) { tx = null; } if (session != null) { session.close(); } } return pk; } public void delete(T t){ Session session = sessionFactory.openSession(); Transaction tx = session.beginTransaction(); try { session.delete(t); tx.commit(); } catch (Exception e) { e.printStackTrace(); tx.rollback(); } finally { if (tx != null) { tx = null; } if (session != null) { session.close(); } } } public void update(T t){ Session session = sessionFactory.openSession(); Transaction tx = session.beginTransaction(); try { session.update(t); tx.commit(); } catch (Exception e) { e.printStackTrace(); tx.rollback(); } finally { if (tx != null) { tx = null; } if (session != null) { session.close(); } } } public T query(PK pk){ T t=null; Session session = sessionFactory.openSession(); Transaction tx = session.beginTransaction(); try { t = (T)session.get(type, pk); tx.commit(); } catch (Exception e) { e.printStackTrace(); tx.rollback(); } finally { if (tx != null) { tx = null; } if (session != null) { session.close(); } } return t; } public List<T> queryAll() { List<T> list=null; Session session = sessionFactory.openSession(); try { Criteria criteria = session.createCriteria(type); list = criteria.list(); } catch (Exception e) { e.printStackTrace(); } finally { if (session != null) { session.close(); } } return list; } public List<T> queryList(List<Criterion> criterionList,int pageNum,int pageSize) { List<T> list=null; Session session = sessionFactory.openSession(); int firstResult = (pageNum-1)*pageSize; int maxResults = pageSize; try { Criteria criteria = session.createCriteria(type); criteria.setFirstResult(firstResult); criteria.setMaxResults(maxResults); for(Criterion criterion : criterionList){ criteria.add(criterion); } list = criteria.list(); } catch (Exception e) { e.printStackTrace(); } finally { if (session != null) { session.close(); } } return list; } }

Service及DAO类略去

user-list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="com.wen.entity.User" %> <%@ page import="java.util.List" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="<%=basePath %>/css/jquery-ui-1.8.6.custom.css" /> <link rel="stylesheet" type="text/css" href="<%=basePath %>/css/ui.jqgrid.css" /> <mce:script src="<%=basePath %></mce:script> <mce:script src="<%=basePath %></mce:script> <mce:script src="<%=basePath %></mce:script> <mce:script type="text/javascript"></mce:script> <title>用户列表</title> </head> <body> <h2> 用户列表 </h2> <div> <input type="BUTTON" id="bsdata" value="Search" /> <table id="list4"></table> <table id="gridTable"></table> <div id="gridPager"></div> </div> </body> </html>