带有固定标题的 ASP.NET Gridview 表格排序器

Question

我迫切需要一个创造性的解决方案。 我有一个 asp.net 4.5 网络应用程序，我在其中生成了一个大约 40-50 列和行在 1 到几千之间变化的 gridview。

由于它这么大，我把gridview放在一个div中，设置一个高度和overflow-y:scroll。

我想要的是在滚动时能够看到标题。

我试图在网上找到答案。 第一个解决方案是给标题一个css类并设置位置：绝对，从而弹出标题。这种方法的问题是，当标题弹出时，它会覆盖第一行，除非我将行的高度设置得很大，否则我看不到第一行。

我尝试只增加第一行的高度并将垂直对齐设置为底部。这非常好。 问题是我已经在标题上实现了 jquery tablesort。 当我对表格进行排序时，高度很大的第一行被埋没了，其余的行因为被那个巨大的行抵消了而变得混乱。

我在stackoverflow上进行了搜索，发现另一个关于相同问题的线程： How Can We Have A SCROLLABLE GridView With Fixed Header?

这里建议为表头创建另一个表。这很好，但这里的问题是我没有固定大小的桌子。列 nr 变化，行值变化。所以我在主要的网格视图上方制作了另一个网格视图。 我设置了 ShowHeaderWhenEmpty=true。我在后面的代码中添加了列。 现在的问题是列的宽度与原始的gridview不同。

我尝试在 OnRowDataBound 中设置宽度。我试过用jquery。没有任何效果。 唯一有效的是，如果我添加原始 gridview 的数据并隐藏行。但我可以隐藏它们吗？如果我使用 display:none，标题宽度会返回，就像它甚至看不到数据一样。我设法隐藏了 opacity:0.0

的行

这里的问题是页面加载时间很长，速度很慢，甚至无法正常呈现。

所以我没有添加所有数据，而是尝试添加一行。在这一行中，对于每个单元格，我在该列上添加了最长的字符串。这种方法效果最好，但现在的问题是第二个gridview中的某些列与原始gridview没有对齐。

为什么？我最好的猜测是某些单元格启用了换行，当最长的字符串换行时，它不会像其他行一样换行，这可能会影响列的宽度。

现在我不知道下一步该往哪里看。因此，如果有人知道我可能会尝试什么，或者为什么我尝试的某些方法不起作用，请告诉我。

更新：

所以我在想，既然我已经在使用 jquery tablesorter 插件，我可以尝试使用 widget-scroller 来修复标题。 我找到了这个页面：https://mottie.github.io/tablesorter/docs/example-widget-scroller.html，但我还没有启用滚动条。 当前表格排序器版本：TableSorter (FORK) v2.28.15

我的代码是这样的：

HTML

<div id="wrapper">
                    <asp:GridView ID="OnlineSearchGridView" runat="server" CssClass="tablesorter hover-highlight tablesorter-scroller tablesorter-scroller-table" Visible="false" EnableSortingAndPagingCallbacks="false" AutoGenerateColumns="true" OnRowDataBound="OnlineSearchGridView_RowDataBound" Height="50px" CellPadding="5" Font-Names="Arial" Font-Size="9pt">
                        <EditRowStyle Font-Names="Arial" Font-Size="9pt" />
                        <HeaderStyle BackColor="#666666" BorderColor="Black" Font-Names="Arial" Font-Size="9pt" ForeColor="White"/>
                        <RowStyle BorderStyle="Solid" Font-Names="Arial" Font-Size="9pt" BorderColor="Black" BorderWidth="1px" HorizontalAlign="Center"/>
                    </asp:GridView>
                </div>

JS

jQuery.fn.insertTHead = function (selection)
                {
                    return this.each(function ()
                    {
                        if (jQuery('thead', this).length == 0)
                            jQuery("<thead></thead>").prependTo(this).append(jQuery(selection, this))
                    })
                }

$(document).ready(function ()
                {
                    $("table")
                        .insertTHead("tr:first")//Calling the jquery function that will insert the thead after postback.
                        .tablesorter({
                            widgets: ['scroller'],
                            widgetOptions:
                            {
                                scroller_height: 300,
                                scroller_upAfterSort: true,
                                scroller_jumpToHeader: true,
                                scroller_barWidth: null
                            }
                        })
                });

外部文件

<link rel="stylesheet" type="text/css" href="css/tablesort_style.css"/>
<script type="text/javascript" src="Scripts/jquery-latest.js"></script> 
<script type="text/javascript" src="Scripts/jquery.tablesorter.js"></script>
<script type="text/javascript" src="Scripts/jquery.tablesorter.widgets.js"></script>

这张图有什么问题？为什么滚动条不活动？ 我在想是因为 griview 没有 colgroups 吗？我是否需要像使用 thead 一样附加它们？

抱歉，帖子太长了。

Answer 1

我的解决方案是使用 ScrollableTablePlugin 插件：

<script src="js/ScrollableTablePlugin_1.0_min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('#<%=GridView1_resize.ClientID%>').Scrollable({
        ScrollHeight: 600
    });
});

GridView1_resize 是一个很普通的 GridView：

<asp:GridView ID="GridView1_resize" runat="server" AutoGenerateColumns="False"
    CellPadding="0" DataSourceID="ObjectDataSource1" EnableTheming="false"
    EmptyDataText="Nessun rapportino" CssClass="presenzeCol">
    <Columns>
        <asp:BoundField DataField="Nome"
            HeaderText="Cognome e Nome" SortExpression="Nome">
        </asp:BoundField>
        <asp:BoundField DataField="Matricola" HeaderText="Matr."
            SortExpression="Matricola">
        </asp:BoundField>
        <asp:BoundField DataField="Email">
        </asp:BoundField>
        <asp:BoundField DataField="G1" HeaderText="1" DataFormatString="{0:f}">
        </asp:BoundField>
        <asp:BoundField DataField="G2" HeaderText="2" DataFormatString="{0:f}">
        </asp:BoundField>
        <asp:BoundField DataField="G3" HeaderText="3" DataFormatString="{0:f}">
        </asp:BoundField>
        <asp:BoundField DataField="G4" HeaderText=" 4" DataFormatString="{0:f}">
        </asp:BoundField>
        <asp:BoundField DataField="G5" HeaderText="5" DataFormatString="{0:f}">
        </asp:BoundField>
        <asp:BoundField DataField="G6" HeaderText="6" DataFormatString="{0:f}">
        </asp:BoundField>
        <asp:BoundField DataField="G7" HeaderText="7" DataFormatString="{0:f}">
        </asp:BoundField>
        <asp:BoundField DataField="G8" HeaderText="8" DataFormatString="{0:f}">
        </asp:BoundField>
        <asp:BoundField DataField="G9" HeaderText="9" DataFormatString="{0:f}">
        </asp:BoundField>
        <asp:BoundField DataField="G10" HeaderText="10" DataFormatString="{0:f}">
        </asp:BoundField>
        <asp:BoundField DataField="G11" HeaderText="11" DataFormatString="{0:f}">
        </asp:BoundField>
        <asp:BoundField DataField="G12" HeaderText="12" DataFormatString="{0:f}">
        </asp:BoundField>

    </Columns>
</asp:GridView>