Проблема с производительностью при переключении / отключении строк в сетке, имеющей более 1000 строк

Question

ВОПРОС: Я использую toggle() в jquery для строк таблицы, чтобы показать только отфильтрованные данные пользователя.Когда мне нужно «отключить» строки, когда пользователь удаляет все фильтры, это занимает около 3-4 секунд, что недопустимо.Как я могу уменьшить его?

ПРЕДПОСЫЛКИ:

У меня есть GridView в моем проекте .net, который включает в себя более 1000 данных.Нет нумерации страниц. Мне разрешено использовать.

<asp:GridView ID="dgMenuItems" runat="server" ... >

                <asp:TemplateField HeaderText="Caption">  
                    <ItemTemplate>  
                        <asp:Label ID="lbl_Caption" runat="server" style="display:block;" Text='<%#Eval("Caption") %>'></asp:Label> 
                    </ItemTemplate>
                </asp:TemplateField> 
                <asp:TemplateField HeaderText="Link">  
                    <ItemTemplate>  
                        <asp:Label ID="lbl_Link" runat="server" style="display:block;" Text='<%#Eval("Link") %>'></asp:Label> 
                    </ItemTemplate>  
                </asp:TemplateField> 
                <asp:TemplateField HeaderText="LinkCaption">  
                    <ItemTemplate>  
                        <asp:Label ID="lbl_LinkCaption" runat="server" style="display:block;" Text='<%#Eval("LinkCaption") %>'></asp:Label>
                    </ItemTemplate>  
                </asp:TemplateField> 

</asp:GridView>

Над сеткой есть текстовое поле и кнопка поиска, поэтому я могу отфильтровать таблицу (через jquery ), используя одно проверяемое значениев каждом столбце.Например, предположим, что таблица выглядит следующим образом:

ID  Caption   Link     LinkCaption
 1  Admin     mylink1  Admin-Main
 2  Category  myLink2  Allitems
 3  Reports   myLink3  Report-Administrator

Затем:

• , когда я ищу слово «admin», оно возвращает 1 и 3
• когда я ищу слово 'item', он возвращает только 2
• , когда я ищу слово 'mylink', он возвращает все строки

etc ...

Это моя функция фильтрации таблицы:

function FilterTable() {

                var textToSearch=document.getElementById('MainContent_txtSearch').value;

                var $rows = $("tbody tr").each(function (index) {
                    var trr = $(this).closest('tr');
                    var caption = (trr.find('td:nth-child(3)').text().trim());
                    var link = (trr.find('td:nth-child(4)').text().trim());
                    var linkCaption = (trr.find('td:nth-child(5)').text().trim());

                    if (!(caption.toLowerCase().includes(textToSearch.toLowerCase()) || link.toLowerCase().includes(textToSearch.toLowerCase()) || linkCaption.toLowerCase().includes(textToSearch.toLowerCase()))) {
                        trr.toggle();
                    }

                }); 
            }

Также есть кнопка «CLEAR», удаляет все фильтры с помощью функции:

function ClearFilter() {
                var $rows = $("tbody tr").each(function (index) {
                    var trr = $(this).closest('tr');
                    if (!trr.is(":visible")) {
                        trr.toggle();
                    }
                });
            }

ClearFilter () занимает 3-4 секунды, когда мой GridView включает в себя более 1000 строк.Есть ли лучший (более быстрый) способ сделать это?

Answer 1

Вместо использования метода .toggle() используйте CSS.Измените:

trr.toggle();

на

trr.addClass("hidden");

Таким образом, ваша функция ClearFilter может быть значительно упрощена до:

function ClearFilter() {
    $(".hidden").removeClass("hidden");
}