冻结表头，滚动网格视图

Question

如何冻结 Asp.net gridview 的表头？ 我尝试用不同的方法实现，但是没有成功。

我使用的是 ASP 2.0 和 VS 2010。

有人可以帮助我吗？

- Indra

---

以下链接展示了一种实现此功能的方法Freeze GridView Columns and Headers in ASP.Net CSS。我添加了另外两个链接，你可以尝试解决这个问题。对于我来说，我提出的第一个方案是有效的，所以很可能是你遗漏了某些东西。然而，其他两个解决方案也是有效的，所以你可以尝试它们。Gridview with Fixed Header和[Freeze ASP.NET GridView Headers by Creating Client-Side Extenders ](http://weblogs.asp.net/d - Aristotelis Kostopoulos

谢谢Aristotelis。但我已经尝试过这个方法，对我没有用。有没有办法通过编程来冻结表头？ - Indra

@Indra：我在我的帖子中添加了2个链接。你也可以尝试它们，但正如我上面所说的，第一个链接对我有效，所以可能有些东西你错过了。其他两个链接提供的解决方案也是可行的。我希望你能找到问题的根源。 - Aristotelis Kostopoulos

@AristotelisKostopoulos 我在冻结表头时遇到了一些问题。 请查看这个问题：https://dev59.com/QILba4cB1Zd3GeqPcEJl - IT researcher

我尝试了类似的方法...http://stackoverflow.com/questions/28351955/how-to-match-the-column-width-from-a-table-and-a-asp-net-generated-gridview-tabl 但是宽度不匹配。 - SearchForKnowledge

Answer 1

如果您熟悉JQuery，可以尝试Datatables JQuery插件。

https://datatables.net/extensions/responsive/examples/column-control/fixedHeader.html

绑定GridView数据后[c#]

gridviewid.UseAccessibleHeader = true;
gridviewid.HeaderRow.TableSection = TableRowSection.TableHeader;

对于jQuery

<script>
 function pageLoad(sender, args) {
            //Your jquery code 
            $(document).ready(function () { 
                tableGrid();
            });

            function tableGrid() { 
                $("#<%=gridviewID.ClientID%>").dataTable().fnDestroy(); 
                $("#<%=gridviewID.ClientID%>").dataTable({
                    "sPaginationType": "full_numbers",
                    "columnDefs": [{
                        "orderable": false
                    }],
                    "aaSorting": [],
                    info: false,
                    paging: true,
                    "oLanguage": { "sSearch": "Search: " },
                    mark: true,
                    dom: 'Blfrtip',
                    buttons: [], fixedHeader: true
                });
            }
        }
    </script>

注意：每当重新绑定数据时，从C#代码调用JavaScript函数。

ScriptManager.RegisterStartupScript(this, this.GetType(), "callheader", "tableGrid();", true);

- Sund'er

Answer 2

我使用jQuery floatThead

http://mkoryak.github.io/floatThead/#intro

我不得不使用一些jQuery将第一行转换为表头才能使其正常工作。

以下是示例：

$(document).ready(function () {
    var $theadCols = $("#ContentPlaceHolder1_grdCashflow  tr:first-child"),
        $table = $("#ContentPlaceHolder1_grdCashflow");

    // create thead and append <th> columns
    $table.prepend("<thead/>");
    $table.find("thead").append($theadCols);

    // init stickyHeader
    $table.floatThead();

    //$table = $("#ContentPlaceHolder1_grdCashflow");
    $table.dataTable(
    {
        "paging": false,
        "ordering": false,
        "dom":'<"top"fi>rt<"bottom"><"clear">'
    }
    );
});

- user1643799