更优美的jQuery UI部件

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

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

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更新)!

责任编辑:张伟 来源: 葡萄城控件技术团队博客
相关推荐

2022-08-23 14:13:36

LaTeX标记语言

2023-04-26 00:00:01

ChatGPT文化语言

2016-10-28 21:47:44

开发经验Android

2016-01-12 09:56:51

优美C代码

2009-12-29 11:02:20

架构师艺术气质

2013-10-29 11:04:10

惠普超级惠省打印

2019-05-06 11:06:30

PyTorch深度学习框架

2013-12-02 14:13:54

jQueryUI

2012-06-29 10:20:55

jQuery

2012-10-19 14:51:53

jQueryJSJavaScript

2011-04-07 08:55:23

WebUI素材

2012-02-20 09:54:35

ibmdw

2012-06-15 11:32:19

ibmdw

2013-12-02 13:59:22

jQueryUI

2023-08-26 21:38:04

Kuma框架CSS

2011-11-11 14:05:13

Jscex

2012-09-17 10:35:41

JavaScriptJS代码

2012-10-15 10:07:45

jQueryJSWeb

2017-01-23 21:05:00

AndroidApp启动优化

2017-05-17 15:50:34

开发前端react
点赞
收藏

51CTO技术栈公众号