具有固定标头的ASP.NET Gridview表排序器

我迫切需要一个创造性的解决方案。 我有一个asp.NET4.5Web应用程序，我在其中生成一个gridview，其中包含大约40-50列，行数在1到几千之间

因为它太大了，我把gridview放在一个div中，设置了一个高度和overflow-y:scroll

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

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

我试着只把第一排的高度调大一点，把垂直线调到底。这很有效。 问题是我已经在头上实现了jquery tablesort。 当我对表格进行排序时，第一行有一个巨大的高度，它被掩埋了，其余的行被那巨大的一行所抵消，所以它们会乱放

我搜索了stackoverflow，发现了另一个关于相同问题的线程：

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

我试图在OnRowDataBound中设置宽度。我尝试使用jquery。什么都不管用。 唯一有效的方法是添加原始gridview的数据并隐藏行。但我能把它们藏起来吗？如果我使用display:none，则标题宽度会返回，好像它甚至看不到数据一样。我设法隐藏了不透明度为0.0的行

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

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

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

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

更新：

所以我在想，既然我已经在使用jQueryTableSorter插件，我可以尝试使用小部件滚动器来修复标题。 我找到了此页面：，但尚未启用滚动条。 当前表排序器版本：表排序器（FORK）v2.28.15

我的代码是：

HTML

JS

jQuery.fn.insertTHead=函数（选择）
{
返回此。每个（函数（）
{
if（jQuery（'thead'，this）.length==0）
jQuery（“”.prependTo（this）.append（jQuery（selection，this））
})
}
$（文档）.ready（函数（）
{
$（“表格”）
.insertTHead（“tr:first”）//调用jquery函数，该函数将在回发后插入thead。
表排序器({
小部件：['scroller']，
widgetOptions：
{
卷轴高度：300，
滚动条_upAfterSort：真，
scroller_jumpToHeader:真，
滚动条宽度：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没有Colgroup？我需要像处理thead一样附加它们吗

---

很抱歉发了这么长的帖子。

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

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

---

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

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

---

如果我理解正确，您有一些解决方案，但这些解决方案并不像您预期的那样有效。您能否选择一个您认为更有可能解决您的问题以及您正在使用的代码中的问题的解决方案？确实，我有多种解决方案，但它们都存在一些问题，我无法在不影响性能的情况下解决这些问题。有一件事我没有真正尝试过，那就是使用jQueryTableSorter中的滚动条。因为我已经在用这个了，它应该可以不用任何额外的东西。如果我理解正确的话，你有一些解决方案，但这些解决方案并没有像你预期的那样有效。您能否选择一个您认为更有可能解决您的问题以及您正在使用的代码中的问题的解决方案？确实，我有多种解决方案，但它们都存在一些问题，我无法在不影响性能的情况下解决这些问题。有一件事我没有真正尝试过，那就是使用jQueryTableSorter中的滚动条。因为我已经在用这个了，它应该可以不用任何额外的东西。我会继续讨论这个问题。有趣的建议，但这对jquery tablesorter插件有用吗？我用它对gridview进行排序，每个标题单元格就像一个按钮。如果我使用你建议的这个插件，tablesorter的按钮还能用吗？另外..我在您的示例中看到您添加了大约12个boundfields..这是一个固定大小的gridview。我不知道我会有多少专栏。列是自动生成的。这是一个问题吗？很有趣，但这对jquery表排序器有用吗

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

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