在 GridView 重新加载时重新应用 jQuery 筛选器

Question

请你帮我解决这个问题。 我对jQuery很陌生，无法让这个工作。

我在网上的某个地方找到了一个示例jQuery脚本。它在筛选 ASP.net GridView 中的行时工作正常。问题是找到一行(网格被很好地截断并只显示我想要的那行(，如果我按其中一个 .net 命令按钮(如编辑(，页面将重新加载并且 jQuery 过滤丢失。 我必须再次按下搜索按钮。代码如下。

我已经尝试了各种加载或文档就绪功能，但它们不起作用 - 要么在重新加载页面时它们什么都不做，要么取消应用过滤器。

请告诉我如何在页面重新加载后自动重新应用过滤器以对数据网格进行编辑。

谢谢

<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
    $('#<%=lblNoRecords.ClientID%>').css('display','none');
    $('#<%=btnSubmit.ClientID%>').click(function(e)
    {
        $('#<%=lblNoRecords.ClientID%>').css('display','none'); // Hide No records to display label.
        $("#<%=GridView1.ClientID%> tr:has(td)").hide(); // Hide all the rows.
        var iCounter = 0;
        var sSearchTerm = $('#<%=txtSearch.ClientID%>').val(); //Get the search box value
        if(sSearchTerm.length == 0) //if nothing is entered then show all the rows.
        {
          $("#<%=GridView1.ClientID%> tr:has(td)").show(); 
          return false;
        }
        //Iterate through all the td.
        $("#<%=GridView1.ClientID%> tr:has(td)").children().each(function() 
        {
            var cellText = $(this).text().toLowerCase();
            if(cellText.indexOf(sSearchTerm.toLowerCase()) >= 0) //Check if data matches
            {    
                $(this).parent().show();
                iCounter++;
                return true;
            } 
        });
        if(iCounter == 0)
        {
            $('#<%=lblNoRecords.ClientID%>').css('display','');
        }
        e.preventDefault();
    })
})
</script>

    Search Text :
    <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
    &nbsp;
    <asp:Button ID="btnSubmit" runat="server" Text="Search" /> 
<br />
<asp:GridView ID="GridView1" >
.....
</asp:GridView>

Answer 1

您需要

检测搜索词的存在并在document.ready()中自动搜索。 基本上再次重新应用过滤器，因为您单击的操作链接回发到服务器，并且您的过滤器仅在单击按钮时运行。

在这里，我重构了您的代码以提取过滤器函数，并在document.ready()函数的底部添加了一个 if，该函数将在搜索字段不为空的情况下重新应用过滤器。

$(document).ready(function() {
    $('#<%=lblNoRecords.ClientID%>').css('display','none');
    $('#<%=btnSubmit.ClientID%>').click(function(e)
    {
        filterGrid($('#<%=txtSearch.ClientID%>').val()); 
        e.preventDefault();
    });
    if($('#<%=txtSearch.ClientID%>').val().trim() !== ""){ // was I filtering?
        filterGrid($('#<%=txtSearch.ClientID%>').val());
    }
})
function filterGrid(term){
    $('#<%=lblNoRecords.ClientID%>').css('display','none'); // Hide No records to display label.
    $("#<%=GridView1.ClientID%> tr:has(td)").hide(); // Hide all the rows.
    var iCounter = 0;
    var sSearchTerm = term //Get the search box value
    if(sSearchTerm.length == 0) //if nothing is entered then show all the rows.
    {
      $("#<%=GridView1.ClientID%> tr:has(td)").show(); 
      return false;
    }
    //Iterate through all the td.
    $("#<%=GridView1.ClientID%> tr:has(td)").children().each(function() 
    {
        var cellText = $(this).text().toLowerCase();
        if(cellText.indexOf(sSearchTerm.toLowerCase()) >= 0) //Check if data matches
        {    
            $(this).parent().show();
            iCounter++;
            return true;
        } 
    });
    if(iCounter == 0)
    {
        $('#<%=lblNoRecords.ClientID%>').css('display','');
    }
}