Wijmo 更优美的jQuery UI部件集:在对Wijmo GridView进行排序或者过滤时保留选择

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

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

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

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

<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:保存选中的行

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

Protected Sub C1GridView1_SelectedIndexChanged(sender As Object, e As System.EventArgs) Handles C1GridView1.SelectedIndexChanged

' 保存选中数据行的数据键值

If (Not C1GridView1.SelectedIndex = -1) Then

ViewState("SelectedValue") = C1GridView1.SelectedValue

End If

End Sub

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

我们需要在排序或者过滤完成,重新执行选择动作之前,重新设置gridviewSelectedIndex属性。这项工作可以在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会在回传时(由于执行了排序或者过滤时发生)进行了重新绑定,我们需要处理DataBound事件以重新设置选择。在此,我们应当检查原始选中的行是否可见,之后通过ViewState对象对其进行重新选择。代码片断如下所示:

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

' 检查选中的行是否可见,并且重新对其进行选择。

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

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

下载示例

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

Android 深入ViewPager补间动画,实现类京东商城首页广告Banner切换效果

某天看到京东商城首页的滑动广告的Banner,在流动切换的时候有立体的动画效果,感觉很有意思,然后研究了下如何实现.  废话不多说,接下来我会讲述如何实现这种效...

2696
来自专栏葡萄城控件技术团队

VS2010 Extension实践(1)

最近VS2010 Extension在Visual Studio Blog(http://blogs.msdn.com/visualstudio/)上提得很频繁...

2049
来自专栏Objective-C

Swift-MVVM 简单演练(三)

2873
来自专栏林德熙的博客

wpf DoEvents 用法原理存在的坑推荐方法

如果在执行一段卡UI的代码,这时如何让UI响应。如果存在代码需要获得依赖属性,那么代码就需要在UI线程执行,但是这时就会卡UI,为了让UI响应,所以就需要使用D...

4731
来自专栏增长技术

PullToRefreshLayout

PullToRefreshLayout是一个用法同系统SwipeRefreshLayout可灵活自定义下拉刷新、上拉加载视图的Android库.

1311
来自专栏Jaycekon

Phantomjs+Nodejs+Mysql数据抓取(2.抓取图片)

概要 这篇博客是在上一篇博客Phantomjs+Nodejs+Mysql数据抓取(1.抓取数据) http://blog.csdn.net/jokerko...

3495
来自专栏ASP.NET MVC5 后台权限管理系统

ASP.NET MVC5+EF6+EasyUI 后台管理系统(80)-自由桌面

系列目录 前言 这次我们来做一个有趣的事情,有朋友跟做了很远,找我要自由桌面的代码,这次我们将演示自由桌面的代码。 自由桌面:用户可以随意增删改桌面的布局、...

28710
来自专栏双十二技术哥

深入Weex系列(六)Weex渲染流程分析

在前两篇文章中我们结合源码学习了Module、Component的注册、调用、回调等流程,相信大家一定收获颇多,对Weex的理解也一定愈加深入。

1145
来自专栏developerHaoz 的安卓之旅

知乎 Matisse 源码解析,带你探究高效图片选择库的秘密

可以看到 Matisse 的可拓展性是非常强的,不仅可以自定义我们需要的主题,而且还可以按照需求来过滤出我们想要的文件,除此之外,Matisse 采用了建造者模...

4041
来自专栏葡萄城控件技术团队

七天学会ASP.NET MVC (五)——Layout页面使用和用户角色管理

系列文章 七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC 七天学会ASP.NET MVC (二)——ASP.NET MVC 数据传递 ...

3008

扫码关注云+社区