Question

我写了一个小程序来过滤网格视图中的记录，按用户输入文本框的内容进行过滤。问题是，用户无法快速输入，gridview需要时间来显示。我想让它更快，所以用户不会注意到延迟。有什么建议让这项工作更好吗？

   <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs"    Inherits="_Default" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

     <html xmlns="http://www.w3.org/1999/xhtml">

          <script type="text/javascript">
             function runPostback() {
             document.forms["form1"].submit();
             document.getElementById("TextBox1").focus();


         }
 function getFocus(){
     var text = document.getElementById("TextBox1");
     if (text != null && text.value.length > 0) {
         if (text.createTextRange) {
             var FieldRange = text.createTextRange();
             FieldRange.moveStart('character', text.value.length); 
             FieldRange.collapse();
        FieldRange.select(); } }
        }
           function TriggerPostBack(control, arg){


      __doPostBack(control, arg);
         }

           function SetDelay() {
             // setTimeout("runPostback()",3000);
           }




</script>

 <head runat="server">
 <title>Untitled Page</title>
</head>
 <body onload="getFocus()">

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

      <div> <asp:TextBox ID="TextBox1" runat="server" Width="312px" OnTextChanged="Code_TextChanged" onkeyup="TriggerPostBack('control', 'arg')" ></asp:TextBox>
  <asp:UpdatePanel ID="UpdatePanel1" runat="server">
   <Triggers>
        <asp:AsyncPostBackTrigger ControlID="TextBox1" />
    </Triggers>
      <ContentTemplate>

          <br />
          <asp:GridView ID="GridView1" runat="server">
          </asp:GridView>

      </ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>

------------------------------服务器端代码-------------- -------------------------

   public partial class _Default : System.Web.UI.Page 
     {
            DataTable myDataTable = new DataTable();

protected void Page_Load(object sender, EventArgs e)
{
    //TextBox1.Attributes.Add("onkeyup", "Code_TextChanged");

 if (!IsPostBack)
    {
        GridView1.DataSource = generateDATATABLE();
        GridView1.DataBind();
    }


}


public void RaisePostBackEvent(string eventArgument) 
    {
        BindgrdView();
    }


public DataTable generateDATATABLE()
{






    DataColumn myDataColumn;

    myDataColumn = new DataColumn();
    myDataColumn.DataType = Type.GetType("System.String");
    myDataColumn.ColumnName = "ID";
    myDataTable.Columns.Add(myDataColumn);

    myDataColumn = new DataColumn();
    myDataColumn.DataType = Type.GetType("System.String");
    myDataColumn.ColumnName = "Link";
    myDataTable.Columns.Add(myDataColumn);



    myDataTable.Rows.Add("01", "G Powder");
    myDataTable.Rows.Add("02", "G Eye Drops");
    myDataTable.Rows.Add("03qq", "G Syrup");
    myDataTable.Rows.Add("0333", "G Syrup");
    myDataTable.Rows.Add("0453", "G Syrup");
    myDataTable.Rows.Add("0333", "G Syrup");
    myDataTable.Rows.Add("03666", "G Syrup");
    myDataTable.Rows.Add("0333", "G Syrup");
    myDataTable.Rows.Add("0453", "G Syrup");
    myDataTable.Rows.Add("033w8883", "G Syrup");
    myDataTable.Rows.Add("03666", "t Syrup");
    myDataTable.Rows.Add("038833", "t Syrup");
    myDataTable.Rows.Add("048853", "t Syrup");
    myDataTable.Rows.Add("032233", "t Syrup");
    myDataTable.Rows.Add("0322666", "t Syrup");
    myDataTable.Rows.Add("038833", "t Syrup");
    myDataTable.Rows.Add("048853", "t Syrup");
    myDataTable.Rows.Add("032233", "t Syrup");
    myDataTable.Rows.Add("0322666", "t Syrup");
    myDataTable.Rows.Add("038833", "t Syrup");
    myDataTable.Rows.Add("048853", "t Syrup");
    myDataTable.Rows.Add("032233", "t Syrup");
    myDataTable.Rows.Add("038833", "t Syrup");
    myDataTable.Rows.Add("048853", "t Syrup");
    myDataTable.Rows.Add("032233", "t Syrup");
    myDataTable.Rows.Add("038833", "t Syrup");
    myDataTable.Rows.Add("048853", "t Syrup");
    myDataTable.Rows.Add("032233", "t Syrup");
    myDataTable.Rows.Add("038833", "t Syrup");




    return myDataTable;


}

protected void Code_TextChanged(object sender, EventArgs e)
{


    myDataTable = generateDATATABLE();


    if (myDataTable.Rows.Count > 0)
    {
        if (myDataTable.Rows.Count > 0)
        {


            string filterExp = "ID >= "+"'"+TextBox1.Text+"'";
            DataRow[] temp= myDataTable.Select(filterExp);
            GridView1.DataSource = convertTODT(temp);
            GridView1.DataBind();
        }
    }
}


public DataTable convertTODT(DataRow[] temp)
{
    DataTable DT = new DataTable();
    DataColumn myDataColumn;

    myDataColumn = new DataColumn();
    myDataColumn.DataType = Type.GetType("System.String");
    myDataColumn.ColumnName = "ID";
    DT.Columns.Add(myDataColumn);

    myDataColumn = new DataColumn();
    myDataColumn.DataType = Type.GetType("System.String");
    myDataColumn.ColumnName = "Link";
    DT.Columns.Add(myDataColumn);


    foreach(DataRow dr in temp)
    {
        DT.ImportRow(dr);
    }


    return DT;
}
   public void BindgrdView()
 {

    myDataTable = generateDATATABLE();
     if (myDataTable.Rows.Count > 0)
    {
      GridView1.DataSource = myDataTable.Select("ID like" + "'" +      TextBox1.Text.ToString() + "'");
       GridView1.DataBind();
     }
  }

}

Answer 1

正如Ujjwal所说，使用客户端来过滤GridView的记录，而不是使用回发。这里给出了一篇非常好的文章/样本：Javascript Table filter

来自上述文章的代码片段：

function filter2 (phrase, _id){
    var words = phrase.value.toLowerCase().split(" ");
    var table = document.getElementById(_id);
    var ele;
    for (var r = 1; r < table.rows.length; r++){
        ele = table.rows[r].innerHTML.replace(/<[^>]+>/g,"");
            var displayStyle = 'none';
            for (var i = 0; i < words.length; i++) {
            if (ele.toLowerCase().indexOf(words[i])>=0)
            displayStyle = '';
            else {
            displayStyle = 'none';
            break;
            }
            }
        table.rows[r].style.display = displayStyle;
    }
}

此filter2方法使用两个参数来搜索短语和表的id。以下是如何在aspx中使用：

<!-- A text box for entering search phrase and GridView1.ClientID returns the client id of gridview -->
<input name="txtTerm" onkeyup="filter2(this, '<%=GridView1%>')" type="text">

Answer 2

如果您的所有数据一次显示在GridView中，那么您可以使用客户端脚本来过滤掉该行。

服务器端显然会慢，因为你必须回发并重新渲染gridview

过滤gridview中的记录

2 个答案: