在gridview中过滤记录

本文关键字：记录 过滤 gridview | 更新日期: 2023-09-27 18:09:26

我写了一个小程序来过滤网格视图中的记录，通过用户在文本框中输入的内容进行过滤。这样做的问题是，用户不能快速输入，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();
     }
  }
}

在gridview中过滤记录

正如Ujjwal所说，不要使用post - back，而是使用客户端来过滤GridView的记录。这里给出了一个非常好的文章/示例:Javascript表过滤器

和上述文章中的代码片段:

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

如果所有数据同时显示在GridView中，那么您可以使用客户端脚本来过滤出行。

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

相关文章：