前言
近些天对于厚积薄发有深刻的理解,尤其是月末那两天,很想再写两篇文章,保持每周一篇——每月至少四篇以上的文章。写文章分两种情况:一种情况是已经积累了许多经验,写起来轻松且得心应手,内容和系列文章容易把握,最典型的就是视频监控的那系列文章,得以写完是因为已经从事近半年相关的开发工作;另一种情况则是有方向但积累不足甚至无积累,边学边实践,然后进行归类和总结成系列,比如视频监控第二个系列和本系列都属于这种情况,如果时间稍微充足且过程较为顺利,尚可勉强完成,反之则遥遥无期。由此感悟,下次写系列文章还是得先多多积累,至少系列文章的内容在腹中已有一半以上,方可开动,否则可考虑继续积累或者拆除几篇相对独立的文章单独写,不必冠以系列,我可不想盖烂尾楼啊!
系列
推荐
正文
一、效果图

二、代码实现
2.1 客户端
tablepage.aspx
代码
ext.onready(function() {
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);
// }
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" onclick="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
public override string search()
{
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)
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);
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; }
/// 邮箱
public string email { get; set; }
/// 名称
public string name { get; set; }
/// 性别 0 女 1 男
public int gender { get; set; }
#endregion
代码说明:
这里仍然没有连接数据库,模拟数据与分页查询。
2.3 存储过程
create procedure dbo.datapager
(
@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的例子)。
三、下载
结束语
实在是想再补上点什么,暂且如此,随后归类再补上吧。
转载:http://www.cnblogs.com/over140/archive/2009/11/30/1613130.html