ext表格分页(struts+hibernate)

最新推荐文章于 2017-06-23 23:02:01 发布

iteye_3661

最新推荐文章于 2017-06-23 23:02:01 发布

阅读量188

点赞数

文章标签： ext html javascript json hibernate ViewUI

本文链接：https://blog.csdn.net/iteye_3661/article/details/82210607

版权

毕业设计来临，我的课题是超市管理系统实现，由于不想花费过多的时间在美工上，所以自学了一些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;
}