一.WCF部分
1.通过查看官方的示例得知,分页数据源需要一个记录总数值,为保持通用性,这里借鉴jillZhang的文章http://www.cnblogs.com/jillzhang/archive/2008/06/29/1232086.html,把他写的通用类PageData拿过来直接用
1
using
System;
2 using System.Runtime.Serialization;
3
4 namespace Ajax_WCF
5 {
6 [DataContract]
7 public class PageData < T >
8 {
9 [DataMember]
10 public int TotolRecord
11 { get ; set ;}
12
13 [DataMember]
14 public T Data
15 { get ; set ; }
16 }
17 }
2 using System.Runtime.Serialization;
3
4 namespace Ajax_WCF
5 {
6 [DataContract]
7 public class PageData < T >
8 {
9 [DataMember]
10 public int TotolRecord
11 { get ; set ;}
12
13 [DataMember]
14 public T Data
15 { get ; set ; }
16 }
17 }
2.服务端的WCF方法:GetDataByPage
[OperationContract]
[WebInvoke(Method = " * " , ResponseFormat = WebMessageFormat.Json,UriTemplate = " GetDataByPage?start={start}&limit={limit} " )]
public PageData < T_Class[] > GetDataByPage( int start, int limit)
{
PageData < T_Class[] > _Result = new PageData < T_Class[] > ();
using (DBDataContext db = new DBDataContext())
{
try
{
IQueryable < T_Class > query = db.T_Classes;
_Result.TotolRecord = query.Count();
var query2 = query.OrderBy(c => c.F_RootID).ThenBy(c => c.F_Orders).Select(c => new { F_ID = c.F_ID, F_ClassName = c.F_ClassName, F_ParentID =
c.F_ParentID, F_Orders = c.F_Orders, F_ReadMe = c.F_ReadMe }).Skip(start).Take(limit);
_Result.Data = db.ExecuteQuery < T_Class > (query2, true ).ToArray < T_Class > ();
}
catch { }
db.Connection.Close();
}
return _Result;
}
[WebInvoke(Method = " * " , ResponseFormat = WebMessageFormat.Json,UriTemplate = " GetDataByPage?start={start}&limit={limit} " )]
public PageData < T_Class[] > GetDataByPage( int start, int limit)
{
PageData < T_Class[] > _Result = new PageData < T_Class[] > ();
using (DBDataContext db = new DBDataContext())
{
try
{
IQueryable < T_Class > query = db.T_Classes;
_Result.TotolRecord = query.Count();
var query2 = query.OrderBy(c => c.F_RootID).ThenBy(c => c.F_Orders).Select(c => new { F_ID = c.F_ID, F_ClassName = c.F_ClassName, F_ParentID =
c.F_ParentID, F_Orders = c.F_Orders, F_ReadMe = c.F_ReadMe }).Skip(start).Take(limit);
_Result.Data = db.ExecuteQuery < T_Class > (query2, true ).ToArray < T_Class > ();
}
catch { }
db.Connection.Close();
}
return _Result;
}
这里讲一个小技巧,也是从jillZhang那里学过来的,以前默认在linq to sql(dbml)设计器里拖出来的类,默认生成的代码是不支持序列化的,我们只能手动添加[DataContract]和[DataMember],
其实系统可以自动生成的,方法是在dbml的属性栏里设置"序列化模式"为"单向",如下图:
二.静态页部分
<%
@ Page Language
=
"
C#
"
AutoEventWireup
=
"
true
"
CodeBehind
=
"
04_Grid_Page.aspx.cs
"
Inherits
=
"
Ajax_WCF._4_Grid_Page
"
%>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< link rel ="stylesheet" type ="text/css" href ="js/ext2.2/resources/css/ext-all.css" />
< script type ="text/javascript" src ="js/ext2.2/adapter/ext/ext-base.js" ></ script >
< script type ="text/javascript" src ="js/ext2.2/ext-all.js" ></ script >
< title ></ title >
</ head >
< body >
< script type ="text/javascript" >
Ext.onReady( function () {
var proxy = new Ext.data.HttpProxy({
url: ' MyService.svc/GetDataByPage ' ,
method: ' GET '
});
var reader = new Ext.data.JsonReader(
{ root: ' Data ' , totalProperty: ' TotolRecord ' },
[
{ name: ' F_ID ' },
{ name: ' F_ClassName ' },
{ name: ' F_ParentID ' },
{ name: ' F_Orders ' },
{ name: ' F_ReadMe ' }
]
);
var store = new Ext.data.Store(
{ proxy: proxy, reader: reader }
);
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
new Ext.grid.RowNumberer(),
{ id: ' F_ID ' , header: " 分类ID " , width: 30 , sortable: true , dataIndex: ' F_ID ' },
{ header: " 分类名称 " , width: 75 , sortable: true , dataIndex: ' F_ClassName ' },
{ header: " 父类ID " , width: 75 , sortable: true , dataIndex: ' F_ParentID ' },
{ header: " 排序号 " , width: 75 , sortable: true , dataIndex: ' F_Orders ' },
{ header: " 备注 " , width: 50 , sortable: true , dataIndex: ' F_ReadMe ' }
],
stripeRows: true ,
autoExpandColumn: ' F_ID ' ,
height: 393 ,
width: 600 ,
title: ' 产品信息 ' ,
viewConfig:
{
columnsText: ' 列 ' ,
sortAscText: ' 升序 ' ,
sortDescText: ' 降序 '
},
bbar: new Ext.PagingToolbar({
pageSize: 15 , // 每页显示的记录值
store: store,
displayInfo: true ,
displayMsg: ' 总记录数 {0} - {1} of {2} ' ,
emptyMsg: " 没有记录 "
})
});
grid.render( ' page-grid ' );
store.load({ params: { start: 0 , limit: 15 } });
grid.getSelectionModel().selectFirstRow();
});
</ script >
< div id ="page-grid" ></ div >
</ body >
</ html >
转载请注明来自"菩提树下的杨过"
http://www.cnblogs.com/yjmyzz/archive/2008/08/30/1280282.html
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< link rel ="stylesheet" type ="text/css" href ="js/ext2.2/resources/css/ext-all.css" />
< script type ="text/javascript" src ="js/ext2.2/adapter/ext/ext-base.js" ></ script >
< script type ="text/javascript" src ="js/ext2.2/ext-all.js" ></ script >
< title ></ title >
</ head >
< body >
< script type ="text/javascript" >
Ext.onReady( function () {
var proxy = new Ext.data.HttpProxy({
url: ' MyService.svc/GetDataByPage ' ,
method: ' GET '
});
var reader = new Ext.data.JsonReader(
{ root: ' Data ' , totalProperty: ' TotolRecord ' },
[
{ name: ' F_ID ' },
{ name: ' F_ClassName ' },
{ name: ' F_ParentID ' },
{ name: ' F_Orders ' },
{ name: ' F_ReadMe ' }
]
);
var store = new Ext.data.Store(
{ proxy: proxy, reader: reader }
);
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
new Ext.grid.RowNumberer(),
{ id: ' F_ID ' , header: " 分类ID " , width: 30 , sortable: true , dataIndex: ' F_ID ' },
{ header: " 分类名称 " , width: 75 , sortable: true , dataIndex: ' F_ClassName ' },
{ header: " 父类ID " , width: 75 , sortable: true , dataIndex: ' F_ParentID ' },
{ header: " 排序号 " , width: 75 , sortable: true , dataIndex: ' F_Orders ' },
{ header: " 备注 " , width: 50 , sortable: true , dataIndex: ' F_ReadMe ' }
],
stripeRows: true ,
autoExpandColumn: ' F_ID ' ,
height: 393 ,
width: 600 ,
title: ' 产品信息 ' ,
viewConfig:
{
columnsText: ' 列 ' ,
sortAscText: ' 升序 ' ,
sortDescText: ' 降序 '
},
bbar: new Ext.PagingToolbar({
pageSize: 15 , // 每页显示的记录值
store: store,
displayInfo: true ,
displayMsg: ' 总记录数 {0} - {1} of {2} ' ,
emptyMsg: " 没有记录 "
})
});
grid.render( ' page-grid ' );
store.load({ params: { start: 0 , limit: 15 } });
grid.getSelectionModel().selectFirstRow();
});
</ script >
< div id ="page-grid" ></ div >
</ body >
</ html >
![](http://images.cntvs.com/jimmy/080830/04.jpg)