使用asp.net webform的jQuery Tablesorter对Gridview进行排序答案

【问题标题】：the sorting of Gridview using jQuery Table Sorter of asp.net webfrom使用asp.net webform的jQuery Tablesorter对Gridview进行排序
【发布时间】：2015-08-02 05:02:36
【问题描述】：

我有两页 1.jQueryGridviewSortWithoutMasterpage.aspx

<%--this is without master page--%>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQueryGridviewSortWithoutMasterpage.aspx.cs" Inherits="jQueryGridviewSort" %>

<!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></title>
    <style type="text/css">  
        th  
        {  
            cursor:pointer;  
            background-color:#dadada;  
            color:Black;  
            font-weight:bold;  
            text-align:left;   
        }  
        th.headerSortUp   
        {       
            background-image: url(images/asc.gif);  
            background-position: right center;  
            background-repeat:no-repeat;   
        }  
        th.headerSortDown   
        {       
            background-image: url(images/desc.gif);     
            background-position: right center;  
            background-repeat:no-repeat;   
        }   
        td  
        {  
            border-bottom: solid 1px #dadada;     
        }  
    </style>  
    <%--<script src="scripts/jquery-1.4.3.min.js" type="text/javascript"></script>  
    <script src="scripts/jquery.tablesorter.min.js" type="text/javascript"></script> --%> 
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.tablesorter.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#GridView1").tablesorter();
        });   
    </script>  
</head>
<body>
    <form id="form1" runat="server">
    <div>

    </div>
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" GridLines="Both"
        DataKeyNames="RoleID" DataSourceID="SqlDataSource1">
        <Columns>
            <asp:BoundField DataField="RoleID" HeaderText="RoleID" InsertVisible="False" 
                ReadOnly="True" SortExpression="RoleID" />
            <asp:BoundField DataField="RoleName" HeaderText="RoleName" 
                SortExpression="RoleName" />
            <asp:CheckBoxField DataField="IsActive" HeaderText="IsActive" 
                SortExpression="IsActive" />
            <asp:BoundField DataField="AddedBy" HeaderText="AddedBy" 
                SortExpression="AddedBy" />
            <asp:BoundField DataField="AddedDate" HeaderText="AddedDate" 
                SortExpression="AddedDate" />
            <asp:BoundField DataField="UpdatedBy" HeaderText="UpdatedBy" 
                SortExpression="UpdatedBy" />
            <asp:BoundField DataField="UpdatedDate" HeaderText="UpdatedDate" 
                SortExpression="UpdatedDate" />
        </Columns>
    </asp:GridView>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:WSMSConnectionString %>" 
        SelectCommand="SELECT [RoleID], [RoleName], [IsActive], [AddedBy], [AddedDate], [UpdatedBy], [UpdatedDate] FROM [Role]">
    </asp:SqlDataSource>
    </form>
</body>
</html>

在母版页的另一个页面中完成相同的工作 2.jQueryGridview.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="jQueryGridview.aspx.cs" Inherits="jQueryGridviewSortWithMasterPages" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
 <style type="text/css">
   th
   {
      cursor:pointer;
      background-color:#dadada;
      color:Black;
      font-weight:bold;
      text-align:left; 
   }
   th.headerSortUp 
   {     
      background-image: url(images/asc.gif);
      background-position: right center;
      background-repeat:no-repeat; 
   }
   th.headerSortDown 
   {     
      background-image: url(images/desc.gif);   
      background-position: right center;
      background-repeat:no-repeat; 
   } 
   td
   {
      border-bottom: solid 1px #dadada;    
   }
</style>
 <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.tablesorter.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $.noConflict();
        $(document).ready(function () {
            $("#GridView1").tablesorter();
        });   
    </script> 
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="RoleID" DataSourceID="SqlDataSource1">
        <Columns>
            <asp:BoundField DataField="RoleID" HeaderText="RoleID" InsertVisible="False" 
                ReadOnly="True" SortExpression="RoleID" />
            <asp:BoundField DataField="RoleName" HeaderText="RoleName" 
                SortExpression="RoleName" />
            <asp:CheckBoxField DataField="IsActive" HeaderText="IsActive" 
                SortExpression="IsActive" />
            <asp:BoundField DataField="AddedBy" HeaderText="AddedBy" 
                SortExpression="AddedBy" />
            <asp:BoundField DataField="AddedDate" HeaderText="AddedDate" 
                SortExpression="AddedDate" />
            <asp:BoundField DataField="UpdatedBy" HeaderText="UpdatedBy" 
                SortExpression="UpdatedBy" />
            <asp:BoundField DataField="UpdatedDate" HeaderText="UpdatedDate" 
                SortExpression="UpdatedDate" />
        </Columns>
    </asp:GridView>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:WSMSConnectionString %>" 
        SelectCommand="SELECT [RoleID], [RoleName], [IsActive], [AddedBy], [AddedDate], [UpdatedBy], [UpdatedDate] FROM [Role]">
    </asp:SqlDataSource>
    <br />
</asp:Content>

两者都有代码隐藏文件

 protected void Page_Load(object sender, EventArgs e)
    {
        GridView1.UseAccessibleHeader = true;
        GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;

    }

第一个（没有母版页）正在工作，但第二个没有。如何解决问题？

【问题讨论】：

标签： c# jquery asp.net gridview

【解决方案1】：

我已经通过使用解决了它

ClientIDMode="Static"

在第二个 GridView 中，其余部分相同。那么 html id 将是

GridView1

而且效果很好。

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="RoleID" DataSourceID="SqlDataSource1" ClientIDMode="Static">

【讨论】：