使用标题行上的文本框过滤网格视图 [英] Filtering the grid view using text box on header row

问题描述

我创建了一个代码，它使用网格视图中的文本框过滤网格视图。它工作，如果我把文本框放在网格视图的一边，它过滤网格内的所有行和列。



但是，我想通过在标题行上使用文本框位置来过滤网格视图中的特定列，它不起作用!!



代码：



在网格视图中的文本框中，我创建了onkeyup函数如下： />

Hi,

i have created code which it is filtering the grid view by using text box inside the grid view. its working if i put the text box out side the Grid view and it filtering all rows and columns inside the grid together.

However, i want to filter a specific column in the grid view by using text box places on header row, it not working!!

the code:

in the text box which it is inside the grid view , i have created onkeyup function as bellow:

<asp:TextBox ID="TextBoxName" runat="server" CssClass="sNamet" onkeyup='searchTable()' AutoPostBack="True" OnTextChanged="TextBoxName_TextChanged" Width="100px" Height="10"></asp:TextBox></td>

然后在网格视图后我创建了脚本如下：

then after the grid view i have created the script as bellow :

<script>
                function searchTable() {
                    var input, filter, found, table, tr, td, i, j;
                    input = document.getElementById("content_body_textsearch123");
                    filter = input.value.toUpperCase();
                    table = document.getElementById("content_body_ClientGridView");
                    tr = table.getElementsByTagName("tr");
                    for (i = 0; i < tr.length; i++)
                    {
                        td = tr[i].getElementsByTagName("td");
                        for (j = 0; j < td.length; j++) {
                            if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1)
                            {
                                found = true;
                            }
                        }
                        if (found) {
                            tr[i].style.display = "";
                            found = false;
                        } else {
                            tr[i].style.display = "none";
                        }
                    }
                }
</script>

我如何制作使用放置在网格视图内的文本框过滤网格视图的特定列？



我尝试过：

how i make filtering grid view's specific column using the text box placed inside the grid view ?

What I have tried:

<script>
                function searchTable() {
                    var input, filter, found, table, tr, td, i, j;
                    input = document.getElementById("content_body_textsearch123");
                    filter = input.value.toUpperCase();
                    table = document.getElementById("content_body_ClientGridView");
                    tr = table.getElementsByTagName("tr");
                    for (i = 0; i < tr.length; i++)
                    {
                        td = tr[i].getElementsByTagName("td");
                        for (j = 0; j < td.length; j++) {
                            if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1)
                            {
                                found = true;
                            }
                        }
                        if (found) {
                            tr[i].style.display = "";
                            found = false;
                        } else {
                            tr[i].style.display = "none";
                        }
                    }
                }
</script>

推荐答案

检查这个

使用ASP.Net中的jQuery在列TextBox KeyPress上搜索GridView记录（数据） [ ^ ]



或试试这个

ASPX / HTML

check this
Search GridView records (data) on Column TextBox KeyPress using jQuery in ASP.Net[^]

or try this
ASPX/HTML

<asp:GridView ID="gv" runat="server" AutoGenerateColumns="false">
            <Columns>
                <asp:TemplateField>
                    <HeaderTemplate>
                        Column1
                        <br />
                        <input type="text" id="Column1" onkeyup="searchTable(this,0)" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <%# DataBinder.Eval(Container.DataItem, "Column1") %>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <HeaderTemplate>
                        Column2<br />
                        <input type="text" id="Column2" onkeyup="searchTable(this,1)" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <%# DataBinder.Eval(Container.DataItem, "Column2") %>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <HeaderTemplate>
                        Column3<br />
                        <input type="text" id="Column3" onkeyup="searchTable(this,2)" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <%# DataBinder.Eval(Container.DataItem, "Column3") %>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

Javascript

Javascript

function searchTable(obj, index) {

           var filter = obj.value.toUpperCase();
           var grid = document.getElementById('<%= gv.ClientID%>');
           for (var i = 1; i < grid.rows.length; i++)
               grid.rows[i].style.display = grid.rows[i].cells[index].innerText.toUpperCase().indexOf(filter) > -1 ? '' : 'none';

       }

c＃背后的代码

Code Behind c#

protected void Page_Load(object sender, EventArgs e)
       {
           if (!IsPostBack)
           {
               DataTable dt = new DataTable();
               dt.Columns.Add("Column1");
               dt.Columns.Add("Column2");
               dt.Columns.Add("Column3");
               dt.Rows.Add("apple", "ant", "animal");
               dt.Rows.Add("bat", "ball", "bull");
               dt.Rows.Add("cat", "call", "con");
               dt.Rows.Add("dog", "doll", "dice");
               gv.DataSource = dt;
               gv.DataBind();
           }
       }

这篇关于使用标题行上的文本框过滤网格视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！