码迷,mamicode.com
首页 > Web开发 > 详细

Ext.Net学习笔记13:Ext.Net GridPanel Sorter用法

时间:2016-03-10 12:18:05      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:

Ext.Net学习笔记13:Ext.Net GridPanel Sorter用法

这篇笔记将介绍如何使用Ext.Net GridPanel 中使用Sorter。

默认情况下,Ext.Net GridPanel中的列都具有排序功能,效果如下:

技术分享

如果要禁用列排序,需要在列模型中添加一个属性Sortable="false"

客户端排序

排序是对Store的操作。如果我们要在一个Store中加入排序,可以使用下面的配置:

<Sorters>
    <ext:DataSorter Property="Name" Direction="DESC"></ext:DataSorter>
</Sorters>

有了这段代码,我们的Store将会在显示之前进行排序。效果如下:

技术分享

服务器端排序

默认情况下,排序是在客户端进行的,不会进行远程请求。如果Store一次加载了所有数据,客户端排序没有问题;如果Store是分页异步加载数据,那么这种排序方式就不能满足需要了,我们需要异步的排序。

我们来将Store改为异步分页的Store,代码如下:

<ext:Store runat="server" ID="storeUserInfo" PageSize="5" 
    RemoteSort="true" OnReadData="storeUserInfo_ReadData">
    <Model>
        <ext:Model ID="UserInfoModel" runat="server" IDProperty="ID">
            <Fields>
                <ext:ModelField Name="ID" Type="Int"></ext:ModelField>
                <ext:ModelField Name="Name" Type="String"></ext:ModelField>
                <ext:ModelField Name="Gender" Type="String"></ext:ModelField>
                <ext:ModelField Name="Age" Type="Int"></ext:ModelField>
            </Fields>
        </ext:Model>
    </Model>
    <Proxy>
        <ext:PageProxy></ext:PageProxy>
    </Proxy>
    <Sorters>
        <ext:DataSorter Property="Name" Direction="DESC"></ext:DataSorter>
    </Sorters>
</ext:Store>

我们对Store进行修改,加入了RemoteSort属性,表示是否进行远程排序,然后加入默认的排序规则,Property表示排序字段,Direction表示排序方向(正序、倒序)

OnReadData事件的处理方法如下:

protected void storeUserInfo_ReadData(object sender, Ext.Net.StoreReadDataEventArgs e)
{
    int start = e.Start;
    int limit = e.Limit;

    var userInfoList = UserInfo.GetData();
    e.Total = userInfoList.Count;

    storeUserInfo.DataSource = userInfoList.Skip(start).Take(limit).ToList();
    storeUserInfo.DataBind();
}

上面的这段代码只是完成了Store的异步分页,如果想要我们的Store进行服务器端的排序,还需要修改ReadData事件处理方法,加入排序的代码:

//处理排序的相关代码
if (e.Sort.Count() > 0)
{
    foreach (var item in e.Sort)
    {
        switch (item.Property)
        {
            case "Name":
                userInfoList.Sort((u1, u2) =>
                {
                    switch (item.Direction)
                    {
                        case Ext.Net.SortDirection.Default:
                        case Ext.Net.SortDirection.ASC:
                        default:
                            return string.Compare(u1.Name, u2.Name);
                        case Ext.Net.SortDirection.DESC:
                            return 0 - string.Compare(u1.Name, u2.Name);
                    }
                });
                break;
            case "Age":
                userInfoList.Sort((u1, u2) =>
                {
                    switch (item.Direction)
                    {
                        case Ext.Net.SortDirection.Default:
                        case Ext.Net.SortDirection.ASC:
                        default:
                            return u1.Age - u2.Age;
                        case Ext.Net.SortDirection.DESC:
                            return u2.Age - u1.Age;
                    }
                    
                });
                break;
        }
    }
}

在这段代码中,item.Property表示排序字段;item.Direction表示排序方向。

如果在.ashx中使用排序,可以先构造一个请求参数,然后使用上面的代码进行排序:

var prms = new StoreRequestParameters(context);
// use prms.Sort[0].Property and prms.Sort[0].Direction

通过context构造一个请求参数,然后可以获取参数里面的Sort数组。

Ext.Net学习笔记13:Ext.Net GridPanel Sorter用法

标签:

原文地址:http://www.cnblogs.com/dwuge/p/5261339.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!