更優(yōu)美的jQuery UI部件
許多客戶面臨這樣的場(chǎng)景,他們希望在應(yīng)用了排序或者過濾之后仍然將最終用戶的行選狀態(tài)保留。通常情況下,當(dāng)我們?cè)谶x擇了任何行之后應(yīng)用排序或者過濾會(huì)導(dǎo)致回傳之后選擇狀態(tài)丟失。本篇博客將討論我們?nèi)绾巫霾拍茉谂判蚝瓦^濾之后仍然保持選擇狀態(tài)。
步驟1:將GridView綁定到一張數(shù)據(jù)表
首先,我們需要將gridview綁定到一個(gè)數(shù)據(jù)表,比如來自Northwind數(shù)據(jù)庫(kù)的Categories表。由于我們用的是服務(wù)器端的選擇,我們需要將AutoGenerateSelectButton屬性設(shè)置為“True”,然后將“ClientSelectionMode”屬性設(shè)置為“None”。否則,我們將同時(shí)具有客戶端和服務(wù)器端兩個(gè)選擇。
此外,我們還需要設(shè)置AllowSorting 以及 ShowFilter 屬性值為“True”以便允許在gridview上執(zhí)行排序或者過濾。以下是.aspx頁(yè)面的源代碼:
- <wijmo:C1GridView ID="C1GridView1" runat="server" AllowSorting="True" ClientSelectionMode="None"
- AutogenerateColumns="False" AutoGenerateSelectButton="True"
- DataKeyNames="CategoryID" DataSourceID="AccessDataSource1"
- ShowFooter="False" ShowFilter="True">
- <Columns>
- <wijmo:C1BoundField DataField="CategoryID" HeaderText="CategoryID"
- ReadOnly="True" SortExpression="CategoryID">
- </wijmo:C1BoundField>
- <wijmo:C1BoundField DataField="CategoryName" HeaderText="CategoryName"
- SortExpression="CategoryName">
- </wijmo:C1BoundField>
- <wijmo:C1BoundField DataField="Description" HeaderText="Description"
- SortExpression="Description">
- </wijmo:C1BoundField>
- <wijmo:C1BoundField DataField="Picture" HeaderText="Picture"
- SortExpression="Picture">
- </wijmo:C1BoundField>
- <wijmo:C1BoundField DataField="UserName" HeaderText="UserName"
- SortExpression="UserName">
- </wijmo:C1BoundField>
- </Columns>
- </wijmo:C1GridView>
- <asp:AccessDataSource ID="AccessDataSource1" runat="server"
- DataFile="~/App_Data/C1NWind.mdb"
- SelectCommand="SELECT * FROM [Categories]">
- </asp:AccessDataSource>
步驟2:保存選中的行
我們需要在一個(gè)ViewState對(duì)象中保存選中行的數(shù)據(jù)鍵值,使得我們可以使用它再次設(shè)置選擇。因此我們需要處理SelectedIndexChanged事件。在此事件中使用到的代碼片斷如下
步驟3:重新設(shè)置選中的行索引
我們需要在排序或者過濾完成,重新執(zhí)行選擇動(dòng)作之前,重新設(shè)置gridview的SelectedIndex屬性。這項(xiàng)工作可以在Sorting或者Filtering事件中通過以下代碼片斷完成:
- Protected Sub C1GridView1_Sorting(sender As Object, e As C1.Web.Wijmo.Controls.C1GridView.C1GridViewSortEventArgs) Handles C1GridView1.Sorting
- ' 重置選擇索引
- C1GridView1.SelectedIndex = -1
- End Sub
- Protected Sub C1GridView1_Filtering(sender As Object, e As C1.Web.Wijmo.Controls.C1GridView.C1GridViewFilterEventArgs) Handles C1GridView1.Filtering
- '重置選擇索引
- C1GridView1.SelectedIndex = -1
- End Sub
步驟4:重新選中該行
由于gridview會(huì)在回傳時(shí)(由于執(zhí)行了排序或者過濾時(shí)發(fā)生)進(jìn)行了重新綁定,我們需要處理DataBound事件以重新設(shè)置選擇。在此,我們應(yīng)當(dāng)檢查原始選中的行是否可見,之后通過ViewState對(duì)象對(duì)其進(jìn)行重新選擇。代碼片斷如下所示:
- Protected Sub C1GridView1_DataBound(sender As Object, e As System.EventArgs) Handles C1GridView1.DataBound
- Dim Row As C1GridViewRow
- Dim SelectedValue As String = ViewState("SelectedValue")
- If SelectedValue Is Nothing Then
- Return
- End If
- ' 檢查選中的行是否可見,并且重新對(duì)其進(jìn)行選擇。
- For Each Row In C1GridView1.Rows
- Dim KeyValue As String = C1GridView1.DataKeys(Row.RowIndex).Value
- If (KeyValue = SelectedValue) Then
- C1GridView1.SelectedIndex = Row.RowIndex
- End If
- Next
- End Sub
請(qǐng)參見附件中完整的示例。
Wijmo下載,請(qǐng)進(jìn)入Studio for ASP.NET Wijmo 2012 v1正式發(fā)布(2012.03.22更新)!






