0

html 表在树型视图中有 4 级层次结构。为了让用户控制展开/折叠到任何级别，使用了以下函数。但是这个函数在 IE8 上执行需要超过 6 秒。在 Chrome 中花费了一半的时间。有关如何加快此功能的任何建议？谢谢

function showDetailLevel(level) {
    /*hide all the tr*/
    $('.dataRow').each(function() {
        $(this).hide();
    });
    /*collapse all the carets*/
    $('.detailsCarat').each(function() {
        if ($(this).hasClass('ui-icon-triangle-1-s')) {
            $(this).removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
        }                       
    }); 
    /*show the rows and expand all the carets that are at a tree level above the selected level*/
    for (var i=1; i<=level;i++) {   
        $('.detailLevel'+i).each(function() {
            $(this).show();
            if (i<level) {
                $(this).find('span.ui-icon-triangle-1-e').removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s');
            }
        }); 
    }   
}
4

2 回答 2

1

上面的脚本中有几个性能猪。只有 CSS 类名的 jQuery 选择器和许多类名的不必要切换会立即跳出。

选择类名 ( ) 时也要使用标签名$('tr.dataRow').each...。

each 语句是不必要的，但可能不会比更简洁的脚本慢多少，除非我们考虑使用标签名称：

$('tr.dataRow').hide();

/*collapse all the carets*/
$('span.detailsCarat').toggleClass('ui-icon-triangle-collapsed');

更重要的是，尽可能只切换一个类名以避免回流（何时在 DOM 环境中发生回流？）。这是关键。您的 HTML 应该以这样一种方式嵌套，即您可以在容器元素中切换单个 CSS 类并利用 CSS 选择器来完成您需要的所有操作：隐藏、显示和更改外观。例如，适用的任何样式规则都'ui-icon-triangle-1-s'应该在带有选择器的规则中，例如div.container.active .ui-icon-triangle-1.

于 2013-09-17T23:19:02.230 回答
1

对于初学者，我会尝试以下操作：将父 div 添加到#YOURCONTAINERDIV 所指出的那些类中。我还为您的添加/删除类添加了 toggleClass。

我对这行代码很好奇：你能解释一下为什么是 level 循环，然后通过 '.detailLevel' + i 的集合做一个 .each 吗？我想你的很多问题都在这里。

for (var i=1; i<=level;i++) { 
    $('.detailLevel'+i).each(function() {
        $(this).show();

 function showDetailLevel(level) {
      /*hide all the tr*/
         $('#YOURCONTAINERDIV .dataRow').each(function() {
         $(this).hide();
});
/*collapse all the carets*/
$('#YOURCONTAINERDIV.detailsCarat').each(function() {
    if ($(this).hasClass('ui-icon-triangle-1-s')) {
        $(this).removeClass('ui-icon-triangle-1-s').toggleClass( ui-icon-triangle-1-e, ui-icon-triangle-1-s );                    
}); 
/*show the rows and expand all the carets that are at a tree level above the selected level*/
for (var i=1; i<=level;i++) {
    // I suspect a big issue is here as you are looping, then looping again thru
    // a collection of elements. 
    $('.detailLevel'+i).each(function() {
        $(this).show();
        if (i<level) {
            $(this).find('span.ui-icon-triangle-1-e').toggleClass( ui-icon-triangle-1-e, ui-icon-triangle-1-s );
        }
    }); 
}

}

于 2013-09-17T23:26:34.997 回答