|
|
51CTO旗下网站
|
|
移动端

更优美的jQuery UI部件

由于我们用的是服务器端的选择,我们需要将AutoGenerateSelectButton属性设置为“True”,然后“ClientSelectionMode”属性设置为“None”。否则,我们将同时具有客户端和服务器端两个选择。

作者:葡萄城控件技术来源:葡萄城控件技术团队博客|2012-04-27 09:38

许多客户面临这样的场景,他们希望在应用了排序或者过滤之后仍然将最终用户的行选状态保留。通常情况下,当我们在选择了任何行之后应用排序或者过滤会导致回传之后选择状态丢失。本篇博客将讨论我们如何做才能在排序和过滤之后仍然保持选择状态。

image

步骤1:将GridView绑定到一张数据表

首先,我们需要将gridview绑定到一个数据表,比如来自Northwind数据库的Categories表。由于我们用的是服务器端的选择,我们需要将AutoGenerateSelectButton属性设置为“True”,然后将“ClientSelectionMode”属性设置为“None”。否则,我们将同时具有客户端和服务器端两个选择。

此外,我们还需要设置AllowSorting 以及 ShowFilter 属性值为“True”以便允许在gridview上执行排序或者过滤。以下是.aspx页面的源代码:

  1. <wijmo:C1GridView ID="C1GridView1" runat="server" AllowSorting="True" ClientSelectionMode="None" 
  2. AutogenerateColumns="False" AutoGenerateSelectButton="True" 
  3. DataKeyNames="CategoryID" DataSourceID="AccessDataSource1" 
  4. ShowFooter="False" ShowFilter="True"> 
  5. <Columns> 
  6. <wijmo:C1BoundField DataField="CategoryID" HeaderText="CategoryID" 
  7. ReadOnly="True" SortExpression="CategoryID"> 
  8. </wijmo:C1BoundField> 
  9. <wijmo:C1BoundField DataField="CategoryName" HeaderText="CategoryName" 
  10. SortExpression="CategoryName"> 
  11. </wijmo:C1BoundField> 
  12. <wijmo:C1BoundField DataField="Description" HeaderText="Description" 
  13. SortExpression="Description"> 
  14. </wijmo:C1BoundField> 
  15. <wijmo:C1BoundField DataField="Picture" HeaderText="Picture" 
  16. SortExpression="Picture"> 
  17. </wijmo:C1BoundField> 
  18. <wijmo:C1BoundField DataField="UserName" HeaderText="UserName" 
  19. SortExpression="UserName"> 
  20. </wijmo:C1BoundField> 
  21. </Columns> 
  22. </wijmo:C1GridView> 
  23. <asp:AccessDataSource ID="AccessDataSource1" runat="server" 
  24. DataFile="~/App_Data/C1NWind.mdb" 
  25. SelectCommand="SELECT * FROM [Categories]"> 
  26. </asp:AccessDataSource> 

7.1

步骤2保存选中的行

我们需要在一个ViewState对象中保存选中行的数据键值,使得我们可以使用它再次设置选择。因此我们需要处理SelectedIndexChanged事件。在此事件中使用到的代码片断如下

步骤3:重新设置选中的行索引

我们需要在排序或者过滤完成,重新执行选择动作之前,重新设置gridviewSelectedIndex属性。这项工作可以在Sorting或者Filtering事件中通过以下代码片断完成:

  1. Protected Sub C1GridView1_Sorting(sender As Object, e As C1.Web.Wijmo.Controls.C1GridView.C1GridViewSortEventArgs) Handles C1GridView1.Sorting  
  2. ' 重置选择索引  
  3. C1GridView1.SelectedIndex = -1  
  4. End Sub  
  5. Protected Sub C1GridView1_Filtering(sender As Object, e As C1.Web.Wijmo.Controls.C1GridView.C1GridViewFilterEventArgs) Handles C1GridView1.Filtering  
  6. '重置选择索引  
  7. C1GridView1.SelectedIndex = -1  
  8. End Sub 

步骤4:重新选中该行

由于gridview会在回传时(由于执行了排序或者过滤时发生)进行了重新绑定,我们需要处理DataBound事件以重新设置选择。在此,我们应当检查原始选中的行是否可见,之后通过ViewState对象对其进行重新选择。代码片断如下所示:

  1. Protected Sub C1GridView1_DataBound(sender As Object, e As System.EventArgs) Handles C1GridView1.DataBound  
  2. Dim Row As C1GridViewRow  
  3. Dim SelectedValue As String = ViewState("SelectedValue")  
  4. If SelectedValue Is Nothing Then  
  5. Return  
  6. End If  
  7. ' 检查选中的行是否可见,并且重新对其进行选择。  
  8. For Each Row In C1GridView1.Rows  
  9. Dim KeyValue As String = C1GridView1.DataKeys(Row.RowIndex).Value  
  10. If (KeyValue = SelectedValue) Then  
  11. C1GridView1.SelectedIndex = Row.RowIndex  
  12. End If  
  13. Next  
  14. End Sub 

 7.2

请参见附件中完整的示例。

下载示例

Wijmo下载,请进入Studio for ASP.NET Wijmo 2012 v1正式发布(2012.03.22更新)!

【编辑推荐】

【责任编辑:张伟 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

Tomcat与Java Web开发技术详解

本书详细介绍了在最新Tomcat 5版本上开发Java Web应用的各种技术。主要内容包括:Tomcat和Java Web开发的基础知识,Java Web开发的高级技术...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊