ext报表分页(struts+hibernate)
ext表格分页(struts+hibernate)
毕业设计来临,我的课题是超市管理系统实现,由于不想花费过多的时间在美工上,所以自学了一些ext方面的知识,其中分页的实现是非常常用而又重要的.借丰富的网络资源完成了其分页的实现。
也许分页的实现对像我这样的初学者来说比较有难度,其实如果你认真去研究他的原理,感觉并没想像中的那么难。刚开始我想用DWR框架来实现客户端到服务器的数据交换,个人觉得其实现过程过于繁琐,不适合初学者学习。如果有兴趣的可以在网上找相应资源。下面我借助struts2.1和hibernate3.0来实现ext的表格分页。
项目是以列出数据库中学生信息进行分页为实例。
以下数据库(oracle11g)的建表语句:
前台代码:
Index.jsp页面,ext导入的基础包
下面是index.js代码,实现分页非常重要的核心部分,注意此页面必须导入index.jsp
Serivce层StudentSerivce.java关键方法:(注意json字符串必须是如下格式{tatalProperty:100,root:[{"id":1,"sex":"男","political":"中共党员","age":22,"name":"刘晓春","origin":"湖南长沙","code":"200841903205","professional":"长沙"},{"id":2,"sex":"女","political":"共青团员","age":20,"name":"景","origin":"河南商丘","code":"200841903206","professional":"商丘"},{"id":3,"sex":"女","political":"中共党员","age":22,"name":"尹","origin":"湖南长沙","code":"200841903207","professional":"唐市"}]}
)
Action层关键代码实现:
毕业设计来临,我的课题是超市管理系统实现,由于不想花费过多的时间在美工上,所以自学了一些ext方面的知识,其中分页的实现是非常常用而又重要的.借丰富的网络资源完成了其分页的实现。
也许分页的实现对像我这样的初学者来说比较有难度,其实如果你认真去研究他的原理,感觉并没想像中的那么难。刚开始我想用DWR框架来实现客户端到服务器的数据交换,个人觉得其实现过程过于繁琐,不适合初学者学习。如果有兴趣的可以在网上找相应资源。下面我借助struts2.1和hibernate3.0来实现ext的表格分页。
项目是以列出数据库中学生信息进行分页为实例。
以下数据库(oracle11g)的建表语句:
create table student( id number, --主键 code varchar2(50), --学号 name varchar2(50), sex varchar2(10), age number(10), political varchar2(50),--政治面貌 origin varchar2(50), --籍贯 professional varchar(50) ) alter table student add constraint pk_student primary key(id); create sequence seq_sId increment by 1 start with 1 maxvalue 999999999; insert into student values(seq_sid.nextval,'200841903205','刘晓春','男','22','中共党员','湖南长沙','长沙'); insert into student values(seq_sid.nextval,'200841903206','景','女','20','共青团员','河南','商丘'); insert into student values(seq_sid.nextval,'200841903207','婧','女','22','中共党员','湖南长沙','邵阳');
前台代码:
Index.jsp页面,ext导入的基础包
<%@page import="java.math.BigDecimal"%> <%@page import="com.student.service.StudentSerivce"%> <%@ 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//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>index</title> <meta name="generator" content="Studio 3 http://aptana.com/"> <meta name="author" content="moxu"> <link type="text/css" rel="stylesheet" href="ext/resources/css/ext-all.css"></link> <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext/ext-all.js"></script> <!-- 这是引入一个自定义的js页面,关键实现代码所在 --> <script type="text/javascript" src="index.js"></script> <!-- Date: 2011-11-19 --> </head> <body> <% StudentSerivce ss = new StudentSerivce(); request.setAttribute("student" ,ss.findById(new BigDecimal(1))); %> <script type="text/javascript"> function get(){ var a = '${student.name}'; alert(a); } </script> <div id="head" style="font-weight: bold; font-size: 200%"> 学生管理系统 </div> <div id="foot" style="text-align: center;"> </div> </body> </html>
下面是index.js代码,实现分页非常重要的核心部分,注意此页面必须导入index.jsp
/** * @author moxu */ Ext.onReady(function() { var recordType = Ext.data.Record.create([ //表格的记录集格式 {name: "id",mapping:"id", type: "int"}, {name: "code", mapping:"code",type: "string"}, {name: "name", mapping:"name", type: "string"}, {name: "sex", mapping:"sex", type: "string"}, {name: "age", mapping:"age", type: "string"}, {name: "political", mapping:"political", type: "string"}, {name: "origin", mapping:"origin", type: "string"}, {name: "professional", mapping:"professional", type: "string"} ]); var store1 = new Ext.data.Store({ //采用HttpProxy代理 proxy : new Ext.data.HttpProxy({ url:'student.action' //action的名字,通过action来获取数据 }), reader : new Ext.data.JsonReader({ //对数据进行解析,数据必须为json格式 totalProperty: 'tatalProperty', //总共有多少条记录 root : 'root' //数据 },recordType), remoteSort: true }); var columns = new Ext.grid.ColumnModel([ {header:'学号',dataIndex:'code'}, {header:'姓名',dataIndex:'name'}, {header:'性别',dataIndex:'sex'}, {header:'年龄',dataIndex:'age'}, {header:'政治面貌',dataIndex:'political'}, {header:'籍贯',dataIndex:'origin'}, {header:'所属系',dataIndex:'professional'} ]); var grid = new Ext.grid.GridPanel({ title:'学生信息列表', region:"center", cm:columns, store:store1, bbar:new Ext.PagingToolbar({ pageSize:7, store:store1, displayInfo:true, displayMsg:'显示第{0}条到{1}条记录,一共{2}条' }) }); store1.load({ //注意带后面的参数 params:{ start:0, limit:6 } }); var vp = new Ext.Viewport({ layout : 'border', items:[ { region:'north', contentEl:'head' }, grid, { region:'south', contentEl:'foot' }, { region:'east', contentEl:'button' }] }); });
Serivce层StudentSerivce.java关键方法:(注意json字符串必须是如下格式{tatalProperty:100,root:[{"id":1,"sex":"男","political":"中共党员","age":22,"name":"刘晓春","origin":"湖南长沙","code":"200841903205","professional":"长沙"},{"id":2,"sex":"女","political":"共青团员","age":20,"name":"景","origin":"河南商丘","code":"200841903206","professional":"商丘"},{"id":3,"sex":"女","political":"中共党员","age":22,"name":"尹","origin":"湖南长沙","code":"200841903207","professional":"唐市"}]}
)
public String getList(int start,int limit){ Session session = HibernateSessionFactory.getSession(); Transaction tran = session.beginTransaction(); Query q = session.createQuery("from Student"); q.setFirstResult(start); q.setMaxResults(limit); ArrayList<Student> al = (ArrayList<Student>) q.list(); tran.commit(); session.close(); return "{tatalProperty:100,root:"+JSONArray.fromObject(al)+"}"; }
Action层关键代码实现:
package com.student.action; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.struts2.ServletActionContext; import com.opensymphony.xwork2.ActionSupport; import com.student.service.StudentSerivce; public class StudentAction extends ActionSupport { /** * */ private static final long serialVersionUID = 1L; private HttpServletResponse response; private HttpServletRequest request; public int getStart() { return start; } public void setStart(int start) { this.start = start; } public int getLimit() { return limit; } public void setLimit(int limit) { this.limit = limit; } private int start; private int limit; @Override public String execute() throws Exception { // TODO Auto-generated method stub response = ServletActionContext.getResponse(); response.setContentType("application/xml;charset=UTF-8"); System.out.println("start"+start+"limit"+limit); response.getWriter().print(new StudentSerivce().getList(start,limit)); return null; }