天天看點

Wijmo 更優美的jQuery UI部件集:在對Wijmo GridView進行排序或者過濾時保留選擇

許多客戶面臨這樣的場景,他們希望在應用了排序或者過濾之後仍然将最終使用者的行選狀态保留。通常情況下,當我們在選擇了任何行之後應用排序或者過濾會導緻回傳之後選擇狀态丢失。本篇部落格将讨論我們如何做才能在排序和過濾之後仍然保持選擇狀态。

Wijmo 更優美的jQuery UI部件集:在對Wijmo GridView進行排序或者過濾時保留選擇

步驟1:将GridView綁定到一張資料表

首先,我們需要将gridview綁定到一個資料表,比如來自Northwind資料庫的Categories表。由于我們用的是伺服器端的選擇,我們需要将AutoGenerateSelectButton屬性設定為“True”,然後将“ClientSelectionMode”屬性設定為“None”。否則,我們将同時具有用戶端和伺服器端兩個選擇。

此外,我們還需要設定AllowSorting 以及 ShowFilter 屬性值為“True”以便允許在gridview上執行排序或者過濾。以下是.aspx頁面的源代碼:

Wijmo 更優美的jQuery UI部件集:在對Wijmo GridView進行排序或者過濾時保留選擇

步驟2:儲存選中的行

我們需要在一個ViewState對象中儲存選中行的資料鍵值,使得我們可以使用它再次設定選擇。是以我們需要處理SelectedIndexChanged事件。在此事件中使用到的代碼片斷如下:

步驟3:重新設定選中的行索引

我們需要在排序或者過濾完成,重新執行選擇動作之前,重新設定gridview的SelectedIndex屬性。這項工作可以在Sorting或者Filtering事件中通過以下代碼片斷完成:

步驟4:重新選中該行

由于gridview會在回傳時(由于執行了排序或者過濾時發生)進行了重新綁定,我們需要處理DataBound事件以重新設定選擇。在此,我們應當檢查原始選中的行是否可見,之後通過ViewState對象對其進行重新選擇。代碼片斷如下所示:

Wijmo 更優美的jQuery UI部件集:在對Wijmo GridView進行排序或者過濾時保留選擇

請參見附件中完整的示例。

<a href="http://gcdn.grapecity.com/attachment.aspx?attachmentid=2491">下載下傳示例</a>