Vista de cuadrícula de encabezado fijo con funcionalidad de clasificación

Question

He intentado implementar una vista de cuadrícula que tiene un encabezado fijo cuando se desplaza, pero también permite ordenar cuando hace clic en las columnas de encabezado. Después de buscar por un tiempo, encontré una gran solución en línea que funciona perfectamente en mi sitio. Si tiene la misma pregunta, compruébelo aquí: http://www.aspsnippets.com/Articles/Scrollable-GridView-with-Fixed-Headers-and-Client-Side-Sorting-using-jQuery-in-ASP.Net.aspx

Ignore el ejemplo en la página, no funcionó cuando traté de ordenarlo, pero fue funcional cuando lo puse en mi propia página.

Aquí está mi pregunta: esperaba poder ordenar por varias columnas en conjunto, y el código en el sitio solo permite ordenar en una sola columna. ¿Alguien tiene sugerencias sobre cómo agregar un segundo nivel de clasificación?

Aquí está mi código:

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

en C#:

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

    } 

Answer 1

No hay nada integrado para ASP.NET que permitirá hacer esto, una parte de las herramientas de compra que sí la soportan (como los controles de Telerik). Pero se puede hacer, la clave es construir todos los tipos posibles que el usuario pueda seleccionar. Y atándolos a su evento respectivo. Esto no es una tarea fácil con una tabla que tiene tantas columnas como usted. Probablemente la mejor técnica sería build a stored procedure que podría manejar las solicitudes individuales, pero tampoco lo describiría como simple. Lo siento.

Answer 2

puede agregar algunos botones a su página de ese tipo, con lo que cada vez que desee

y con el código de C# se puede ordenar los elementos y llenar gridview

espero ayudado.