这篇博客只是把以前用过的东西 重新梳理了一下 记录学习的脚步
在这里 使用了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>
<%@ 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>
<%@ 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的方法即可进行页面的内容的切换