在 asp.net c# 中使用 JavaScript 過濾時保存 gridview 的狀態

Question

我正在使用 javascript 過濾我的 gridview，效果很好。 問題是當我單擊 gridview 編輯項目時，它回發並且過濾表現在未過濾。 使用 javascript 過濾器時如何保持 gridview 的狀態？

Java腳本：

<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: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 控件，它應該在回發時保留其狀態。 我假設當您保存一行時搜索框不會被清除。

除了已經運行它的按鈕單擊事件之外，為什么不在 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;

Answer 2

假設您的txtSearch看起來像這樣

<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>

然后，如果有 PostBack 以及 TextBox 是否有 Value，您只需檢查后面的代碼。 然后再次使用 ScriptManager 執行myFunction() 。 我已將代碼放在Page_Load中，但您也可以將其放在gridListt_RowEditing中

protected void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack && !string.IsNullOrEmpty(txtSearch.Text))
    {
        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "reFilter", "myFunction()", true);
    }
}

但是，如果您要在 html 表上自行構建排序和過濾內容，我建議您查看DataTables.net

Answer 3

請嘗試以下。 網格視圖上不應該回發。甚至編輯也應該通過 Ajax 通過 api 方法進行。

正如有人提到的那樣，使用https://datatables.net/這是一個很好的方法。 而不是使用 gridview 使用 api 啟用解決方案

另一種方法是當您過濾任何內容時將其保存在隱藏字段中並從服務器端回發讀取它並從服務器端實施相同的過濾（更難的方法）。

我現在無法提供代碼。但我過去已經實現過。