TCS54321 Ответов: 1

Фильтрация с помощью jquery не работает нормально во вложенном gridview in ASP.NET


У меня есть вложенный gridview, и я пытаюсь отфильтровать строки gridview с помощью текстового поля поиска с помощью jquery.

Вот мой код:-
<input type="text" id="SearchGV" class="SearchTextBox" placeholder="Type to Search" />

<asp:GridView ID="gvdata" runat="server" AutoGenerateColumns="false" border="0" DataKeyNames="Id" CssClass="SearchGridViewData">
<Columns>
    <asp:BoundField HeaderText="S.No." DataField="SNo" ItemStyle-Width="20px" />
    <asp:TemplateField ItemStyle-Width="20px">
    <ItemTemplate>
        <a href="JavaScript:shrinkandgrow('div<%# Eval("Id") %>');">
            <img alt="Details" id="imgdiv<%# Eval("Id") %>" src="/images/plus.png" />
        </a>
        <div id="div<%# Eval("Id") %>" style="display: none;"> 
            <asp:GridView ID="gvinnerdata" runat="server" AutoGenerateColumns="false" DataKeyNames="Id" >
            <Columns>
                <asp:TemplateField HeaderText="SOPID" Visible="true">
                <ItemTemplate>
                    <asp:Label ID="lblId" runat="server" Text='<%# Bind("Id") %>'></asp:Label>
                </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField HeaderText="Name" DataField="Name" />
            </Columns>                                                
            </asp:GridView>
        </div>
    </ItemTemplate>
    </asp:TemplateField>
</Columns>
</asp:GridView>

Мой jquery работает нормально, но я сталкиваюсь с двумя проблемами.
  1. При фильтрации вложенный заголовок gridview также скрывается.
  2. Фильтрация не работает, если я набираю текстовое поле после того, как разверну gridview.

Может ли кто-нибудь подсказать мне решение?

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

var $rows1 = $('.SearchGridViewData tbody tr');
$('.SearchTextBox').keyup('input', function () {
    var val1 = $.trim($('.SearchTextBox').val()).replace(/ +/g, ' ').toLowerCase();
    $rows1.show().filter(function () {
        var text1 = $(this).find('td:nth-child(n)').text().replace(/\s+/g, ' ').toLowerCase();

        return ! ~text1.indexOf(val1) ;
    }).hide();
});

F-ES Sitecore

Как выглядит "shrinkandgrow"?

TCS54321

это только для отображения плюсового и минусового изображения при расширении gridview. вы просто игнорируете эту функцию.

1 Ответов

Рейтинг:
7

Richard Deeming

Ваш селектор строк выбирает каждый tr в tbody внутри вашего SearchGridViewData элемент.

Вложенная сетка находится внутри tbody из внешней сетки. Поэтому он соответствует селектору.

Попробуйте изменить селектор для выбора tr элементы, которые являются непосредственными потомками tbody вместо:

var $rows1 = $('.SearchGridViewData tbody > tr');
Там также нет смысла использовать :nth-child(n), так как это просто выбирает всех детей. С помощью td поскольку ваш селектор будет иметь тот же эффект.
var text1 = $(this).find('td')...

NB: Вместо того чтобы писать:
return ! ~text1.indexOf(val1) ;
было бы гораздо яснее написать:
return text1.indexOf(val1) !== -1;


TCS54321

tnx за Вашу поддержку. вы можете работать на меня.