时间戳

首页 > 解决方案 > 具有 1000 多行的网格视图的切换/取消切换行的性能问题

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

问题描述

问题：我toggle()在 jquery 中使用表行来向用户显示仅过滤的数据。当我需要在用户删除所有过滤器时“取消切换”行时，大约需要 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

然后：

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

当我的 GridView 包含 1000 多行时，ClearFilter() 需要 3-4 秒。有没有更好（更快）的方法来做到这一点？

标签： javascriptjqueryhtmlasp.netgridview

解决方案

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

trr.toggle();

到

trr.addClass("hidden");

这样，您的ClearFilter功能可以大大简化为：

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

推荐阅读