javascript - 具有 1000 多行的 gridview 的切换/取消切换行的性能问题

Question

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

背景:

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

Answer 1

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

trr.toggle();

至

trr.addClass("hidden");

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

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