我一直在尝试在滚动时实现具有固定标题的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;
}
答案 0 :(得分:0)
没有任何内置的ASP.NET允许这样做,这是购买支持它的工具的一部分(如Telerik控件)。但它可以做到,关键是要构建用户可能最终选择的每种可能的排序。并将他们与各自的活动联系起来。使用具有尽可能多列的表格并不是一件容易的事。可能最好的技术是build a stored procedure可以处理个别请求,但我也不会将其描述为简单。遗憾。
答案 1 :(得分:0)
您可以在页面上添加一些按照您想要的内容排序的按钮
使用c#代码,您可以对项目进行排序并填充gridview
我希望有所帮助。