Javascriptフィルターがグリッドビューヘッダーを表示させないようにするにはどうすればよいですか？

Question

私の目標は、任意の値でフィルタリングできるグリッドビューを持つWebページを作成することでしたが、ヘッダーが消えるフィルタに文字が入力されるたびに、私はフィルターがヘッダーをフィルタリングしていると思っていますが、私は確信が持てません。

<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"); 
 
    
 
    
 
}

ヘッダを維持するために行うことができるものがあります場合は私に知らせてくださいグリッドビューがフィルタされた後私はどんな助けにも感謝します。ありがとうございました。

Answer 1

あなたが唯一例えば、テーブルの tbody領域にjQueryのセレクタを制限し、テーブルの本体内の行をターゲットしていることを確認するには、次の

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

これは、ヘッダーに影響を与えることなく、tbodyをターゲットすることができ、あなたを残して、意味的に、正しいthead要素内にレンダリングされるヘッダを起こす必要があります。