Extjs的GridPanel分页前后台完整代码实例

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yang_mang/article/details/52055599

第一次写文章啊,有些冲动。最近在公司学习Extjs,做了一个分页的小实例和大家分享。

1.首先编写paging-grid.js文件,这是我在网上参考的例子改写的,大同小异。

Ext.onReady(function() {
	// Proxy
	var proxy = new Ext.data.HttpProxy({
		url : "../../servlet/LoginServlet"
	});
	// Record 定义记录结果
	var Human = Ext.data.Record.create([ {
		name : "hid",
		type : "int",
		mapping : "hid"
	}, {
		name : "name",
		type : "string",
		mapping : "name"
	}, {
		name : "sex",
		type : "string",
		mapping : "sex"
	}, {
		name : "birthday",
		type : "string",
		mapping : "birthday"
	}, {
		name : "education",
		type : "string",
		mapping : "education"
	}, {
		name : "memo",
		type : "string",
		mapping : "memo"
	} ]);
	// Reader
	var reader = new Ext.data.JsonReader({
		totalProperty : "totalProperty",
		root : "root"
	}, Human);
	// Store
	var store = new Ext.data.Store({
		proxy : proxy,
		reader : reader
	});
	store.load({
		params : {
			start : 0,
			limit : 2
		}
	});
	// 列模型
	var cm = new Ext.grid.ColumnModel([ {
		header : "ID",
		width : 40,
		dataIndex : "hid"
	}, {
		header : "姓名",
		width : 80,
		dataIndex : "name",
		tooltip : "这是您的姓名"
	}, {
		header : "性别",
		width : 40,
		dataIndex : "sex",
		align : "center"
	}, {
		header : "生日",
		width : 150,
		format : "Y-m-d",
		dataIndex : "birthday"
	}, {
		header : "学历",
		width : 80,
		dataIndex : "education",
		align : "center"
	}, {
		id : "memo",
		header : "备注",
		dataIndex : "memo"
	} ]);
	var grid = new Ext.grid.GridPanel({
		title : "中国公民",
		width : 650,
		autoHeight : true,
		cm : cm,
		store : store,
		renderTo : "paging-grid",
		autoExpandColumn : "memo", // 自动伸展,占满剩余区域
		bbar : new Ext.PagingToolbar({
			store : store,
			pageSize : 2,
			displayInfo : true,
			displayMsg : "本页显示第{0}条到第{1}条的记录,一共{2}条",
			emptyMsg : "没有记录"
		})
	});
});
2.编写paging-grid.html,注意一定要引入必要的ext文件如ext-all.js等,具体看如下代码:
<pre name="code" class="html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Array Grid Example</title>

    <link rel="stylesheet" type="text/css" href="../../ext/resources/css/ext-all.css" />

 	<script type="text/javascript" src="../../ext/ext-base.js"></script>

    <script type="text/javascript" src="../../ext/ext-all.js"></script>

    <script type="text/javascript" src="paging-grid.js"></script>
    <link rel="stylesheet" type="text/css" href="../../ext/resources/css/grid-examples.css" />

    <link rel="stylesheet" type="text/css" href="../../resources/css/examples.css" />
</head>
<body>
<script type="text/javascript" src="../../ext/examples.js"></script><!-- EXAMPLES -->
<div id="paging-grid"></div>
</body>
</html>
3.创建People.java类
<pre name="code" class="java">package com.forlink.yangm.entity;

public class People {
	
	private int hid;
	private String name;
	private String sex;
	private String birthday;
	private String education;
	private String memo;
	public People() {
		// TODO Auto-generated constructor stub
	}
	public People(int hid, String name, String sex, String birthday,
			String education, String memo) {
		this.hid = hid;
		this.name = name;
		this.sex = sex;
		this.birthday = birthday;
		this.education = education;
		this.memo = memo;
	}
	public int getHid() {
		return hid;
	}
	public void setHid(int hid) {
		this.hid = hid;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getSex() {
		return sex;
	}
	public void setSex(String sex) {
		this.sex = sex;
	}
	public String getBirthday() {
		return birthday;
	}
	public void setBirthday(String birthday) {
		this.birthday = birthday;
	}
	public String getEducation() {
		return education;
	}
	public void setEducation(String education) {
		this.education = education;
	}
	public String getMemo() {
		return memo;
	}
	public void setMemo(String memo) {
		this.memo = memo;
	}
	
}




4.创建LoginServlet,注意一定要在web.xml中配置好Servlet,相信你可以的,不用我详述了。其中要特别小心Ext对于json格式的要求,标准的格式如下:
{"totalProperty":3,"root":[{"hid":1,"name":"yangm1","sex":"男","birthday":"1994-06-17","education":"hhhh1","memo":"aaa"},
{"hid":2,"name":"yangm2","sex":"男","birthday":"1994-06-17","education":"hhhh1","memo":"aaa"},
{"hid":3,"name":"yangm3","sex":"男","birthday":"1994-06-17","education":"hhhh1","memo":"aaa"}]}
如果你的数据在前台不能显示,那多半是你的json格式有问题,请好好检查。推荐一下阿里巴巴的fastjson工具包,可以帮助你进行格式转化。
package com.forlink.yangm.action;

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

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.junit.Test;

import com.alibaba.fastjson.JSON;
import com.forlink.yangm.entity.People;

public class LoginServlet extends HttpServlet {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	@Override
	// TODO Auto-generated method stub
	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		
		//start:当数据序号,从0开始
		//容易和easyUI的page混淆
		int start = Integer.parseInt(request.getParameter("start"));
		//limit:页面大小
		int limit = Integer.parseInt(request.getParameter("limit"));
		System.out.println("当前页:"+start+",页面大小:"+limit);
		PrintWriter out = response.getWriter();
		//StringBuilder json = new StringBuilder("{totalProperty:1,root:[");
		String json = getJson(start,limit);
		out.println(json);
//		out.flush();
//		out.close();
	}
	@Test
	public String getJson(int start, int limit) {
		List<People> all = new ArrayList<People>();
		all.add(new People(1, "yangm1", "难", "1994-06-1", "high", "memo"));
		all.add(new People(2, "yangm2", "难", "1994-06-2", "high", "memo"));
		all.add(new People(3, "yangm3", "难", "1994-06-3", "high", "memo"));
		all.add(new People(4, "yangm4", "难", "1994-06-4", "high", "memo"));
		all.add(new People(5, "yangm5", "难", "1994-06-5", "high", "memo"));
		all.add(new People(6, "yangm6", "难", "1994-06-6", "high", "memo"));
		//截取当前页面大小的数据
		List<People> sublist = all.subList(start, start+limit);
		
		
		//totalProperty:一定要是你的grid需要展示的数据总量,在这里为6条
		StringBuilder json = new StringBuilder("{\"totalProperty\":");
		//root:需要展示的数据json格式,fastjson转化数据为要求的json格式
		json.append(all.size()).append(",\"root\":");
		json.append(JSON.toJSONString(sublist))	;	
		json.append("}");
		System.out.println(json);
		return json.toString();
	}
	
	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		this.doGet(request, response);
	}
}
以上所述绝壁是一个完整的例子,直接可以运行的。我个人是比较喜欢无脑的跟着大婶一步步做的,然后再探究其中奥秘,首先必须要有成就感,我才能往下继续啊,都看不到结果,你跟我说个毛啊!注释很详细,相信大家都能看懂吧。来个截图吧还是。
如果你觉得确实帮到你了,请不要吝啬你的赞,俺们需要你的鼓励啊!如果你觉得写的不错,转载是麻烦表明出处,毕竟写篇文章不容易啊客官!



展开阅读全文

没有更多推荐了,返回首页