ext GridPanel分页

grid.js

Ext.onReady(function() {
	var gridStore = new Ext.data.Store({

		proxy: new Ext.data.HttpProxy({
			url: 'grid.asp'
		}),
		reader: new Ext.data.JsonReader({
			root: 'data',
			totalProperty: 'totalCount',
			idProperty: 'id'
		},[
		    {name: 'id',mapping:'id'},
			{name: 'name',mapping: 'name'},
			{name: 'email',mapping: 'email'},
			{name: 'age',mapping: 'age'},
		]),
		baseParams:{
			start:0,
			limit:5
		}
	});

	gridStore.load();
	var colModel = new Ext.grid.ColumnModel([
	       {id: 'userid',header: '用户号',dataIndex: 'id',sortable: true,hidden:true},
	       {header: '姓名',dataIndex: 'name',sortable: true,width: 80},
	       {header: '邮箱',dataIndex: 'email',width: 150},
	       {header: '年龄',dataIndex: 'age',width: 60},
	       ]);

	var gridPanel = new Ext.grid.GridPanel({
		id: 'oprPanel',
		title: '用户信息',
		frame: true,
		//iconCls: 'T104',
		border: true,
		columnLines: true,
		stripeRows: true,
		autoHeight: true,
		store: gridStore,
		sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
		cm: colModel,
		collapsible: true,
		//plugins: oprRowExpander,
		loadMask: {
			msg: '正在加载用户信息列表......'
		},
		bbar: new Ext.PagingToolbar({
			store: gridStore,
			pageSize: 5,
			displayInfo: true,
			displayMsg: '显示第{0}-{1}条记录,共{2}条记录',
			emptyMsg: '没有找到符合条件的记录'
		})
	});
	var viewport = new Ext.Viewport({
		 layout: "fit",
         items: gridPanel
    });
});

grid.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</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="js/grid.js"></script>
</head>
<body>
	<div id="div"></div>
</body>
</html>

Data.java

package com.lin.model;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

@Entity
@Table
public class Data {
	@GeneratedValue(strategy=GenerationType.IDENTITY)
	@Id
	private int id;
	@Column(length=20)
	private String name;
	@Column(length=30)
	private String email;
	@Column
	private int age;

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}

	public int getAge() {
		return age;
	}

	public void setAge(int age) {
		this.age = age;
	}

	public Data(int id, String name, String email, int age) {
		super();
		this.id = id;
		this.name = name;
		this.email = email;
		this.age = age;
	}

	public Data() {
		super();
	}

}

DataDao.java

package com.lin.dao;

import java.util.List;

import org.hibernate.Query;
import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
import org.springframework.transaction.annotation.Transactional;

import com.lin.model.Data;

@Repository
public class DataDao {

	private SessionFactory sessionFactory;

	public SessionFactory getSessionFactory() {
		return sessionFactory;
	}
	@Autowired
	public void setSessionFactory(SessionFactory sessionFactory) {
		this.sessionFactory = sessionFactory;
	}

	@Transactional
	public List<Data> getPageData(int start, int limit) {
		Session session = sessionFactory.getCurrentSession();
		Query query = session.createQuery("from Data");
		query.setFirstResult(start);
		query.setMaxResults(limit);
		System.out.println("size ================ "+query.list().size());
		return query.list();
	}
	@Transactional
	public int getTotal(){
		Session session = sessionFactory.getCurrentSession();
		Query query = session.createQuery("from Data");
		return query.list().size();
	}
}

GridAction.java

package com.lin.action;

import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

import org.apache.struts2.ServletActionContext;
import org.springframework.beans.factory.annotation.Autowired;

import com.lin.dao.DataDao;
import com.lin.model.Data;
import com.opensymphony.xwork2.ActionSupport;

public class GridAction extends ActionSupport {
	@Autowired
	private DataDao dao;
	private int start;
	private int limit;

	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;
	}

	@Override
	public String execute() throws Exception {
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setContentType("text/json; charset=utf-8");
		PrintWriter pw = response.getWriter();
		List list = dao.getPageData(start, limit);
		Map<String,Object> map = new LinkedHashMap<String, Object>();
		map.put("totalCount", dao.getTotal());
		map.put("data",list);
		JSONObject json = JSONObject.fromObject(map);
		pw.append(json.toString());
		pw.flush();
		pw.close();
		return NONE;
	}
}

效果:

数据库:

ext GridPanel分页

时间: 2024-08-28 01:30:23

ext GridPanel分页的相关文章

Ext GridPanel

Extjs GridPanel用法详解 创建GridPanel 要使用GridPanel,首先要定义Store,而在创建Store的时候必须要有Model,因此我们首先来定义Model: //1.定义Model Ext.define("MyApp.model.User", { extend: "Ext.data.Model", fields: [ { name: 'name', type: 'string' }, { name: 'age', type: 'int'

ext:grid分页,列宽度自动填满grid宽度

var cm = new Ext.grid.ColumnModel([{      header : '编号',      dataIndex : 'id'     }, {      header : '名称',      dataIndex : 'name'     }, {      header : '描述',      dataIndex : 'descn'     }]);   var store = new Ext.data.Store({      proxy : new Ext

Ext.GridPanel 用法总结(一)—— Grid基本用法

Ext.GridPanel 用法总结(一)—— Grid基本用法 摘自:http://www.cnblogs.com/luluping/archive/2009/08/01/1536645.html GridPanel类是基于基础列表接口具代表性的主要实现类.也是最常用的Ext组件之一. 一:首先定义grid的数据源 view plaincopy to clipboardprint? //初始化Ext状态管理器,在Cookie中记录用户的操作状态,如果不启用,象刷新时就不会保存当前的状态,而是重

ExtJS 4.0 gridPanel 分页控件Ext.toolbar.Paging点击传参问题

Store.on('beforeload', function (s) { s.baseParams['Year'] = Ext.getCmp("year").getValue(); s.baseParams['Month'] = Ext.getCmp("month").getValue(); s.baseParams['fcno'] = Ext.getCmp("ruleid").getValue(); var params = s.getPro

关于EXT gridPanel进行高级查询时load提交后台乱码以及其他方式更新store的方法及遇到的问题

Ext.data.Store  加载数据的几个方法及注意的事项 下面为定义的Store var ds_edisCommonUser = new Ext.data.uStore({ storeId:'edisCommonUser', model:'Edis_CommonUser', pageSize:itemPerPage, autoLoad:false, proxy:{ type:'ajax', method:'POST', url:'EdisCommonUser/getUsers.action

GridPanel分页条插件

GridPanel的分页条没有设置当前页显示条数的功能,会不大方便 主要是抄袭的http://www.cnblogs.com/badwps/archive/2011/04/15/2016440.html该文的设置,做了些修改,不再使用下拉框选择,改为手工输入 注意:此处插件是Ext.PagingToolbar的插件 plugins: [new Ext.ui.plugins.ComboPageSize({})] ComboPageSize.js下载地址

Ext GridPanel在进行条件查询后,翻页有误

填写查询条件并完成搜索后,当页的数据是正确,但是点击翻页后,数据结果有误,这个原因是由于翻页查询条件并没有传入. 解决方法如下: 给Store添加一个事件----beforeload 在一个新数据对象请求发出前触发此事件. 如果beforeload的处理函数返回'false', 数据请求将被取消. 具体代码如下: ds_edisCommonUser.on('beforeload',function(ds_edisCommonUser,options){ var _search_name= Ext

Ext.net的Gridpanel数据绑定及增删改查

JS代码: var winAdd; function addwin() { if (winAdd == null) { winAdd = Ext.getCmp("window1"); } Ext.getCmp("FormPanel1").getForm().reset(); Ext.getCmp("BtnRes").setVisible(false); Ext.getCmp("BtnSave").setVisible(true

【extjs】 ext5 Ext.grid.Panel 分页,搜索

带有分页,搜索的grid. <%@page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false" pageEncoding="UTF-8" %> <html> <head> <jsp:include page="../common/resource_classic.jsp"