Ext.Net學習筆記12：Ext.Net GridPanel Filter用法

Ext.Net GridPanel的用法在上一篇中已經介紹過，這篇筆記講介紹Filter的用法。

Filter是用來過濾數據的，效果如圖：

數據過濾分為兩種：本地Filter和遠程Filter，默認為遠程過濾，也就是將查詢條件拿到服務器進行查詢並得到返回結果。

本地Filter

直接上代碼，還是我們上一篇中的GridPanel，加入了Filter功能：

<ext:GridPanel runat="server" ID="grid" ColumnLines="true" Width="500" Height="200">
    <Store>
        <ext:Store runat="server" ID="storeUserInfo" PageSize="5" >
            <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>
        </ext:Store>
    </Store>
    <ColumnModel>
        <Columns>
            <ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server"></ext:RowNumbererColumn>
            <ext:Column runat="server" ID="columnID" Width="100" Text="ID" DataIndex="ID"></ext:Column>
            <ext:Column runat="server" ID="columnName" Width="200" Text="姓名" DataIndex="Name"></ext:Column>
            <ext:Column runat="server" ID="columnGender" Width="50" Text="性別" DataIndex="Gender"></ext:Column>
            <ext:NumberColumn runat="server" ID="columnAge" Width="60" Text="年齡" DataIndex="Age"></ext:NumberColumn>
        </Columns>
    </ColumnModel>
    <SelectionModel>
        <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" Mode="Simple"></ext:CheckboxSelectionModel>
    </SelectionModel>
    <BottomBar>
        <ext:PagingToolbar runat="server" ID="gridPaging" StoreID="storeUserInfo"></ext:PagingToolbar>
    </BottomBar>
 <Features> <ext:GridFilters ID="GridFilters1" runat="server" Local="true"> <Filters> <ext:StringFilter DataIndex="Name"></ext:StringFilter> <ext:NumericFilter DataIndex="Age"></ext:NumericFilter> </Filters> </ext:GridFilters> </Features>
</ext:GridPanel>

Filter是GridPanel的一個功能，所以放在Features標簽內。

GridFilters的屬性Local="true"說明要使用的過濾方式為本地，不進行服務器請求。

StringFilter 和 NumericFilter是兩個過濾條件，它將過濾不同數據類型（字符串和數字）的字段。DataIndex對應GridPanel Column中的DataIndex。

姓名過濾：

年齡過濾：

遠程Filter

遠程過濾的過程是在用戶輸入過濾條件之后，客戶端將用戶的輸入構造成查詢條件，並通過ajax的方式請求服務器，服務器則會根據傳入的Filters參數過濾到相應的數據，然后返回給客戶端。

為了能夠進行遠程Filter，我們首先要將GridFilters 的屬性Local改為"false"，或刪除掉Local屬性（因為默認進行遠程Filter）

<Features>
    <ext:GridFilters ID="GridFilters1" runat="server" Local="false">
        <Filters>
            <ext:StringFilter DataIndex="Name"></ext:StringFilter>
            <ext:NumericFilter DataIndex="Age"></ext:NumericFilter>
        </Filters>
    </ext:GridFilters>
</Features>

然后，我們需要讓Store支持遠程異步加載數據，我們這里使用PageProxy和OnReadData來完成：

<ext:Store runat="server" ID="storeUserInfo" PageSize="5" 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>
</ext:Store>

服務器端的storeUserInfo_ReadData代碼如下：

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();
}

完成上面的修改以后，我們只是將原來的一次加載數據改成了異步加載數據，接下來我們來修改storeUserInfo方法，使它支持Filter過濾條件：

首先要構造查詢條件集合：

//如果是ashx或mvc頁面，可以使用context.Request["filter"];
string filters = e.Parameters["filter"];
FilterConditions conditions = null;

然后根據條件查詢，下面是一個簡單的示例：

if (!string.IsNullOrWhiteSpace(filters))
{
    conditions = new FilterConditions(filters);

    foreach (var item in conditions.Conditions)
    {
        switch (item.Field)
        {
            case "Name":
                {
                    string value = item.Value<string>();
                    userInfoList = userInfoList.FindAll(m => m.Name.Contains(value));
                }
                break;
            case "Age":
                {
                    int value = item.Value<int>();
                    switch (item.Comparison)
                    {
                        case Comparison.Gt:
                            userInfoList = userInfoList.FindAll(m => m.Age >= value);
                            break;
                        case Comparison.Lt:
                            userInfoList = userInfoList.FindAll(m => m.Age <= value);
                            break;
                        case Comparison.Eq:
                            userInfoList = userInfoList.FindAll(m => m.Age == value);
                            break;
                    }
                }
                break;
        }
    }
}

這里面的item就是一個查詢條件，Field是字段，表示要過濾的字段；

item中有一個比較重要的屬性Comparison，它是一個枚舉類型：

• Gt：大於
• Lt：小於
• Eq：等於

另外，Value<T>()方法可以獲取查詢條件的值，泛型T是我們需要是類型