65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 Jquery 和 ASP.NET 对 Gridview 进行排序

Sailung Limbu
starIconstarIcon
emptyStarIcon
starIcon
emptyStarIconemptyStarIcon

2.67/5 (3投票s)

2008 年 10 月 20 日

CPOL

1分钟阅读

viewsIcon

88894

downloadIcon

2106

本文演示了灵活的客户端表排序

引言

这是我的第一篇文章，我为我的英语水平道歉。在这个例子中，我想展示如何在 ASP.NET 中使用 Jquery 对 gridview 进行排序，这是一种灵活的客户端表格排序。我们知道 Jquery 是一种新型的 Javascript 库。你可以在这个网站上找到 Jquery 的详细信息 https://jqueryjs.cn/，那里有很多带有文档的示例，并且允许免费下载最新版本。

背景

在这个例子中，我使用了 Christian Bach 编写的 table sorter 插件，可以在 http://tablesorter.com/docs/ 找到。这是一个非常酷的插件，用户可以根据自己的意愿下载和自定义。

我在 Visual Studio 2005 中测试了这个例子。其他一些需求是下载 Jquery 官方网站的最新版本和 table sorter 插件，如我上面提到的网站。

我们开始吧，

Using the Code

首先，我们需要一些图像文件，这些文件需要用于点击 Gridview 标题。然后，我们需要添加一个 CSS 文件来使位置和颜色正确。

在这个例子中，我使用 ajax json serialize 将数据加载到 Gridview 中

<%@ Page Language="VB" AutoEventWireup="false"
    CodeFile="TableSorterBlue.aspx.vb" Inherits="TableSorterBlue" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Table Sorter Blue</title>
<link href="App_Themes/bluestyle.css" rel="stylesheet" type="text/css" media="print, projection, screen"/>
<script language="javascript" type="text/javascript" src="script/jquery-1.2.6.min.js"></script>
<script language="javascript" type="text/javascript" src="script/jquery.tablesorter.js"></script>
<script language="javascript" type="text/javascript" src="script/Sorter.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="btnInfo">
<button id="btnBlueLoad" type="button">Load Data</button>
</div>
<div id="result">
</div>
</form>
<script type="text/javascript">
$(function(){
    $("#btnBlueLoad").click(function(){
        LoadRecord();
    });
});
function LoadRecord(){
    $.ajax({
type: "POST",
url: "TableSorterBlue.aspx/GetOrderDetailTable",
contentType: "application/json; charset=utf-8",
data: "{}",
dataType: "json",
success: function(msg){
        $("#result").html(msg);
        formatSorterTable();
         }
    });
}
</script>
</body>
</html>

在 TableSorterBlue.aspx 页面的后台代码中

Partial Class TableSorterBlue
Inherits System.Web.UI.Page
<WebMethod(enablesession:=True)> _
Public Shared Function GetOrderDetailTable() As String
    Dim page As New Page()
    Dim userControl As UserControl = DirectCast(page.LoadControl(
        "~/controls/GridViewControl.ascx"), UserControl)
    userControl.EnableViewState = False
    Dim form As New HtmlForm()
    form.Controls.Add(userControl)
    page.Controls.Add(form)
    Dim textWriter As New StringWriter()
    HttpContext.Current.Server.Execute(page, textWriter, False)
    Return Clean(textWriter.ToString())
End Function
Private Shared Function Clean(ByVal html As String) As String
    Return Regex.Replace(html, "<[/]?(form)[^>]*?>", "", RegexOptions.IgnoreCase)
End Function
End Class

在用户控件中，我创建了一个 Gridview，但请确保你将可访问属性设置为 true，就像我在代码中所做的那样

Partial Class controls_GridViewControl
Inherits System.Web.UI.UserControl
Protected Sub Page_Load(ByVal sender As Object,
    ByVal e As System.EventArgs) Handles Me.Load
    Me.MakeAccessible(Me.gvTSOrderDetail)
End Sub
Private Sub MakeAccessible(ByVal grd As GridView)
    If grd IsNot Nothing AndAlso grd.Rows.Count > 0 Then
        grd.UseAccessibleHeader = True
        grd.HeaderRow.TableSection = TableRowSection.TableHeader
    End If
End Sub
End Class

TableRowSection.TableHeader 可以帮助创建 <thead> 和 <tbody>，这些与 table sorter 插件同步。

现在，你可以点击向上和向下箭头，它将开始对行进行排序。

© . All rights reserved.