ExtJs学习笔记(6)_可分页的GridPanel
一.WCF部分
1.通过查看官方的示例得知，分页数据源需要一个记录总数值，为保持通用性。
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.服务端的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_Class
Name = 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]。
二.静态页部分
<%@ 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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/ext2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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>点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦