重新加载 GridView 时重新应用 jQuery 过滤器答案

【问题标题】：Re-apply jQuery filter when GridView reloads重新加载 GridView 时重新应用 jQuery 过滤器
【发布时间】：2018-03-22 21:00:01
【问题描述】：

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

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

我尝试了各种 onload 或 document-ready 功能，但它们不起作用 - 重新加载页面时它们不执行任何操作，或者它们取消应用过滤器。

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

谢谢

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

【问题讨论】：

标签： jquery gridview

【解决方案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','');
    }
}

【讨论】：