2012-01-11 21 views
6

Kaydırdığınızda sabit bir üstbilgiye sahip bir kılavuz görünümü uygulamaya çalışıyorum, ancak üstbilgi sütunlarını tıklattığınızda da sıralama yapmaya izin veriyor. Bir süre aradıktan sonra, sitemde mükemmel bir şekilde çalışan mükemmel bir çözüm buldum. Aynı soruya sahipseniz, burayı kontrol edin - http://www.aspsnippets.com/Articles/Scrollable-GridView-with-Fixed-Headers-and-Client-Side-Sorting-using-jQuery-in-ASP.Net.aspxSıralama işlevselliği ile sabit üstbilgi grid görünümü

Sayfadaki örneği göz ardı etmeyin, sıralamaya çalıştığımda işe yaramadı, ancak kendi sayfama koyduğumda kullanışlıydı.

İşte sorum şu: Birlikte birden fazla sütun kullanarak sıralama yapabilmeyi umuyordum ve sitedeki kod sadece tek bir sütun üzerinde sıralamaya izin veriyor. Bir kimsenin ikinci bir sıralama düzeyini nasıl ekleyeceği konusunda önerileri var mı? c In #

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

:

İşte benim kodudur

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

    } 

cevap

0

yerleşik Bunu yapmak için izin verecektir ASP.NET için hiçbir şey yoktur, Telerik kontrolleri gibi destekleyici araçları satın almanın bir parçası. Ancak bu yapılabilir, anahtar kullanıcının seçebileceği her türlü sıralamayı oluşturmaktır. Ve onları kendi etkinliklerine bağlayarak. Bu, sahip olduğunuz kadar çok sütuna sahip bir tablo ile kolay bir başarı değildir. Muhtemelen en iyi teknik, bireysel istekleri yerine getirebilecek build a stored procedure olacaktır, ancak bunu basit olarak tarif etmem. Afedersiniz.

+0

Dinamik sql'ye giriyorsanız saklı yordam fikrini beğenirim. Bunu yapmak için böyle bir şey yaparsam böyle yapardım. Sonra tekrar telerik değil pahalı ... – user314321

0

Eğer

i yardımcı umut GridView'da öğeleri sıralamak ve doldurabilir sen

ne kadar istediğimiz ve C# kodu ile sayfanıza bu tür bazı düğmeler ekleyebilirsiniz.