我一直在試圖實現一個固定標題,當你滾動,但也允許排序時,你點擊標題列的gridview。經過一段時間的搜索後,我發現了一個很好的在線解決方案,可以在我的網站上完美工作如果你有同樣的問題,請在此處查看 - http://www.aspsnippets.com/Articles/Scrollable-GridView-with-Fixed-Headers-and-Client-Side-Sorting-using-jQuery-in-ASP.Net.aspx固定標題gridview與排序功能
忽略頁面上的示例,當我嘗試對它進行排序時它不起作用,但在我將它放在自己的頁面上時它起作用。
這是我的問題:我希望能夠結合多個列進行排序,並且網站上的代碼只允許在單個列上進行排序。有沒有人有關於如何添加第二級排序的建議?
這裏是我的代碼:
<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;
}
我喜歡存儲過程的想法,如果你到動態SQL。如果我用預知來建立它,那我就是這麼做的。然後再次telerik不是很貴... – user314321 2013-09-05 22:21:15