ExtJs学习笔记(6)_可分页的GridPanel
一.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://yjmyzz.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
出处：http://yjmyzz.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
