JOTHI KUMAR Member 10918227 Ответов: 3

Asp.Net jQuery GridView Filter автозаполнение

привет всем,
я хочу выполнить поиск данных в gridview с помощью автозаполнения с помощью jquery.вот это мой jquery

<script type="text/javascript">
$(document).ready(function() {
      $('#txtID').keyup(function(event) {
            var searchKey = $(this).val().toLowerCase();
            $("#grdEmployee tr td:nth-child(1)").each(function() {
                  var cellText = $(this).text().toLowerCase();
                  if (cellText.indexOf(searchKey) >= 0) {
                        $(this).parent().show();
                  }
                  else {
                        $(this).parent().hide();
                  }
            });
      });
});
</script>



и мое текстовое поле :-

<asp:TextBox ID="txtcustid" runat="server" Width="100"></asp:TextBox>




<asp:GridView

   ID="grdEmployee"

   runat="server"

   AutoGenerateColumns="true"></asp:GridView>


выше код только поиск одного столбца в girdview теперь я хочу, как отфильтровать все столбцы в gridview.Пожалуйста, помогите мне в этом

3 Ответов

Рейтинг:
25

Krunal Rohit 

$(document).ready(function() {
      $('#txtID').keyup(function(event) {
            var searchKey = $(this).val().toLowerCase();
            $("#grdEmployee tr td").each(function() {
                  var cellText = $(this).text().toLowerCase();
                  if (cellText.indexOf(searchKey) >= 0) {
                        $(this).parent().show();
                  }
                  else {
                        $(this).parent().hide();
                  }
            });
      });
});

Должен работать :)

Здесь $("#grdEmployee tr td:nth-child(1)") ты получишь первый. td из каждого ряда. Вот почему он работает для первой колонки. Удалять :nth-child(1) и проверь, работает он или нет.

[Обновление - после комментария]
$("#txtID").keyup(function(){
    _this = this;
    $.each($("#grdEmployee tbody").find("tr"), function() {
        if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) == -1)
           $(this).hide();
        else
             $(this).show();
    });
});



-КРОНА

Richard Deeming

Закрыть - это покажет только те строки, где последняя ячейка в строке содержит текст, который должен быть сопоставлен. :)

Krunal Rohit

Решение обновлено.

-КРОНА

JOTHI KUMAR Member 10918227

спасибо Рохит его работа.предположим, если у меня есть какие-либо вопросы, я вернусь к вам спасибо всем.

Krunal Rohit

Рад, что смог помочь.

-КРОНА

JOTHI KUMAR Member 10918227

Эй Рохит выше скрипта его работа, но он также ищет столбец.но мне нужны только данные, а не столбец

Krunal Rohit

Данные находятся внутри столбца, верно ?

-КРОНА

JOTHI KUMAR Member 10918227

мне нужно искать внутри столбца но он будет искать в том числе столбец и еще один вопрос у меня есть 20 страниц но он будет искать только текущую страницу как решить эти две проблемы

Krunal Rohit

Смотрите, подкачка скрывает и отображает только выбранные записи. Решение, которое я предоставил, не будет работать для этого.
Я бы посоветовал вам использовать datatable.js за это. Погуглите об этом.
И я не получил этого: "мне нужно искать внутри столбца, но он будет искать в том числе столбец"

-КРОНА

Рейтинг:
2

Richard Deeming

Что-то вроде этого должно сработать:

$(document).ready(function() {
    $('#txtID').keyup(function(event) {
        var searchKey = $(this).val().toLowerCase();
        $("#grdEmployee tr").each(function() {
            var isMatch = $(this).children("td, th").is(function(){
                var cellText = $(this).text().toLowerCase();
                return cellText.indexOf(searchKey) >= 0;
            });

            if (isMatch) {
                $(this).show();
            }
            else {
                $(this).hide();
            }
        });
    });
});

Это использует jQuery is функция[^] чтобы проверить, содержит ли какой-либо из дочерних элементов указанный текст.

JOTHI KUMAR Member 10918227

жаль, что Ричард не будет работать к сожалению

Richard Deeming

Что значит "не работает" означает? Помните, я не могу видеть ваш экран. :)

JOTHI KUMAR Member 10918227

я получил ошибку в строке var ismatch в приведенном выше скрипте здесь я поставил предупреждение оно не сработает

Richard Deeming

Попробуйте изменить строку на:
var isMatch = $(this).children(...
(С помощью $(this) вместо того чтобы просто this.)

Рейтинг:
2

sribin

Небольшая модификация приведенного выше кода, чтобы не скрывать часть заголовка

$(document).ready(function () {
               $("#txtID").keyup(function () {
                   _this = this;
                   $.each($("#grdEmployee tbody").find("tr:has(td)"), function () {
                       if ($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) != -1)
                           $(this).show();
                       else
                       $(this).hide();

                   });
               });
           });