6
Tôi đã cố gắng triển khai GridView có tiêu đề cố định khi bạn cuộn, nhưng cũng cho phép sắp xếp khi bạn nhấp vào các cột tiêu đề. Sau khi tìm kiếm một lúc, tôi tìm thấy một giải pháp tuyệt vời trực tuyến hoạt động hoàn hảo trên trang web của tôi. Nếu bạn có cùng một câu hỏi, hãy xem câu hỏi đó tại đây - http://www.aspsnippets.com/Articles/Scrollable-GridView-with-Fixed-Headers-and-Client-Side-Sorting-using-jQuery-in-ASP.Net.aspxGridview header cố định với chức năng phân loại
Bỏ qua ví dụ trên trang, nó không hoạt động khi tôi cố gắng sắp xếp nó nhưng nó hoạt động khi tôi đặt nó trên trang của riêng mình.
Đây là câu hỏi của tôi: Tôi đã hy vọng có thể sắp xếp theo nhiều cột cùng nhau và mã trên trang web chỉ cho phép sắp xếp trên một cột. Có ai có đề xuất về làm thế nào để thêm một mức độ phân loại thứ hai?
Đây là mã của tôi:
<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>
Trong C#:
protected void ChangedUPCs2GridDataBound(object sender, EventArgs e)
{
ChangedUPCs2.HeaderRow.Attributes["style"] = "display:none";
ChangedUPCs2.UseAccessibleHeader = true;
ChangedUPCs2.HeaderRow.TableSection = TableRowSection.TableHeader;
}
Tôi thích ý tưởng thủ tục được lưu trữ nếu bạn đang sử dụng sql động. Đó là cách tôi sẽ làm điều đó NẾU tôi đã xây dựng nó với sự biết trước. Sau đó, một lần nữa telerik là không đắt ... – user314321