javascript - 在 asp.net c# 中使用 JavaScript 过滤时保存 gridview 的状态

Question

我正在使用 javascript 来过滤我的 gridview，效果很好。问题是，当我单击 gridview 编辑项目时，它回发并且已过滤的表现在未过滤。使用 javascript 过滤器时如何保持 gridview 的状态？

Javascript:

<script type="text/javascript">
    function myFunction() {
        //Searcing the table 
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("<%=txtSearch.ClientID %>");
         filter = input.value.toUpperCase();
         table = document.getElementById("<%=gridList.ClientID %>");
        tr = table.getElementsByTagName("tr");

        // Loop through all table rows, and hide those who don't match the search query
        for (i = 0; i < tr.length; i++) {

            td = tr[i].getElementsByTagName("td");

            if (td.length > 0) { // to avoid th 

                //Search the specific column
                if (
                    td[0].innerHTML.toUpperCase().indexOf(filter) > -1 ||
                    td[1].innerHTML.toUpperCase().indexOf(filter) > -1 ||
                    td[2].innerHTML.toUpperCase().indexOf(filter) > -1 ||
                    td[3].innerHTML.toUpperCase().indexOf(filter) > -1 ||
                    td[4].innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }
</script>

ASP:

<asp:TextBox ID="txtSearch" runat="server" class="form-control" Visible="true" Width="250px" placeholder="Enter Search Term..." onkeyup="myFunction()"/>

<asp:GridView ID="gridList" runat="server" HorizontalAlign="left" ShowHeader="True" AutoGenerateColumns="false" GridLines="None"
    OnRowEditing="gridList_RowEditing" OnRowCancelingEdit="gridListt_RowCancelingEdit" OnRowUpdating="gridList_RowUpdating">
    <Columns>
        <asp:TemplateField ItemStyle-HorizontalAlign="left" HeaderText="User">
            <ItemTemplate>
                <asp:Label ID="user" Visible="true" runat="server" Text='<%# Eval("User") %> ' />
            </ItemTemplate>

            <EditItemTemplate>
                <asp:TextBox ID="txtUser" class="form-control" runat="server" Text='<%# Eval("User") %> '></asp:TextBox>
            </EditItemTemplate>

        </asp:TemplateField>

        <asp:CommandField ButtonType="Link" ShowEditButton="true" ShowDeleteButton="true" HeaderText="Modify"
            EditText="<span style='font-size: 20px; color: #27ae60;'><span class='glyphicons glyph-edit'></span></span>"
            DeleteText="<span style='font-size: 18px; color: #c0392b;'><span class='glyphicons glyph-bin'></span></span>"
            CancelText="<span style='font-size: 20px; color: #7f8c8d;'><span class='glyphicons glyph-remove-2'></span></span>"
            UpdateText="<span style='font-size: 20px; color: #2980b9;'><span class='glyphicons glyph-floppy-saved'></span></span>" />
    </Columns>
</asp:GridView> 

c# 编辑一行例如:

protected void gridListt_RowEditing(object sender, GridViewEditEventArgs e)
{
    gridListGiftList.EditIndex = e.NewEditIndex;
    //I need to somehow load the filtered javascript state of the table here rather than the full table
    DataSet dsList = objuser.GetList(0);
    gridList.DataSource = dsList.Tables[0];
    gridList.DataBind();
}

Answer 1

假设 txtSearch 是一个 ASP.NET 控件，它应该在回发时保留其状态。我假设当您保存一行时搜索框不会被清除。

除了已经运行 myFunction() 的按钮单击事件之外，为什么不只在 window.onload 上运行 myFunction() 呢？然后在其中添加条件以在执行代码之前检查空白搜索值:

    function myFunction() {
    //Searcing the table 
    var input, filter, table, tr, td, i, txtValue;
    input = document.getElementById("txtSearch");
    filter = input.value.toUpperCase();
    table = document.getElementById("gridList");
    tr = table.getElementsByTagName("tr");
    if (input.value != "") {
       for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td");
        if (td.length > 0) { // to avoid th 
            //Search the specific column
            if (  td[0].innerHTML.toUpperCase().indexOf(filter) > -1 ||
 td[1].innerHTML.toUpperCase().indexOf(filter) > -1 ||
 td[2].innerHTML.toUpperCase().indexOf(filter) > -1 ||
 td[3].innerHTML.toUpperCase().indexOf(filter) > -1 ||
 td[4].innerHTML.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }           
       }
    }
    else {
            for (i = 0; i < tr.length; i++) {
                tr[i].style.display = "";
            }
        }
    }    
    window.onload = myFunction;