0

JavaScriptを使用してグリッドビューに行を追加する方法はありますか？現在、GridViewのonclickメソッドをsortTrGrid（gridviewname）に設定しており、sortTrGridメソッドは次のように構成されています。テーブルの行を適切な順序で設定できますが、Webページでは何も変更されません。

    function sortTrGrid(sender) {
        var table = document.getElementById(sender.id);
        var rows = new Array(table.rows);

        for (var i = 0; i < table.rows; i++) {
            rows[i] = table.rows[i];
        }

        for (var i = table.rows; i > 0; i--) {
            table.deleteRow(document.getElementById(i));
            table.rows[i] = rows[i];
        }

    }//end GridSort
4

1 に答える 1

1

ページにデータ ソースからのすべての行が含まれており (ページングなし)、クライアントで GridView 行を並べ替えて (サーバーに影響を与えずに) パフォーマンスを向上させたい場合は、次の操作を実行できます。

(このコードでは、GridView ヘッダーをクリックすると、数値とテキストの並べ替えと、昇順および降順モードでの並べ替えが可能になります)

完全な動作例を確認したい場合は、GitHub サイトにアップロードしました

スクリーンショット

順不同

ここに画像の説明を入力

最初のクリック - ASC 注文

ここに画像の説明を入力

2 回目のクリック - DESC オーダー

ここに画像の説明を入力

GridView のバインド

<asp:LinqDataSource runat="server" ID="lds" 
    ContextTypeName="WebForms_1.DataAccess.PubsDataContext"
    TableName="jobs"
    EntityTypeName="WebForms_1.DataAccess.jobs">
</asp:LinqDataSource>
<asp:GridView runat="server" ID="gv" DataSourceID="lds" DataKeyNames="job_id">

</asp:GridView>

jQuery コード

<script type="text/javascript">
    $(function () {
        var $gv = $("table[id$=gv]");
        var $headers = $("th", $gv);
        var $rows = $("> tbody > tr:not(:has(table, th))", $gv);

        $rows.addClass("grid-rows");
        $headers.addClass("grid-headers");

        $headers.toggle(function (e) {
            sortGrid($(this), 0);
        }, function (e) {
            sortGrid($(this), 1);
        });

        function sortGrid(row, direction) {
            var colIndex = $(row).parent().children().index($(row));
            var $rowsArray = $.makeArray($rows);
            var $sortedArray = $rowsArray.sort(function (o, n) {
                var $currentCell = $("td:nth-child(" + (colIndex + 1) + ")", $(o));
                var $nextCell = $("td:nth-child(" + (colIndex + 1) + ")", $(n));
                var currentValue = parseFloat($currentCell.text()) ? parseFloat($currentCell.text()) : $currentCell.text();
                var nextValue = parseFloat($nextCell.text()) ? parseFloat($nextCell.text()) : $nextCell.text();

                if (direction == 0) {
                    return currentValue < nextValue ? -1 : 1;
                }
                else {
                    return currentValue > nextValue ? -1 : 1;
                }
            });

            $("> tbody > tr:not(:has(table, th))", $gv).remove();
            $("tbody", $gv).append($sortedArray);
        }
    });
</script>
于 2012-09-14T02:10:11.290 に答える