具有固定标头的ASP.NET Gridview表排序器 [英] ASP.NET Gridview tablesorter with fixed header
问题描述
我迫切需要一个创新的解决方案.我有一个asp.net 4.5网络应用程序，在其中生成了约40至50列的gridview，行数在1到几千之间.
I'm in desperate need of a creative solution. I have an asp.net 4.5 web app, where I generate a gridview with about 40-50 columns and rows vary between 1 and a few thousands.
由于它太大了，我将gridview放在了div中，设置了高度并设置了溢流y:scroll.
Since it's so big, I put the gridview in a div, set a height and the overflow-y:scroll.
我想要的是在滚动时能够看到标题.
What I want is to be able to see the header when I scroll.
我试图在线查找答案.第一个解决方案是为标头提供一个CSS类并设置position:absolute，从而弹出标头.这种方法的问题是，当标题弹出时，它覆盖了第一行，除非我将行的高度设置得很大，否则我看不到第一行.
I tried to find answers online. First solution was to give the header a css class and set the position:absolute, thus poping out the header. The problem with this approach was that when the header pops out, it covers the first row and unless I set the height of row huge, I can't see the first row.
我尝试仅增大第一行的高度并将垂直对齐设置为底部.这个工作非常好.问题是我已经在标题上实现了jquery tablesort.当我对表格进行排序时，具有很大高度的第一行会被掩埋，而其余的行则争先恐后，因为它们被该行抵消了.
I tried making only the first row's height bigger and setting the vertical-align to bottom. This worked very nice. The problem is that I have implemented jquery tablesort on the header. When I sorted the table, the first row that has a huge height, gets burried and the rest of the rows scramble because they are being offset by that huge row.
我在stackoverflow上进行了搜索，发现了另一个关于同一问题的线程:我们如何拥有带有固定标题的可滚动GridView?
I searched on stackoverflow and I found another thread about the same problem: How Can We Have A SCROLLABLE GridView With Fixed Header?
此处建议为标题创建另一个表.这很好，但是这里的问题是我没有固定大小的表.列nr有所不同，行值也有所不同.所以我在主要视图上方做了另一个gridview.我设置ShowHeaderWhenEmpty = true.我在后面的代码中添加了列.现在的问题是，列的宽度与原始gridview的宽度不同.
Here it suggested creating another table for the header. This is very nice, but the problem here is that I don't have a fixed size table. The columns nr vary and the rows value vary. So I made another gridview above the main one. I set the ShowHeaderWhenEmpty=true. I added the columns in the code behind. The problem now is that the columns are not the same width as the original gridview.
我试图在OnRowDataBound中设置宽度.我尝试使用jQuery.什么都行不通.唯一有效的方法是，如果我添加原始gridview的数据并隐藏行.但是我可以把它们藏起来吗?如果我使用display:none，则标题宽度会返回，就像它甚至看不到数据一样.我设法用不透明度隐藏了行:0.0
I tried to set the width in OnRowDataBound. I tried with jquery. Nothing works. The only thing that works is if I add the data of the original gridview and hide the rows. But can I hide them ? If I use display:none, the header width goes back like it doesn't even see the data. I managed to hide the rows with opacity:0.0
这里的问题是页面加载时间很长，速度非常慢，甚至无法正确显示.
The problem here is that the page takes a long time to load, it's very slow and it doesn't even render properly.
因此，我没有添加所有数据，而是尝试添加单个行.在这一行中，对于每个单元格，我在该列上添加了最长的字符串.这种方法效果最好，但是现在的问题是，第二个gridview中的某些列与原始gridview不对齐.
So instead of adding all the data, I tried adding a single row. In this row, for each cell, I added the longest string on that column. This method worked the best, but the problem now is that some of the columns in the second gridview are not aligned with the original gridview.
为什么?我最好的猜测是，某些单元格启用了换行，并且当最长的字符串换行时，它与其他行的换行方式不同，这可能会影响列的宽度.
Why? My best guess is that some cells have wrap enabled and when that longest string wraps, it doesn't wrap the same as other rows which might affect the column's width.
现在我不知道下一步要去哪里.因此，如果有人对我可以尝试的方法有什么想法，或者也许为什么我尝试的某些方法不起作用，请告诉我.
Now I don't have a clue where to look next. So if anyone has an idea of what I might try or maybe why some of the methods I tried haven't work please let me know.
更新:
所以我在想，因为我已经在使用jquery tablesorter插件，所以我可以尝试使用widget-scroller修复标头.我找到了此页面: https://mottie.github.io/tablesorter/docs/example-widget-scroller.html ，但是我还没有启用滚动条.当前的tablesorter版本:TableSorter(FORK)v2.28.15
So I was thinking, since I'm already using the jquery tablesorter plugin, I could try to use the widget-scroller to have the header fixed. I found this page: https://mottie.github.io/tablesorter/docs/example-widget-scroller.html, but I haven't managed to enable the scroller. Current tablesorter version: 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一样附加它们?
What is wrong with this picture ? Why isn't the scroller active ? I'm thinking because griview doesn't have colgroups ? Do I need to append them just like I'm doing with the thead?
很抱歉，帖子很长.
推荐答案
我的解决方案是使用ScrollableTablePlugin插件:
My solution was using ScrollableTablePlugin addon:
<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:
GridView1_resize is quite a normal 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>
这篇关于具有固定标头的ASP.NET Gridview表排序器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
