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

Question

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

背景：

我的.net项目中有一个.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>

网格视图上方有一个textbox和search按钮，因此我可以使用每个列中选中的一个值(通过jquery)过滤表。例如，假设表如下所示：

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

然后：

• 当我搜索"admin“一词时，它在搜索'item‘时返回1和3
• ，当我搜索'mylink’时它只返回2个
• ，它返回所有的行

等等。

这是我的函数，过滤表：

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

                }); 
            }

还有一个“清除”按钮，使用该函数移除所有过滤器：

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

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

Answer 1

与其使用.toggle()方法，不如使用CSS。更改：

trr.toggle();

至

trr.addClass("hidden");

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

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