具有 1000 多行的 gridview 的 toggle/untoggle 行的性能问题

Question

问题： 我在 jquery 的 table 行中使用 toggle() 来仅向用户显示过滤后的数据。当我需要 "untoggle" 用户删除所有过滤器时的行时，大约需要 3-4 秒，这是 unacceptable。我怎样才能减少它？

背景：

我的 .net 项目中有一个 GridView，其中包含 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>

gridview 上方有一个文本框和搜索按钮，所以我可以使用一个被检查的值过滤掉 table（通过 jquery）在每一列中。例如，假设 table 如下所示：

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

然后：

当我搜索单词 "admin" 时，它 returns 1 和 3
当我搜索单词 'item' 时，它 returns 只有 2
当我搜索单词 'mylink' 时，它 returns 所有行

等...

这是我过滤 table:

的函数

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();
                    }
                });
            }

当我的 GridView 包含 1000 多行时，ClearFilter() 需要 3-4 秒。有更好（更快）的方法吗？

Answer 1

不使用 .toggle() 方法，而是使用 CSS。变化：

trr.toggle();

到

trr.addClass("hidden");

这样，您的 ClearFilter 函数可以大大简化为：

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

具有 1000 多行的 gridview 的 toggle/untoggle 行的性能问题

Performance issue on toggle/untoggle rows of a gridview having 1000+ rows

html

javascript

asp.net

jquery

gridview