Member 13078688 Ответов: 1

Фильтрация представления сетки с помощью текстового поля в строке заголовка

Привет,

я создал код, который фильтрует представление сетки с помощью текстового поля внутри представления сетки. он работает, если я помещаю текстовое поле вне вида сетки и фильтрую все строки и столбцы внутри сетки вместе.

Тем не менее, я хочу, чтобы фильтр определенного столбца в табличном представлении с помощью текста находится окно в строку заголовка, это не работает!!

код:

в текстовом поле, которое находится внутри представления сетки, я создал функцию onkeyup следующим образом: 

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

затем после просмотра сетки я создал скрипт следующим образом :
<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>


как сделать фильтрацию конкретного столбца представления сетки с помощью текстового поля, помещенного внутри представления сетки ?

Что я уже пробовал:

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

Karthik_Mahalingam

разместите код разметки gridview

1 Ответов

Рейтинг:
2

Karthik_Mahalingam

проверить это
Поиск записей GridView (данных) в текстовом поле столбца нажатие клавиши с помощью jQuery in ASP.Net[^]

или попробуйте это
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
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';

       }


Код с#
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();
           }
       }