固定的标题分类列

我有一个GridView，我需要固定标题和每列可排序。我正在使用ASP.NET和C＃。固定的标题分类列

我发现代码来做到这一点，但我无法得到列进行排序。我已经通过这段代码，它调用aspx文件中的Sort函数。当我点击列标题上的排序按钮时，网格中的显示不会更改（升序/降序）排序顺序。我想这与GridView与我的数据的绑定有关。

Here是原始码。

我的版本如下： Default.aspx是：该标题从原始代码复制而来。

<head runat="server"> 
<title>Create XML Files</title> 
<script src="/scripts/jquery-1.3.2.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.ClientID%>").tablesorter(); 
     SetDefaultSortOrder(); 
    }); 

    function Sort(cell, sortOrder) { 
     var sorting = [[cell.cellIndex, sortOrder]]; 
     $("#<%=GridView1.ClientID%>").trigger("sorton", [sorting]); 
     if (sortOrder == 0) { 
      sortOrder = 1; 
      cell.className = "sortDesc"; 
     } 
     else { 
      sortOrder = 0; 
      cell.className = "sortAsc"; 
     } 
     cell.setAttribute("onclick", "Sort(this, " + sortOrder + ")"); 
     cell.onclick = function() { Sort(this, sortOrder); }; 
     document.getElementById("container").scrollTop = 0; 
    } 


    function SetDefaultSortOrder() { 
     var gvHeader = document.getElementById("dummyHeader"); 
     var headers = gvHeader.getElementsByTagName("TH"); 
     for (var i = 0; i < headers.length; i++) { 
      headers[i].setAttribute("onclick", "Sort(this, 1)"); 
      headers[i].onclick = function() { Sort(this, 1); }; 
      headers[i].className = "sortDesc"; 
     } 
    } 
</script> 

<style type = "text/css"> 
.sortAsc 
{ 
    background-image: url(images/asc.gif); 
    background-repeat: no-repeat; 
    background-position: center right; 
    cursor: pointer; 
    width:200px; 
} 
.sortDesc 
{ 
    background-image: url(images/desc.gif); 
    background-repeat: no-repeat; 
    background-position: center right; 
    cursor: pointer; 
    width:200px; 
} 
.grid THEAD 
{ 
    background-color:Purple; 
    color:White; 
} 
    .style1 
    { 
     width: 113px; 
    } 
    .style2 
    { 
     width: 152px; 
    } 
</style>

这是GridView的部分...

<div style =" background-color:Purple; height:30px;width:417px; margin:0;padding:0"> 
<table cellspacing="0" cellpadding = "0" rules="all" border="1" id="dummyHeader" 
style="font-family:Arial;font-size:10pt;width:417px;color:white; 
border-collapse:collapse;height:100%;"> 
<tr> 
    <th scope="col" style ="width:48px;text-align:center">Number</th> 
    <th scope="col" style ="width:50px;text-align:center">District</th> 
</tr> 
</table> 
</div> 

<div id = "container" style ="height:186px; width:435px; overflow:auto;"> 
<asp:GridView ID="GridView1" runat="server" ShowHeader="False" AllowSorting="True" 
    AutoGenerateColumns="False" CssClass = "grid" CellPadding="3" ForeColor="White" 
    GridLines="None" Height="69px" Width="417px" BackColor="White" 
     BorderColor="White" BorderStyle="Ridge" BorderWidth="2px" CellSpacing="1" 
     style="margin-bottom: 0px"> 

    <RowStyle BackColor="#DEDFDE" ForeColor="Black" /> 
    <Columns> 
     <asp:BoundField DataField="Number" HeaderText = "Number" > 
      <ItemStyle Width="50px" /> 
     </asp:BoundField> 
     <asp:BoundField DataField="District" HeaderText = "District" > 
      <ItemStyle Width="50px" /> 
     </asp:BoundField> 
    </Columns> 
    <FooterStyle BackColor="#C6C3C6" ForeColor="Black" /> 
    <PagerStyle BackColor="#C6C3C6" ForeColor="Black" HorizontalAlign="Right" /> 
    <SelectedRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White" /> 
    <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#E7E7FF" /> 
</asp:GridView> 
</div>

我创建了一个数据表，并将其绑定到GridView：

//Create the data table 
stationTable = new DataTable(); 
stationTable.Columns.Add(new DataColumn("Number", typeof(int))); 
stationTable.Columns.Add(new DataColumn("District", typeof(string))); 

var query = from stations in xml.Elements("Config").Elements("distributedHost").Elements("station") 
         select new 
         { 
          number = stations.Element("number").Value, 
          district = stations.Element("district").Value 
         } ; 

      foreach (var row in query) 
      { 
       DataRow dataRow = stationTable.NewRow(); 

       dataRow[stationTable.Columns["Number"]] = row.number; 
       dataRow[stationTable.Columns["District"]] = row.district; 

       stationTable.Rows.Add(dataRow); 
      } 
      GridView1.DataSource = stationTable; 
      GridView1.DataBind();

来源

2013-05-14 Gloria Santin

这可能是因为你已经使用新的静态客户端ID的控件（似乎在Visual Studio 2012中默认）。所以，你可以尝试

$(document).ready(function() { 
    $("#GridView1").tablesorter(); 
    SetDefaultSortOrder(); 
});

来源

2013-05-14 13:41:46 AGuyCalledGerald

感谢您的快速回复。但它没有改变结果。当我点击列标题上的排序按钮时，它会更新图像，但排序数据不会更改。 – 2013-05-14 13:51:51

我以前没有提过。但我正在使用Visual Studio 2008. – 2013-05-14 14:06:02

我想了解JavaScript的工作原理...在.trigger事件中，使用了第一个参数'sorton'。我做了一个搜索，javascript没有'sorton'作为一个事件。这可能是问题吗？ – 2013-05-14 14:44:21

，因为它需要整个数据表，这是显示不只是对数据进行排序我不能使用此选项。我发现了一个很棒的GridView，可以让我做所有事情。它可以在这里找到： http://ideasparks.codeplex.com/

来源

2013-05-16 16:19:43

固定的标题分类列

回答

相关问题