具有 1000 多行的网格视图的切换/取消切换行的性能问题

Posted 2023-05-08

【中文标题】具有 1000 多行的网格视图的切换/取消切换行的性能问题

【英文标题】：Performance issue on toggle/untoggle rows of a gridview having 1000+ rows

【发布时间】：2020-01-27 23:39:36

【问题描述】：

问题：我在 jquery 中对表格行使用 toggle() 来向用户显示仅过滤的数据。当我需要在用户删除所有过滤器时“取消切换”行时，大约需要 3-4 秒，这是不可接受的。我怎样才能减少它？

背景：

我的 .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 上方有一个文本框和搜索按钮，因此我可以使用在每一列中检查的一个值来过滤表格（通过 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”这个词时，它会返回所有行

等等……

这是我过滤表格的函数：

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 秒。有没有更好（更快）的方法来做到这一点？

【问题讨论】：

您是否尝试过使用类而不是.toggle()？例如trr.addClass("hidden")，然后只是 $(".hidden").removeClass("hidden") - 没有自己测试过，所以不确定它可能会降低多少速度

@user7290573 天哪，我不敢相信我没有想到这一点。工作速度非常快。谢谢！添加它作为答案，我会选择正确的。

没问题！已添加。

【参考方案1】：

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

trr.toggle();

到

trr.addClass("hidden");

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

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