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         { getset;}
12 
13         [DataMember]
14         public T Data
15         { getset; }
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;
        } 

这里讲一个小技巧,也是从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
posted @ 2008-08-30 20:17  菩提树下的杨过  阅读(10256)  评论(2编辑  收藏