当前位置:首页 > 开发 > Web前端 > 前端 > 正文

PagingToolbar带参数的分页

发表于: 2013-07-31   作者:chinrui   来源:转载   浏览次数:
摘要: PagingToolbar带参数的分页 一般在分页的时候,会指定两个参数,Start与Limit一个是第几条记录开始,一个是一个页面最多几条记录,一般来说这两个条件已经够了,但是如果你要进行有多余条件查询的时候,就要传递额外的参数过去 了。 /** * *********************************************************************

PagingToolbar带参数的分页

一般在分页的时候,会指定两个参数,Start与Limit一个是第几条记录开始,一个是一个页面最多几条记录,一般来说这两个条件已经够了,但是如果你要进行有多余条件查询的时候,就要传递额外的参数过去 了。

/**
 * ********************************************************************************************
 * UserQueryFn.js
 */
function userQueryFn(tabPanel) {
	
	// 创建记录模型
	var user = new Ext.data.Record.create([
		{name:"id",mapping:"id"},
		{name:"name",mapping:"name"},
		{name:"password",mapping:"password"}
	]);
	
	// 创建数据存储器
	var store = new Ext.data.Store({
		url:"User_queryOnCondition.action",
		reader:new Ext.data.JsonReader({
			id:"id",
			root:"users",
			totalProperty:"recordSize"
		},user)
	});
	
	// 查询条件区域
	var queryPanel = new Ext.form.FormPanel({
		baseCls: 'x-plain',
		layout:"column",
		items:[
			new Ext.form.Label({
				text:"查询条件"
			}),
			new Ext.form.ComboBox({
				triggerAction :"all",
				selectOnFocus:true,
				editable:false,
				store:new Ext.data.SimpleStore({
					fields:["queryL","queryV"],
					data:[
						["id","id"],
						["用户名","name"],
						["密码","password"]
					]
				}),
				typeAhead:true,
				displayField:"queryL",
				hiddenName:"queryCondition",
				valueField:"queryV",
				mode:"local",
				readOnly:true
			}),
			new Ext.form.Label({text:"查询值"}),
			new Ext.form.TextField({
				id:"queryValue",
				name:"queryValue"
			})
		]
	});
	
	// 创建列模型
	var colModel = new Ext.grid.ColumnModel([
		{header:"用户ID",dataIndex:"id",sortable:true},
		{header:"用户名",dataIndex:"name",sortable:true,	width:300},
		{header:"密码",dataIndex:"password",sortable:true}
	]);
	
	// 主显示区
	var userQueryPanel = new Ext.grid.EditorGridPanel({
		width:800,
		height:370,
		frame:true,
		store:store,
		cm:colModel,
		autoExpandColumn:3,
		bbar:new Ext.PagingToolbar({
			pageSize : 10,
			displayInfo:true,
			store:store,
		    displayMsg : '此页显示记录第{0}条到第{1}条,共{2}条',
		    emptyMsg : '没有任何用户记录',
		    firstText : '首页',
		    prevText : '上一页',
		    nextText : '下一页',
		    lastText : '尾页',
		    refreshText : '刷新'
		})
	});
	
	var tabPage = tabPanel.add({
		title:"用户查询",
		closable:true,
		tbar:[
			queryPanel,
			{text:"搜索",handler:function() {
				store.load({
					params:{
						"start":0,
						"limit":10,
						"queryCondition":Ext.get("queryCondition").dom.value,
						"queryValue":Ext.get("queryValue").dom.value
					}
				});
			}}
		],
		items:userQueryPanel
	});
	// 额外参数传递
	store.on('beforeload', function() {
	       this.baseParams = {"queryCondition":Ext.get("queryCondition").dom.value,"queryValue":Ext.get("queryValue").dom.value};
	}); 
	
	tabPanel.setActiveTab(tabPage);
}

 

PagingToolbar带参数的分页

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
创建html文件: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html&
Index.cshtml @using PagedList.Mvc @model PagedList.StaticPagedList<NationalUnion.Domain.Mo
SQL Server Business Intelligence Development Studio 针对MSSQL,对SSRS报表添加参数 右键单击“
昨天有学习《简单创建与布署CLR存储过程》http://www.cnblogs.com/insus/p/4371762.html,知道怎样
easyUI默认分页参数,是rows和page,这往往让我们感觉很别扭,因为默认大多数后台自己封装的page类
很多时候,我们需要显示在grid中的数据不是短短的几条或者几十条,而是成千上万条。如果让大量的数
接上一篇 瀑布流代码,简洁版 的功能之上添加分页的功能 完整的版本:瀑布流代码 带分页 Index.csht
或许大家会说,网上已经很多类似文章了,包括孟子的,为什么要再写一次? 我想我们不仅仅要会实现,
默认生成的样式.自己可以调整.: //html代码 <table id="commentTab" width="100%;"> </tab
MVC3 带查询的分页Helper 接上篇mvc3 分页Helper.   带查询的分页Helper是在上一篇分页的基础上来
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号