Question

我有一个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();

Answer 1

可能您已经将新的静态客户端ID用于控件（似乎是visual studio 2012中的默认值）。所以你可以试试

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

Answer 2

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

修复了标题排序列

2 个答案: