TBK*_*TBK 6 asp.net sorting jquery gridview fixed
我一直在尝试在滚动时实现具有固定标题的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;
}
ASP.NET 没有任何内置功能可以实现此目的，只能购买支持它的工具（例如 Telerik 控件）。但这是可以做到的，关键是构建用户最终可能选择的每种可能的排序。并将它们与各自的事件联系起来。对于具有与您一样多列的表来说，这并不是一件容易的事。最好的技术可能是构建一个可以处理各个请求的存储过程，但我也不会将其描述为简单。对不起。