使用 JavaScript 向 gridview 添加行答案

【问题标题】：Add rows to a gridview using JavaScript使用 JavaScript 向 gridview 添加行
【发布时间】：2012-09-13 22:29:08
【问题描述】：

有没有办法使用 JavaScript 向 gridview 添加行？现在，我将 GridView 的 onclick 方法设置为 sortTrGrid(gridviewname)，sortTrGrid 方法的结构如下。我可以按正确的顺序获取表格中的行，但是网页上没有任何变化。

    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

【问题讨论】：

为什么不在 DataSource 类中的服务器上进行排序，或者将 GridView 绑定到什么？
我有 4 个网格视图，其中两个是可折叠的。当回发发生并展开时，它们会自动折叠。

标签： javascript asp.net sorting gridview

【解决方案1】：

假设您的页面包含数据源中的所有行（无分页），并且您希望在客户端对 GridView 行进行排序以提高性能（不影响服务器），您可以执行以下操作：

（此代码允许在单击 GridView 标题时对数字和文本进行排序和升序和降序排序）

如果您想查看完整的工作示例，I just uploaded to my GitHub site

截图

无序

首次点击 - ASC 订单

第二次点击 - 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>

【讨论】：