这篇博客只是把以前用过的东西 重新梳理了一下 记录学习的脚步
在这里 使用了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;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="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="190px;">
<div title="jquery测试列表" data-options="iconCls:'icon-sum'"
style="overflow:auto;padding:10px;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;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,
autotrue,
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="100%;height:auto;">
<table id="gridTable" style="100%;"></table>
<div id="gridPager" style="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,
autotrue,
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="100%;height:auto;">
<table id="gridTable" style="100%;"></table>
<div id="gridPager" style="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的方法即可进行页面的内容的切换