修复了带有排序功能的标题网格视图
Posted
技术标签:
【中文标题】修复了带有排序功能的标题网格视图【英文标题】：Fixed header gridview with sorting functionality 【发布时间】：2012-02-08 00:53:37 【问题描述】：我一直在尝试实现一个gridview，它在滚动时具有固定的标题，但也允许在单击标题列时进行排序。搜索了一段时间后，我在网上找到了一个很好的解决方案，可以在我的网站上完美运行。如果您有同样的问题，请在此处查看 - http://www.aspsnippets.com/Articles/Scrollable-GridView-with-Fixed-Headers-and-Client-Side-Sorting-using-jQuery-in-ASP.Net.aspx
忽略页面上的示例，当我尝试对其进行排序时它不起作用，但是当我将它放在我自己的页面上时它是有效的。
这是我的问题：我希望能够同时按多列排序，而网站上的代码只允许对单列进行排序。有人对如何添加第二级排序有建议吗？
这是我的代码：
<script type = "text/javascript">
$(document).ready(function ()
$("#<%=ChangedUPCs2.ClientID%>").tablesorter();
SetDefaultSortOrder();
);
function Sort(cell, sortOrder)
var sorting = [[cell.cellIndex, sortOrder]];
$("#<%=ChangedUPCs2.ClientID%>").trigger("sorton", [sorting]);
if (sortOrder == 0)
sortOrder = 1;
cell.className = "sortDesc";
else
sortOrder = 0;
cell.className = "sortAsc";
cell.setAttribute("onclick", "Sort(this, " + sortOrder + ")");
cell.onclick = function () Sort(this, sortOrder); ;
document.getElementById("container").scrollTop = 0;
function SetDefaultSortOrder()
var gvHeader = document.getElementById("dummyHeader");
var headers = gvHeader.getElementsByTagName("TH");
for (var i = 0; i < headers.length; i++)
headers[i].setAttribute("onclick", "Sort(this, 1)");
headers[i].onclick = function () Sort(this, 1); ;
headers[i].className = "sortDesc";
<table id="dummyHeader" cellspacing="0" rules="all" border="1" style="width: 800px; border-collapse:collapse;" class = "grid">
<thead>
<tr>
<th scope="col" style="width: 30px;">Tier</th>
<th scope="col" style="width: 75px;">UPC</th>
<th scope="col" style="width: 50px;">Line Code</th>
<th scope="col" style="width: 100px;">Brand</th>
<th scope="col" style="width: 205px;">Product</th>
<th scope="col" style="width: 70px;">Old Qty / Old Price</th>
<th scope="col" style="width: 70px;">New Qty / New Price</th>
<th scope="col" style="width: 50px;">Cost</th>
<th scope="col" style="width: 50px;">Old Margin</th>
<th scope="col" style="width: 50px;">New Margin</th>
<th scope="col" style="width: 50px;">Tag Type</th>
<th scope="col" style="width: 50px;">Effective Date</th>
</tr>
</thead>
</table>
<div id="container" style="height:200px; overflow: auto; width: 817px;">
<asp:GridView ID="ChangedUPCs2" runat="server" AutoGenerateColumns="False"
DataKeyNames="banner,enterprise_zone,UPC,ProductDescriptionLong"
DataSourceID="Changes2" class="styleGrid" ondatabound="ChangedUPCs2GridDataBound"
Width = "800px" ViewStateMode = "Disabled">
<Columns>
<asp:TemplateField HeaderText="Tier" ItemStyle-Width="30px">
<ItemTemplate>
<asp:Label ID="Tier" Text='<%# Eval("enterprise_zone") %>' runat="server" class="zn"/>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="UPC" HeaderText="UPC" ItemStyle-Width="75px" >
</asp:BoundField>
<asp:BoundField DataField="line_code" HeaderText="Line Code" ItemStyle-Width="50px" >
</asp:BoundField>
<asp:BoundField DataField="BrandName" HeaderText="Brand"
ItemStyle-Width="100px" >
</asp:BoundField>
<asp:BoundField DataField="ProductDescriptionLong" HeaderText="Product"
ItemStyle-Width="205px">
</asp:BoundField>
<asp:TemplateField HeaderText="Old Qty / Old Price">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("ttlqty", "0:N0") %>'></asp:Label>
<asp:Label ID="Label2" runat="server" Text=" / "></asp:Label>
<asp:Label ID="Label3" runat="server" Text='<%# Bind("ttlretailprice", "0:c") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("ttlqty") %>'></asp:TextBox>
<asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("ttlretailprice") %>'></asp:TextBox>
</EditItemTemplate>
<ItemStyle Width="70px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="New Qty / New Price">
<ItemTemplate>
<asp:Label ID="Label7" runat="server" Text='<%# Bind("new_base_qty", "0:N0") %>'></asp:Label>
<asp:Label ID="Label8" runat="server" Text=" / "></asp:Label>
<asp:Label ID="Label9" runat="server" Text='<%# Bind("new_base_retail", "0:c") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="TextBox7" runat="server" Text='<%# Bind("new_base_qty") %>'></asp:TextBox>
<asp:TextBox ID="TextBox9" runat="server" Text='<%# Bind("new_base_retail") %>'></asp:TextBox>
</EditItemTemplate>
<ItemStyle Width="70px" />
</asp:TemplateField>
<asp:BoundField DataField="new_LC" HeaderText="Cost" SortExpression="new_LC" DataFormatString="0:c" ItemStyle-Width="50px"/>
<asp:BoundField DataField="margin_current" HeaderText="Current Margin"
SortExpression="margin_current" ItemStyle-Width="50px" DataFormatString="0:P1"/>
<asp:BoundField DataField="margin_new" HeaderText="New Margin"
SortExpression="margin_new" ItemStyle-Width="50px" DataFormatString="0:P1"/>
<asp:BoundField DataField="tag_type" HeaderText="Tag Type"
ItemStyle-Width="50px" >
</asp:BoundField>
<asp:BoundField DataField="effective_dt" HeaderText="Effective Date"
DataFormatString="0:MM/dd/yyyy" ItemStyle-Width="50px" >
</asp:BoundField>
</Columns>
</asp:GridView>
</div>
在 C# 中：
protected void ChangedUPCs2GridDataBound(object sender, EventArgs e)
ChangedUPCs2.HeaderRow.Attributes["style"] = "display:none";
ChangedUPCs2.UseAccessibleHeader = true;
ChangedUPCs2.HeaderRow.TableSection = TableRowSection.TableHeader;
【问题讨论】：
【参考方案1】：没有任何内置的 ASP.NET 允许这样做，这是购买支持它的工具（如 Telerik 控件）的一部分。但这是可以做到的，关键是构建用户最终可能选择的每一种可能的排序。并将它们与各自的事件联系起来。对于具有与您一样多的列的表来说，这绝非易事。可能最好的技术是build a stored procedure 可以处理单个请求，但我也不会将其描述为简单。对不起。
【讨论】：
如果您喜欢动态 sql，我喜欢存储过程的想法。如果我用先见之明构建它，我会这样做。然后 Telerik 又不是那么贵...【参考方案2】：您可以在页面中添加一些按钮，根据您的需要进行排序
使用 c# 代码，您可以对项目进行排序并填充 gridview
希望有所帮助。
【讨论】：
以上是关于修复了带有排序功能的标题网格视图的主要内容，如果未能解决你的问题，请参考以下文章