Question

我的html表有大约30列，大约在10到500行之间。我想按一下按钮来显示/隐藏一组列。

我尝试了两种方法

遍历表格，并在TH和TD上执行.show（）或.hide（）。
遍历表的thead th并更改类以显示/隐藏TH和TD。

该功能实现为以下代码段。但是，性能并不是那么好。显示/隐藏说20列可能需要大约5~10秒，可能有80~120行数据。

我只是想知道我们能做些什么来让它变得更快。

function ToggleHeadVisibility(showHide) {

    var index = 0;

    $('#' + gridViewName + ' thead th').each(function(index) {
        index++;
        if (showHide == "SHOW") {
            /*
            $('#' + gridViewName + ' th:nth-child(' + (index) + ')').show();
            $('#' + gridViewName + ' td:nth-child(' + (index) + ')').show();
            */
            $('#' + gridViewName + ' th:nth-child(' + (index) + ')').removeClass('columnHide');
            $('#' + gridViewName + ' td:nth-child(' + (index) + ')').removeClass('columnHide');
        } else if (showHide = "HIDE") {
            /*
            //if (showColumnArray.has($(this).get(0).innerHTML)) {
            if (showColumnArray.has($(this).attr('title'))) {
            $('#' + gridViewName + ' th:nth-child(' + (index) + ')').show();
            $('#' + gridViewName + ' td:nth-child(' + (index) + ')').show();
            }
            else {
            $('#' + gridViewName + ' th:nth-child(' + (index) + ')').hide();
            $('#' + gridViewName + ' td:nth-child(' + (index) + ')').hide();
            }
            */
            if (showColumnArray.has($(this).attr('title'))) {
                $('#' + gridViewName + ' th:nth-child(' + (index) + ')').removeClass('columnHide');
                $('#' + gridViewName + ' td:nth-child(' + (index) + ')').removeClass('columnHide');
            } else {
                $('#' + gridViewName + ' th:nth-child(' + (index) + ')').addClass('columnHide');
                $('#' + gridViewName + ' td:nth-child(' + (index) + ')').addClass('columnHide');
            }

        }
    });
}

Answer 1

一些建议：

在构建表格时，将col1, col2, col3等css类添加到标题和数据单元格中。然后你可以$("td.col1").hide();隐藏相应的列。它比第n个子选择器快。
在IE和Firefox中，您可以将visibility: collapse设置为col元素以折叠整个列。这会快得多。遗憾的是，Webkit浏览器http://www.quirksmode.org/css/columns.html不支持。您可以根据浏览器分支代码，以便至少在IE和Firefox中快速。
如果您的表格有table-layout: fixed，则可能会显着提高效果，因为您的浏览器无需像每次触摸表格那样继续计算列的宽度，就像在自动模式下一样。“ p>
考虑从DOM树中删除表（通过.remove()），执行批量显示/隐藏操作并将其重新插入。这是一般规则，只要您想在DOM树上执行批量操作

Answer 2

显然，这种替代方案对于显示和隐藏元素来说有点过分了：

.css({'display':'none'}) & .css({'display':'block'});

http://www.learningjquery.com/2010/05/now-you-see-me-showhide-performance

但我怀疑你的真正问题是那个循环。

Answer 3

这是我用来隐藏网格中“第n”列的代码的和平...

  if (true) {
      $('th:nth-child(' + c + ')').show();
      $('td:nth-child(' + c + ')').show();                           
  }
  else {
      $('th:nth-child(' + c + ')').hide();
      $('td:nth-child(' + c + ')').hide();                          
  }

与你的非常相似，除了我使用jQuery切换“show / hide”;

它似乎在1秒内显示/隐藏400行的列...

Borik酒店

Answer 4

你可以在缓存领域做很多事情。对于初学者，请缓存gridView容器：

var gridView = $('#' + gridViewName);

随后可以缓存一行：

var row[0] = gridView.find('tr:nth-child(0)'); // Not sure the path is right, but you get the idea...

另外，使用set而不是.each（）

执行实际的隐藏

row[0].addClass('columnHide'); // Calls addClass() on each element in the set

预先缓存元素集，而不是用$重复查询DOM，并且对元素集而不是循环执行操作可以在性能方面取得很大进展。

Answer 5

通过行和列进行迭代总是会减慢速度。尝试直接操作CSS规则以避免JavaScript中的迭代并强制浏览器为您执行此操作。

查看插件jQueryRule和jQueryCSSRule。

如果将所有规则组合在一起，直接操作CSS规则会很有用。这是一个quick test，包含500行和50列。大多数时间花在重新渲染上，在JavaScript函数中花费的时间在Chrome上平均为200-300 ms，在Firefox上为0 ms。目前它正在使用标准API，但将其扩展到IE是微不足道的。

它的工作原理是在文档中创建一个新的<style>节点，并在那里添加所有列操作。关键的想法是在隐藏某些列时将所有规则合并为一个。所以不要这样做：

table tr :nth-child(1) { display: none; }
table tr :nth-child(4) { display: none; }
table tr :nth-child(7) { display: none; }

它确实：

table tr :nth-child(1), table tr :nth-child(4), table tr :nth-child(7) {
    display: none;
}

如果必须显示所有列，请删除隐藏特定列的上述规则。

Answer 6

我可能会建议这样的事情吗？

$(function() {
    $('#show').click(function() {
        var i;
        for (i = 0; i < titles.length; i++)
        {
            ToggleHeadVisibility('SHOW', titles[i]);
        }
    });

    $('#hide').click(function() {
        var i;
        for (i = 0; i < titles.length; i++)
        {
            ToggleHeadVisibility('HIDE', titles[i]);
        }
    });
});

var titles = ['one', 'three', 'five'];

function ToggleHeadVisibility(showHide, title)
{
    var x = $('th[title=' + title + ']').index();
    var selectString = 'th:nth-child(' + (x + 1) + '), td:nth-child(' + (x + 1) + ')';
    var $set = $(selectString);

    if (showHide === "SHOW")
    {
        $set.show();
    }
    else if (showHide === "HIDE")
    {
        $set.hide();
    }
}

我认为事实上，你的循环就是麻烦。您正在迭代表中的每个 th 。如果你只想找到特定的，为什么不迭代你想要找到的？

所以，这里发生的正是如此。单击“show”（或“hide”）按钮，我们遍历titles数组，调用ToggleHeadVisibility。

在该函数中，我们获得具有给定标题的第一个元素的索引，然后显示或隐藏第n个子节点（x）。

我在一个有6列的桌子上运行它，一次显示和隐藏3个，超过1000行。对于它正在做的事情来说，这很快。

请注意，如果您的标题不是唯一的，它只会找到表格中的第一个。

jQuery显示/隐藏大表性能列

6 个答案: