Fixed header gridview con funzionalità di ordinamento

Question

Ho cercato di implementare un gridview che ha un'intestazione fissa quando si scorre, ma consente anche l'ordinamento quando si fa clic sulle colonne di intestazione. Dopo aver cercato per un po ', ho trovato una grande soluzione online che funziona perfettamente sul mio sito. Se hai la stessa domanda, dai un'occhiata qui - http://www.aspsnippets.com/Articles/Scrollable-GridView-with-Fixed-Headers-and-Client-Side-Sorting-using-jQuery-in-ASP.Net.aspx

Ignora l'esempio nella pagina, non ha funzionato quando ho provato ad ordinarlo ma era funzionale quando l'ho messo sulla mia pagina.

Ecco la mia domanda: speravo di essere in grado di ordinare per più colonne in congiunzione, e il codice sul sito consente solo l'ordinamento su una singola colonna. Qualcuno ha suggerimenti su come aggiungere un secondo livello di ordinamento?

Ecco il mio codice:

<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> 

in C#:

protected void ChangedUPCs2GridDataBound(object sender, EventArgs e) 
    { 
     ChangedUPCs2.HeaderRow.Attributes["style"] = "display:none"; 
     ChangedUPCs2.UseAccessibleHeader = true; 
     ChangedUPCs2.HeaderRow.TableSection = TableRowSection.TableHeader; 

    } 

Answer 1

Non c'è nulla di built-in per ASP.NET che permetterà per fare questo, una parte dall'acquistare strumenti che lo supportano (come i controlli di Telerik). Ma può essere fatto, la chiave è costruire ogni possibile tipo che l'utente potrebbe finire per selezionare. E legarli al loro rispettivo evento. Non è un'impresa facile con un tavolo con tante colonne quante ne hai. Probabilmente la tecnica migliore sarebbe quella di build a stored procedure che potrebbe gestire le singole richieste, ma non la descriverei altrettanto semplice. Scusate.

Answer 2

è possibile aggiungere alcuni pulsanti per la vostra pagina di questo genere con quello che volete

e con il codice C# è possibile ordinare gli elementi e riempire GridView

spero aiutato.