Javascript代码过滤gridview记录上的按钮单击

Javascript code for filtering gridview records on button click

本文关键字：按钮 单击 记录 代码 过滤 gridview Javascript      更新时间：2023-09-26

我有一个gridview绑定数据。我想过滤按钮点击记录，它将从文本框和按钮点击它将过滤记录，并将显示哪些记录与输入匹配。

我想这会对你有帮助的

ASPX Design:

<asp:Button ID="btnPopulate" runat="server" Text="Populate Grid" 
    onclick="btnPopulate_Click" /><br /><br />
<asp:GridView ID="gvDemo" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="FirstName" HeaderText="First Name" />
        <asp:BoundField DataField="LastName" HeaderText="Last Name" />
    </Columns>
</asp:GridView>
<br />
<asp:TextBox ID="txtKeyword" runat="server" Text=""></asp:TextBox>
<asp:Button ID="btnFilter" OnClientClick="Filter();return false;" runat="server" Text="Filter" />
JavaScript代码: 

<script type="text/javascript">
    function Filter() {
        var txtKeyword = document.getElementById('<%= txtKeyword.ClientID %>');        
        var tblGrid = document.getElementById('<%= gvDemo.ClientID %>');        
        var rows = tblGrid.rows;
        var i = 0, row, cell ;
        for (i = 1; i < rows.length; i++) {
            row = rows[i];
            var found = false;
            for (var j = 0; j < row.cells.length; j++) {
                cell = row.cells[j];
                if (cell.innerHTML.toUpperCase().indexOf(txtKeyword.value.toUpperCase()) >= 0) {
                    found = true;
                    break;
                }
            }
            if (!found) {
                row.style['display'] = 'none';
            }
            else {
                row.style.display = '';
            }
        }
        return false;
    }
</script>

c#代码:

protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnPopulate_Click(object sender, EventArgs e)
{
    DataTable dtEmployee = PopulateDataTable();
    gvDemo.DataSource = dtEmployee;
    gvDemo.DataBind();
}
protected DataTable PopulateDataTable()
{ 
    //here is logic to populate your data table
    //I'm using dummy data
    DataTable dt = new DataTable();
    dt.Columns.Add(new DataColumn("FirstName", typeof(string)));
    dt.Columns.Add(new DataColumn("LastName", typeof(string)));
    dt.Rows.Add(dt.NewRow());
    dt.Rows.Add(dt.NewRow());
    dt.Rows.Add(dt.NewRow());
    dt.Rows.Add(dt.NewRow());
    dt.Rows.Add(dt.NewRow());
    dt.Rows.Add(dt.NewRow());
    dt.Rows.Add(dt.NewRow());
    dt.Rows.Add(dt.NewRow());
    dt.Rows[0]["FirstName"] = "Sangram";
    dt.Rows[0]["LastName"] = "Patil";
    dt.Rows[1]["FirstName"] = "Prasad";
    dt.Rows[1]["LastName"] = "Patil";
    dt.Rows[2]["FirstName"] = "Girish";
    dt.Rows[2]["LastName"] = "Mane";
    dt.Rows[3]["FirstName"] = "Kedar";
    dt.Rows[3]["LastName"] = "Torase";
    dt.Rows[4]["FirstName"] = "Nandu";
    dt.Rows[4]["LastName"] = "Desai";
    dt.Rows[5]["FirstName"] = "Promod";
    dt.Rows[5]["LastName"] = "Mandavkar";
    dt.Rows[6]["FirstName"] = "Kiran";
    dt.Rows[6]["LastName"] = "More";
    dt.Rows[7]["FirstName"] = "Vaibhav";
    dt.Rows[7]["LastName"] = "Telang";
    return dt;
}
相关文章：