Question

我的目标是创建一个带有gridview的网页，该网页可以按任何值进行过滤，但每次将字符输入过滤器时，标题都会消失。我认为过滤器也过滤了标题，但我无法确定。这是我的代码：

＆＃13;

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

＆＃13;

我的代码背后：

＆＃13;

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

＆＃13;

如果有任何可以在网格视图过滤后保留标题的话，请告诉我。我感谢任何帮助。谢谢。

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。

如何防止Javascript过滤器导致我的gridview标头无法显示？

1 个答案: