1

ヘッダーを固定し、各列を並べ替える必要がある GridView があります。ASP.NET と C# を使用しています。

これを行うコードを見つけましたが、列をまったく並べ替えることができません。このコードを実行しましたが、aspx ファイルで Sort 関数を呼び出しています。列見出しの並べ替えボタンをクリックすると、グリッドの表示が (昇順/降順) 並べ替え順序に変わりません。グリッドビューとデータのバインディングに関係があると考えています。

これが元のコードです。

私のバージョンは次のとおりです。 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>

これはグリッドビューの部分です...

<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>

データテーブルを作成し、グリッドビューにバインドします。

//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();
4

2 に答える 2

0

コントロールに新しい静的クライアント ID を既に使用している可能性があります (Visual Studio 2012 ではデフォルトのようです)。だからあなたは試すことができます

$(document).ready(function() {
    $("#GridView1").tablesorter();
    SetDefaultSortOrder();
});
于 2013-05-14T13:41:46.727 に答える