2012-01-11 87 views
6

我一直在試圖實現一個固定標題,當你滾動,但也允許排序時,你點擊標題列的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; 

    } 

回答

0

沒有什麼內置的ASP.NET,將允許這樣做,一部分來自購買支持它的工具(如Telerik控件)。但是它可以完成,關鍵是要構建用戶可能最終選擇的各種可能類型。並將它們綁定到它們各自的事件。如果您的桌子上有儘可能多的列,這並非易事。可能最好的技巧是build a stored procedure可以處理個別請求,但我不會將其描述爲簡單。抱歉。

+0

我喜歡存儲過程的想法,如果你到動態SQL。如果我用預知來建立它,那我就是這麼做的。然後再次telerik不是很貴... – user314321 2013-09-05 22:21:15

0

你可以添加一些按鈕到您的網頁那種你想要

什麼都與C#代碼,你可以

我希望幫助項目進行排序,並填寫GridView控件。