ExtJs 备忘录(6)—— GirdPanl表格(二) [ 搜索分页 ]
前言
近些天对于厚积薄发有深刻的理解,尤其是月末那两天,很想再写两篇文章,保持每周一篇——每月至少四篇以上的文章。写文章分两种情况:一种情况是已经积累了许多经验,写起来轻松且得心应手,内容和系列文章容易把握,最典型的就是视频监控的那系列文章,得以写完是因为已经从事近半年相关的开发工作;另一种情况则是有方向但积累不足甚至无积累,边学边实践,然后进行归类和总结成系列,比如视频监控第二个系列和本系列都属于这种情况,如果时间稍微充足且过程较为顺利,尚可勉强完成,反之则遥遥无期。由此感悟,下次写系列文章还是得先多多积累,至少系列文章的内容在腹中已有一半以上,方可开动,否则可考虑继续积累或者拆除几篇相对独立的文章单独写,不必冠以系列,我可不想盖烂尾楼啊!
系列
1. ExtJs 备忘录(1)—— Form表单(一) [ 控件使用 ]
2. ExtJs 备忘录(2)—— Form表单(二) [ 控件封装 ]
3. ExtJs 备忘录(3)—— Form表单(三) [ 数据验证 ]
4. ExtJs 备忘录(4)—— Form表单(四) [ 数据提交 ]
5. ExtJs 备忘录(5)—— GirdPanl表格(一)[ 基本用法 ]
6. ExtJs 备忘录(6)—— GirdPanl表格(二)[ 搜索分页 ]
推荐
1. ExtJS 技巧笔记
2. Ext.data.Store
正文
一、效果图
二、代码实现
2.1 客户端
tablepage.aspx
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
//搜索id
var id = new NumberField('tbSearch');
id.style='text-align:center';//设置文本居中
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'tablepage.aspx?method=search',
method: 'GET'
}),
reader: new Ext.data.JsonReader({
totalProperty: 'count',
root: 'result'
}, [
{ name: 'Name' },
{ name: 'Id' },
{ name: 'Email' },
{ name: 'Gender' }
]),
baseParams:{
id : '', //用于分页时保存搜索条件
limit: 10 //每页显示数量
}
});
//加载数据
store.load();
//遍历数据
// store.each(function(record) {
// alert(record.get('name'));
// });
// for (var i = 0; i < store.getCount(); i++) {
// var record = store.getAt(i);
// alert(record.get('name'));
// }
var dataColumns = new Ext.grid.ColumnModel({
columns: [
new Ext.grid.RowNumberer(), //显示行号
{ header: "编 号", dataIndex: 'Id', sortable: true },
{ header: "名 称", dataIndex: 'Name' },
{ header: "邮 箱", dataIndex: 'Email' },
{ header: "性 别", dataIndex: 'Gender' }
],
defaults: {
align: 'center'
}
});
var grid = new Ext.grid.GridPanel({
store: store,
cm: dataColumns, //columns: [{}]
renderTo: Ext.getBody(),
//autoExpandColumn: 1,
title: '<center style="curor:hand" οnclick="window.location.reload();">搜索与分页</center>',
autoScroll: true,
autoHeight: true,
border: true,
disableSelection: true,
enableHdMenu:false,
frame: true,
loadMask: { msg: '正在加载数据,请稍侯……' }, //loadMask: true,
stripeRows: true, //隔行显示不同颜色
// bodyStyle:'width:99.8%',
// autoWidth:true,
width: 800,
//设置单行选中模式
selModel: new Ext.grid.RowSelectionModel({ singleSelect: false }),
//使列自动均分
viewConfig: {
forceFit: true
},
//搜索条
tbar: new Ext.Toolbar({
items:[
new Ext.form.Label({ text:'编号: ' }),
id,{
iconCls: "add", text: '搜索',
handler:function(){
//注意 sum 需要等数据加载完毕才能计算出来,不然始终为0
//alert(store.sum('Id'));
grid.store.baseParams['id'] = id.getValue();//防止分页时丢失
grid.store.reload();
}
}
]
}),
//底部分页工具条
bbar: new Ext.PagingToolbar({
pageSize: 10,//此处应与limit一致
store: store,
displayInfo: true,
emptyMsg: '没有记录'
})
});
});
代码说明:
实现了非常简单搜索和分页,需要注意的是关于搜索分页时搜索结果丢失的问题,这里采取了两个步骤:先是在Ext.data.Store的baseParams中声明搜索传值变量,然后再点击搜索按钮时将搜索条件存入到baseParams里,这样分页时条件可以保持下来。
2.2 服务端
tablepage.aspx.cs
{
int start = -1;
int.TryParse(Request.QueryString["start"], out start);
int limit = -1;
int.TryParse(Request.QueryString["limit"], out limit);
string id = Request.QueryString["id"];
IList<User> result = new List<User>();
if (string.IsNullOrEmpty(id))
result = GetPage(ConverToList(dataSource.Values), start, limit);
else
{
int uid;
if (int.TryParse(id, out uid))
{
if (dataSource.ContainsKey(uid))
result.Add(dataSource[uid]);
}
}
return new StringBuilder().Append("{count:")
.Append(1000)
.Append(",result:")
.Append(JavaScriptConvert.SerializeObject(result))
.Append('}')
.ToString();
}
#region 数据源
private static IDictionary<int, User> dataSource = new Dictionary<int, User>();
static tablepage()
{
for (int i = 0; i < 1000; i++)
{
User user = BuildUser(i);
dataSource.Add(user.Id, user);
}
}
private static IList<User> GetPage(IList<User> data, int start, int limit)
{
IList<User> result = new List<User>();
int length = start + limit;
if (length > data.Count)
length = data.Count;
for (int i = start; i < length; i++)
{
result.Add(data[i]);
}
return result;
}
private static IList<User> ConverToList(ICollection<User> users)
{
User[] result = new User[users.Count];
users.CopyTo(result, 0);
return result;
}
private static User BuildUser(int number)
{
return new User()
{
Id = number,
Email = string.Format("test{0}163.com", number),
Name = string.Format("test{0}", number),
Gender = new Random().Next(2)
};
}
class User
{
/// <summary>
/// 编号
/// </summary>
public int Id { get; set; }
/// <summary>
/// 邮箱
/// </summary>
public string Email { get; set; }
/// <summary>
/// 名称
/// </summary>
public string Name { get; set; }
/// <summary>
/// 性别 0 女 1 男
/// </summary>
public int Gender { get; set; }
}
#endregion
代码说明:
这里仍然没有连接数据库,模拟数据与分页查询。
2.3 存储过程
(
@StartIndex INT = 0 ,
@Limit INT = 15,
@RowsCount INT = 0 OUTPUT, -- 输出记录总行数
@SQLString VARCHAR(500)
)
AS
SET NOCOUNT ON
SELECT IDENTITY(INT,1,1) AS [NewID],* INTO #TMP_ZSFLZ1 FROM [TB_XJYJZ] WHERE 1=2
INSERT INTO #TMP_ZSFLZ1 EXEC sp_executesql @SQLString
--总行数
SELECT @RowsCount = COUNT([NewID]) FROM #TMP_ZSFLZ
SET @StartIndex = @StartIndex + 1
SELECT * FROM #TMP_ZSFLZ tz
WHERE [NewID] BETWEEN @StartIndex AND @StartIndex + @Limit - 1
DROP TABLE #TMP_ZSFLZ
RETURN
GO
代码说明:
虽然本文没有用到,倒是实际中肯定要用到的,这里写一个样例,仅供参考(注意:这里是SQL2000的例子)。
三、下载
ExtJS2009-11-30
结束语
实在是想再补上点什么,暂且如此,随后归类再补上吧。
ExtJs 备忘录(6)—— GirdPanl表格(二) [ 搜索分页 ]相关推荐
- layui 数据表格的搜索分页功能的实现
最近在使用layui+larave做项目,需要使用到table的分页+搜索的功能,一开始没有什么思路,从网上找了几个,用在自己这里并不正确,不知是自己有哪里写错了,还是这几个是不正确,下面是自己亲自试 ...
- ExtJs 备忘录(2)—— Form表单(二) [ 控件封装 ]
前言 本以为可以稳稳当当的工作.安安心心的写文章,结果我做了一件非常疯狂的事情,换新工作一周后辞了--然后去了另外一家公司 - - #,理由就不详说了,总之现在是每天加班到8-9点,虽然如此但是这个团 ...
- jquery插件dataTables(dataTables在显示表格的时候,果然是个好东西,支持排序/搜索/分页/...)
jquery插件dataTables dataTables在显示表格的时候,支持排序/搜索/分页/... 官网:http://www.datatables.net/ demo: [javascript ...
- ExtJs 备忘录(1)—— Form表单(一) [ 控件使用 ]
前言 ExtJS接触至今已有4个月(5.1 - 9.1),小有心得,由于公司短期内并没有打算采用,所以备忘之以备他日之需.虽然网上资料不少,但学起来仍感费劲,所以还是想以自己的方式来与众分享. 系列 ...
- php分页显示数据表格显示,php+layui数据表格实现数据分页渲染代码
一.html 二.js 说明:需要引入layui中的table和laytpl模板引擎,laytpl可以自定义事件及自定义数据字段等 查看详情 {{# if (d.hotcake === '超级爆款') ...
- Django 04 :靓号管理【 靓号的增删改 + 搜索 + 分页 + 时间插件 + ModelForm与BootStrap】
文章目录 1.用户管理:编辑与删除 1.1.编辑用户 (1)前端基础效果 (2)提交 (3)补充知识 1.2.删除用户 2.靓号管理 2.1.数据库的表结构 2.2.靓号列表 2.3.靓号:新建.编辑 ...
- SAP UI 搜索分页技术
搜索分页技术往往和另一个术语Lazy Loading(懒加载)联系起来.今天由Jerry首先介绍S/4HANA,CRM Fiori和S4CRM应用里的UI搜索分页的实现原理.后半部分由SAP成都研究院 ...
- php数据表格的重载,layui数据表格实现重载数据表格功能(搜索功能)
layui数据表格实现重载数据表格功能,以搜索功能为例 加载数据表格 实现搜索功能和数据表格重载 全部代码 加载数据表格 按照layui官方文档示例 HTML部分 JavaScript部分 var t ...
- ExtJs 备忘录(4)—— Form表单(四) [ 数据提交 ]
一.截图和示例共用Ext.FormPanel 1.1 截图 由于本文主要关注的是表单提交的几种方式,所以仅用了一个表单项以便于测试和减少示例代码. 1.2 示例共用Ext.FormPanel ...
最新文章
- 操作系统读写者问题实验报告_操作系统知识点总结
- 华为云计算FusionCompute环境部署实验之使用批量部署工具安装
- 异常:System.Runtime.InteropServices.Marshal.GetTypeFromCLSID(System.Guid)
- ora-24811提供写入的数据少于指定的数据_C++开源、高性能时序数据库pinusdb
- android扩散波动动画,使用WebGL制作图片的像素脉冲波(粒子化扩散波动)动画特效...
- TypeError: only integer scalar arrays can be converted to a scalar index
- 2020年度国家自然科学基金医学领域结果公布(9月27后可查)
- 【Xamarin.Android】掌握android支持库
- 4G路由器光伏发电监控系统
- 高薪设计师必修课 AE移动UI动效设计从入门到实战
- 人大金仓数据库的备份与还原
- 【牛客刷题-SQL大厂面试真题】NO5.某宝店铺分析(电商模式)
- 内网安全-域横向PTHPTKPTT哈希票据传递
- 基于Unity3D的相机功能的实现(六)—— 上帝视角(王者荣耀视角)
- 【科普】Kubectl基本操作命令
- Opencv在图片上写文字(hello)
- 传感器实验——寻迹小车
- HTTP协议与Get和Post的区别
- 我是深圳南山的集体户口,要将我老婆的户口随迁入深圳 没有房产,可以办深圳人才中心的集体户口吗
- 如何用python打印等腰三角形