2011-09-21 96 views
0

我编写了一个小程序来过滤网格视图中的记录,并根据用户输入到文本框中的内容进行过滤。与此相关的问题是,用户无法快速输入,GridView需要时间来显示。我想让它更快,所以用户不会注意到延迟。任何建议使这项工作更好?在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> 

------------------------------ SERVER SIDE CODE ---------- -----------------------------

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(); 
    } 
    } 

} 
+0

尝试使用的jqGrid http://www.trirand.net/demoaspnet.aspx –

回答

2

正如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; 
    } 
} 

该过滤器2方法有两个参数,一个短语来搜索并表的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"> 
+0

感谢您的帮助..它的伟大工程。 – AJ17

0

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

服务器端显然会慢的,你必须回传和重新渲染GridView的