在gridview中过滤记录 [英] Filter records in gridview
本文介绍了在gridview中过滤记录的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我编写了一个小程序来过滤网格视图中的记录，并根据用户在文本框中输入的内容进行过滤.问题是，用户无法快速键入，gridview需要花费一些时间才能显示.我想使其更快，以使用户不会注意到延迟.有什么建议可以使这项工作更好吗?
I wrote a small program to filter records in a grid view, filter by what is entered into a text box by the user. the problem with this are, the user cannot type fast,gridview takes time to display. I want to make it faster so the user doesn't notice a delay. any suggestion to make this work better?
<%@ 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();
}
}
}
推荐答案
正如Ujjwal所说，与其使用回发，不如使用客户端来过滤GridView的记录.这里提供了一个非常不错的文章/示例: JavaScript表过滤器
As Ujjwal said, instead of using post backs use client side to filter the records of GridView. A very nice article/sample is given here: Javascript Table filter
以及所提到文章的代码段:
And code snippet from mentioned article:
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中使用的方法:
This filter2 method takes two parameters a phrase to search for and an id of table. Here is how to use in 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中过滤记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
