如何防止Javascript篩選器導致我的GridView標題不顯示？

Question

我的目標是創建一個帶有gridview的網頁，可以通過任何值進行過濾，但是每次將字符輸入過濾器時，標題消失。我在想這個過濾器也在過濾掉標題，但我無法確定。這裏是我的代碼：

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server"> 
 
    <script src="../Scripts/jquery-1.7.1.js" type="text/javascript"></script> 
 
    <script src="../Scripts/jquery-latest.js" type="text/javascript"></script> 
 

 
     <script> 
 

 
     $(document).ready(function() { 
 
      
 
      $("#fbody tbody").attr('id', 'testing'); 
 

 
     }); 
 

 
     var table = $('#fbody').DataTable(); 
 

 
     new $.fn.dataTable.FixedHeader(table, { 
 
      
 
     
 

 
     }); 
 

 
     </script> 
 

 

 

 
    <script> 
 
     $(function() { // this will be called when the DOM is ready 
 
      $('#MainContent_txtFilter').keyup(function() { 
 
      // alert ("hi"); 
 
       // var data = this.value.split(" "); 
 
       var data = this.value.toUpperCase().split(" "); 
 
        
 
       var jo = $("#testing").find("tr"); 
 
       if (this.value == "") { 
 
        jo.show(); 
 
         
 
        return; 
 
       } 
 

 
       //hide all the rows 
 
       jo.hide(); 
 
        
 
       //Recusively filter the jquery object to get results. 
 
       jo.filter(function (i, v) { 
 
        var $t = $(this); 
 
        for (var d = 0; d < data.length; ++d) { 
 
         // if ($t.is(":contains('" + data[d] + "')")) { 
 
         if ($t.text().toUpperCase().indexOf(data[d]) > -1) { 
 
          return true; 
 
         } 
 
        } 
 
        return false; 
 
       }) 
 
       //show the rows that match. 
 
       .show(); 
 
       
 
      }).focus(function() { 
 
       this.value = ""; 
 
       $(this).css({ 
 
        "color": "black" 
 
       }); 
 
       $(this).unbind('focus'); 
 
      }).css 
 
      ({ 
 
       "color": "#C0C0C0" 
 
      }); 
 

 
      }); 
 
     
 
    </script> 
 

 
</asp:Content> 
 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server"> 
 
    
 
     <br /> 
 
     <br /> 
 
     <br /> 
 
    Filter: <asp:TextBox ID="txtFilter" runat="server" Width="110px"></asp:TextBox> 
 
     <br /> 
 
     <br /> 
 
     <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> 
 
     
 
      <ContentTemplate> 
 

 
      <asp:Panel ID="Panel1" runat="server"> 
 
     <br /> 
 
     
 
     
 

 
<div style="overflow:auto;height:400px;width:680px;" id="DivMainContent"> 
 
     <asp:SqlDataSource ID="Pricing" runat="server" ConnectionString="<%$ ConnectionStrings:Database1 %>" SelectCommand="spPricing" SelectCommandType="StoredProcedure"></asp:SqlDataSource> 
 

 
    
 
     
 
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" 
 
       
 
        AllowSorting="True" BackColor="#CCCCCC" BorderColor="#999999" BorderStyle="Solid" BorderWidth="3px" CellPadding="4" CellSpacing="2" ForeColor="Black" DataSourceID="Pricing" DataKeyNames="ItemCode"> 
 
        <Columns> 
 
         <asp:BoundField DataField="ItemCode"            HeaderText="ItemCode" SortExpression="ItemCode"         ReadOnly="True" /> 
 
         <asp:BoundField DataField="ItemCodeDesc"           HeaderText="ItemCodeDesc" SortExpression="ItemCodeDesc"> 
 
         <ItemStyle Wrap="False" /> 
 
         </asp:BoundField> 
 
         <asp:BoundField DataField="Price" HeaderText="Price"        SortExpression="Price" > 
 
         <ItemStyle Wrap="False" /> 
 
         </asp:BoundField> 
 

 
       </asp:GridView> 
 
     
 
     
 
      
 
</div> 
 

 
</asp:Panel> 
 
    </ContentTemplate> 
 
    </asp:UpdatePanel> 
 

 

 

 

 

 
</asp:Content>

我的代碼背後：

protected void Page_Load(object sender, EventArgs e) 
 
{ 
 
    
 
    GridView2.Attributes.Add("id", "fbody"); 
 
    
 
    
 
}

請讓我知道，如果有什麼事可以做，以保持頭在gridview被過濾之後。我感謝任何幫助。謝謝。

Answer 1

，以確保您只有在表體靶向行，jQuery選擇限制表中的 tbody區域，如：

var jo = $("#testing").find("tbody tr"); 

這應該引起 thead區域是忽略並因此不受影響。

對不起，重新閱讀你的代碼後，我終於注意到#testing ID是在tbody已經指向。沒有什麼幫助的是，GridView控件有一個包含tbody中所有內容（包括頭部）的惡習。

作爲一個潛在的解決方法，嘗試連接最多的OnRowDataBound處理程序：

protected void GridView2_RowDataBound(object sender, GridViewRowEventArgs e) 
{ 
    if (e.Row.RowType == DataControlRowType.Header) { 
     e.Row.TableSection = TableRowSection.TableHeader; 
    } 
} 

這應當引起頭部的語義正確thead元素中呈現，讓你能夠瞄準tbody不影響頭。