easy-ui1.3.5+jqgrid4.5.4+struts2.1+jpa2.0简单测试

本文链接：https://blog.csdn.net/undergrowth/article/details/17341473

这篇博客只是把以前用过的东西重新梳理了一下记录学习的脚步

在这里使用了easy-ui的layout和accordion来进行页面布局,使用jqgrid来进行显示数据列表,使用struts作为前台和后台的中转站,使用jpa进行实体的映射与管理.

页面效果图:

下面就是代码的列表,没有过多的解释,因为相关的东西在api上都有,重要的,代码里面都有注释了,所以就不啰嗦了

首页 index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
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>easy ui测试</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="js/themes/icon.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>

<script type="text/javascript">
	$(function(){
	var widthDoc=$(document).width();
	var heightDoc=$(document).height();
	var widthDiv=$("#uiTestId").width();
	var heightDiv=$("#uiTestId").height();
	$("#uiTestId").css({
	//使uiTestId位于屏幕的中央
		left:widthDoc/2-widthDiv/2,
		top:heightDoc/2-heightDiv/2
	});
	});
	
</script>

</head>

<body>
	<div id="uiTestId" class="easyui-layout" style="text-align:center;width:900px;height:600px;">
		<div data-options="region:'north',href:'head.jsp'" style="height:96px;">
		
		 </div>
		<div data-options="region:'south',href:'tail.jsp'" style="height:100px;">
		
		</div>
		<div data-options="region:'west',href:'left.jsp',title:' '" style="width:200px;padding:0px;">
			
		</div>
		<div data-options="region:'center',href:'jqgrid_local.jsp'" style="padding:5px;">
			
		</div>
	</div>
</body>
</html>

头部 head.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<div id="headId">
 <img  src="images/head.png">
</div>

尾部 tail.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<div id="tailId" style="text-align:center;font-size:20px;">
<ul style="list-style:none">
  <li>google:<a href="http://www.google.com/">google</a></li>
  <li>baidu:<a href="http://www.baidu.com/">baidu</a></li>
  </ul>
</div>

左边 left.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<style>
<!--
ul{
	list-style:none;
}
-->
</style>
<script>
	$(function(){
		/* $("li").click(function(){
			alert($(this).text());
		}); */
		
	});
	function getObject(url)
	{
	//alert($("#uiTestId").layout('panel','north').panel('refresh','jquery1.jsp'));
	//alert(url);
	//使中间区域的页面不断的切换
		$("#uiTestId").layout('panel','center').panel('refresh',url);
	}
</script>

<div class="easyui-accordion" style="width:190px;">
	<div title="jquery测试列表" data-options="iconCls:'icon-sum'"
		style="overflow:auto;padding:10px;width:100%;">
		<ul>
		 <li><a href="javascript:getObject('jquery1.jsp')">获取对象</a></li>
		</ul>
	</div>
	<div title="jqgrid测试列表" data-options="iconCls:'icon-help',selected:true"
		style="padding:10px;width:100%;">
		<ul>
		 <li><a href="javascript:getObject('jqgrid_local.jsp')">jqgrid加载本地数据</a></li>
		 <li><a href="javascript:getObject('jqgrid2.jsp')">jqgrid加载服务器端数据</a></li>
		</ul>
	</div>
	
</div>

jqgrid加载本地数据 jqgrid_local.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    
<link href="js/css/ui.jqgrid.css" type="text/css" rel="stylesheet" /> 
<link href="js/css/ui.multiselect.css" type="text/css" rel="stylesheet" />  
<link href="js/css/jquery-ui-1.10.3.custom.min.css" type="text/css" rel="stylesheet" />  

<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>

    <script type="text/javascript">
<!--
	$(function(){
	//alert("ok");
	//定义本地的数据数组
	var mydata=[
		{stuName:"qq",stuAge:20,stuBir:"2012-1-1"},
		{stuName:"ww",stuAge:22,stuBir:"2012-12-1"},
		{stuName:"ww",stuAge:22,stuBir:"2012-12-1"},
		{stuName:"ww",stuAge:22,stuBir:"2012-12-1"},
		{stuName:"ww",stuAge:22,stuBir:"2012-12-1"},
		{stuName:"ww",stuAge:22,stuBir:"2012-12-1"},
		{stuName:"ww",stuAge:22,stuBir:"2012-12-1"},
		{stuName:"ww",stuAge:22,stuBir:"2012-12-1"},
		{stuName:"ww",stuAge:22,stuBir:"2012-12-1"},
		{stuName:"ww",stuAge:22,stuBir:"2012-12-1"},
		{stuName:"ww",stuAge:22,stuBir:"2012-12-1"},
		];
	
	   //给jqGrid赋值和属性
		$("#gridTable").jqGrid({
		    data:mydata,
			datatype:"local",
			height:$(window).height()*0.4,
			autowidth:true,
			colModel:[
				{name:"stuName",index:"stuName",label:"姓名",align:"center",sorttype:"text"},
				{name:"stuAge",index:"stuAge",label:"年龄",align:"center",sorttype:"int"},
				{name:"stuBir",index:"stuBir",label:"生日",align:"center",sorttype:"text"}
			],
			viewrecords:true,
			rowNum:10,
			rowList:[10,15,20],
			multiselect:true,
			hidegrid:false,
			caption:"学生信息列表",
			pager:"#gridPager"
		});
		
		
		//添加数据
		/* for(var i=0;i<mydata.length;i++)
		{
			$("#gridTable").jqGrid('addRowData',i+1,mydata[i]);
			
		} */
	});
//-->
</script>
<div style="width:100%;height:auto;">
  <table id="gridTable" style="width:100%;"></table>
  <div id="gridPager" style="width:100%;"></div>
</div>

jqgrid2 从服务器端加载数据 jqgrid2.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
 <%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<base href="<%=basePath%>">  
<link href="js/css/ui.jqgrid.css" type="text/css" rel="stylesheet" /> 
<link href="js/css/ui.multiselect.css" type="text/css" rel="stylesheet" />  
<link href="js/css/jquery-ui-1.10.3.custom.min.css" type="text/css" rel="stylesheet" />  

<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>

    <script type="text/javascript">
<!--
	$(function(){
	//alert("ok1");
	
		$("#gridTable").jqGrid({
		    url:"jqgrid/jqgrid_json",
		    mtype:"GET",
			datatype:"json",
			height:$(window).height()*0.4,
			autowidth:true,
			colModel:[
			{name:"id",index:"id",label:"编号",align:"center",sorttype:"int"},
				{name:"name",index:"name",label:"姓名",align:"center",sorttype:"text"},
				{name:"age",index:"age",label:"年龄",align:"center",sorttype:"int"},
				{name:"birthdayString",index:"birthday",label:"生日",align:"center",sorttype:"text"},
				{name:"address",index:"address",label:"地址",align:"center",sorttype:"text"}
			],
			viewrecords:true,
			rowNum:10,
			rowList:[10,15,20],
			multiselect:true,
			hidegrid:false,
			jsonReader:{
				root:"gridModel",
				records:"record"
			},
			loadonce:true,
			caption:"学生信息列表",
			pager:"#gridPager"
		});
		
		/* $.getJson("/jqgrid/jqgrid_json.do",function(data){
		alert(data[0].id);
		}
		); */
		
	});
//-->
</script>
<div style="width:100%;height:auto;">
  <table id="gridTable" style="width:100%;"></table>
  <div id="gridPager" style="width:100%;"></div>
</div>

struts的配置文件

struts.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
	<package name="jqgrid" namespace="/jqgrid" extends="struts-default">
	 <action name="jqgrid_json" class="com.undergrowth.Jqgrid" method="getJson">  
	 </action>
	</package>
	<package name="first" namespace="/first" extends="struts-default">  
    <action name="first" class="com.undergrowth.Jqgrid" method="test">  
     <result name="success">/index.jsp</result>  
    </action>  
 </package>  
	
</struts>

action的中专类

Jqgrid.java

package com.undergrowth;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import com.undergrowth.bean.Person;
import com.undergrowth.bean.PersonVo;
import com.undergrowth.service.ServiceUtils;

public class Jqgrid {
	
	private List<Person> list;
	
	
	public List<Person> getList() {
		return list;
	}


	public void setList(List<Person> list) {
		this.list = list;
	}

	public String getRows() {
		return rows;
	}


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


	public String getPage() {
		return page;
	}


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

	private String rows;
	private String page;
    private String sidx;
    public String getSidx() {
		return sidx;
	}


	public void setSidx(String sidx) {
		this.sidx = sidx;
	}


	public String getSord() {
		return sord;
	}


	public void setSord(String sord) {
		this.sord = sord;
	}

	private String sord;
	
	public void getJson()
	{
		
		List<PersonVo> list=ServiceUtils.getList();
		JSONObject jsonObject=new JSONObject();
		JSONArray arrayJson=JSONArray.fromObject(list);
		//总记录数
		String totalRecord=ServiceUtils.getListCount("select count(*) from person");
		int totalPage=0;
		//计算总页数 根据totalRecord和每一行显示的记录数
		if(Integer.valueOf(totalRecord)%Integer.valueOf(getRows())==0){
			totalPage=Integer.valueOf(totalRecord)/Integer.valueOf(getRows());
		}else {
			totalPage=Integer.valueOf(totalRecord)/Integer.valueOf(getRows())+1;
		}
		//按照jqgrid的jsonReader的属性进行返回值的设置
		jsonObject.accumulate("gridModel", arrayJson);
		jsonObject.accumulate("record", totalRecord);
		jsonObject.accumulate("page", getPage());
		jsonObject.accumulate("rows", getRows());
		jsonObject.accumulate("total", totalPage);
		System.out.println("获取数据,总共有:"+list.size());
		try {
			HttpServletResponse response=ServletActionContext.getResponse();
			response.setContentType("application/json;charset=utf-8");
			PrintWriter writer=ServletActionContext.getResponse().getWriter();
			writer.write(jsonObject.toString());
			writer.flush();
			writer.close();
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
	}
    
	public String test()
	{
		System.out.println("测试获取数据");
		return "success";
	}
    
	
}

服务工具类: ServiceUtils.java

package com.undergrowth.service;

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

import com.undergrowth.bean.Person;
import com.undergrowth.bean.PersonDAO;
import com.undergrowth.bean.PersonVo;

public class ServiceUtils {

	public static List<PersonVo> getList() {
		// TODO Auto-generated method stub
		List<PersonVo> listVos=new ArrayList<>();
		PersonDAO entityDao=new PersonDAO();
		List<Person> listResult=entityDao.findAll();
		for (Person entity : listResult) {
			PersonVo vo=new PersonVo();
			vo=vo.entityToVo(entity);
			listVos.add(vo);
		}
		return listVos;
	}

	//获取总记录数
	public static String getListCount(String sql) {
		// TODO Auto-generated method stub
		PersonDAO entityDao=new PersonDAO();
		String totalRecordString=entityDao.findCount(sql);
		return totalRecordString;
	}

	


	
}

PersonVo.java

package com.undergrowth.bean;

import java.lang.reflect.InvocationTargetException;
import java.sql.Timestamp;
import java.text.SimpleDateFormat;

import org.apache.commons.beanutils.BeanUtils;

public class PersonVo {
	private String id;
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public Double getAge() {
		return age;
	}
	public void setAge(Double age) {
		this.age = age;
	}
	public Timestamp getBirthday() {
		return birthday;
	}
	public void setBirthday(Timestamp birthday) {
		this.birthday = birthday;
	}
	public String getBirthdayString() {
		return birthdayString;
	}
	public void setBirthdayString(String birthdayString) {
		this.birthdayString = birthdayString;
	}
	public String getAddress() {
		return address;
	}
	public void setAddress(String address) {
		this.address = address;
	}
	private String name;
	private Double age;
	private Timestamp birthday;
	private String birthdayString;
	private String address;
	
	//将vo转为entity 方便控制
	public Person voToEntity(PersonVo vo)
	{
		Person entity=new Person();
		try {
			BeanUtils.copyProperties(entity, vo);
		} catch (IllegalAccessException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (InvocationTargetException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return entity;
	}
	
	//将entity转为vo  方便控制
	public PersonVo entityToVo(Person entity)
	{
		PersonVo vo=new PersonVo();
		
		try {
			BeanUtils.copyProperties(vo, entity);
			//因为json对日期的转换格式为yyyy-MM-dd hh:mm:ss的格式 所以需要再次转换
			vo.setBirthdayString(new SimpleDateFormat("yyyy-MM-dd hh:mm:ss").format(vo.getBirthday()));
		} catch (IllegalAccessException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (InvocationTargetException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return vo;
	}
}

至于后台的jpa的代码是使用myeclipse2013的反向工程刷出来的代码,这里只是贴出PersonVo的代码,其余的代码就不贴了

再说说在梳理的过程中遇到的问题
1.在搜狗浏览器上显示不出index.jsp页面,而在ie10上是可以的 ,
解决办法: 在index.jsp上加上
<meta http-equiv="X-UA-Compatible" content="IE=edge">
意思就是让浏览器使用最高的ie版本来进行模拟显示,其实就是兼容性模式显示

2.在jqgrid2.jsp的页面中 url为 /jqgrid/jqgrid2 获取不到数据,原因在于没有加上
<base href="<%=basePath%>"> 这么一句话,
因为base的作用就是设置该页面的基准地址其余地址都是在其在上的
意思就是当加上base之后上面的url在解析式就变为了 <%=basePath%>/jqgrid/jqgrid2 这样就可以获取到数据了

3.无法切换index.jsp中region:center的href ,使用
$("#uiTestId").layout('panel','center').panel('refresh',url); 即可,因为uieasy-layout中每一个区域都是一个panel,所以使用panel的方法即可进行页面的内容的切换