Question

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

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

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

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

我尝试只将第一行的高度设置得更大，并将vertical-align设置为底部。这非常好用。问题是我在头文件上实现了jquery tablesort。当我对表进行排序时，第一行具有巨大的高度，被埋葬，其余行被扰乱，因为它们被那个巨大的行偏移。

我搜索了stackoverflow，我找到了另一个关于同一问题的线程： How Can We Have A SCROLLABLE GridView With Fixed Header?

这里建议为标题创建另一个表。这是非常好的，但这里的问题是我没有固定大小的表。列nr变化，行值变化。所以我在主要的一个上面做了另一个gridview。我设置了ShowHeaderWhenEmpty = true。我在后面的代码中添加了列。现在的问题是列的宽度与原始gridview的宽度不同。

我尝试在OnRowDataBound中设置宽度。我试过jquery。什么都行不通。唯一有效的方法是添加原始gridview的数据并隐藏行。但我可以隐藏它们吗？如果我使用display：none，标题宽度会回来，就像它甚至看不到数据一样。我设法用不透明度隐藏行：0.0

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

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

为什么呢？我最好的猜测是，某些单元格已启用换行，当最长的字符串换行时，它不会包含与可能影响列宽度的其他行相同的内容。

现在我不知道接下来要去哪里看看。因此，如果有人知道我可能会尝试什么，或者为什么我尝试过的某些方法无法工作，请告诉我。

更新：

所以我在思考，因为我已经使用了jquery tablesorter插件，我可以尝试使用widget-scroller来修复标题。我找到了这个页面：https://mottie.github.io/tablesorter/docs/example-widget-scroller.html，但我还没设法启用滚动条。当前tablesorter版本：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>

1 个答案: