固定的標題分類列

我有一個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

固定的標題分類列

回答

相關問題