[英]html multiple levels of expand collapse for table with many rows is slow
html table has 4 levels of hierarchy in a tree type view. html表在树类型视图中有4级层次结构。 To give user a control to expand/collapse to any level, the following function is used.
要为用户提供扩展/折叠到任何级别的控件,请使用以下函数。 But this function takes more than 6 seconds to execute on IE8.
但是这个函数在IE8上执行需要6秒以上。 It takes half of that time in Chrome.
Chrome需要一半的时间。 Any suggestions for how to speed this function up?
有关如何加快此功能的任何建议? Thanks
谢谢
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');
}
});
}
}
There are several performance hogs in the above script. 上面的脚本中有几个性能值很高。 The jQuery selectors with only CSS class-names and the unneeded toggling of many class-names jump out immediately.
只有CSS类名的jQuery选择器和许多类名的不需要的切换会立即跳出。
Use a tag-name as well when selecting for class-names ( $('tr.dataRow').each...
). 在选择类名时也使用标签名(
$('tr.dataRow').each...
)。
The each statements are unnecessary, but probably not that much slower than the more concise script unless we consider using the tag names: 除非我们考虑使用标记名称,否则每个语句都是不必要的,但可能不会比更简洁的脚本慢得多:
$('tr.dataRow').hide();
/*collapse all the carets*/
$('span.detailsCarat').toggleClass('ui-icon-triangle-collapsed');
More important, toggle just a single class-name wherever possible to avoid reflows ( When does reflow happen in a DOM environment? ). 更重要的是,尽可能切换单个类名以避免重排( 在DOM环境中何时进行重排? )。 This is key.
这是关键。 Your HTML should be nested in such a way that you can toggle a single CSS class in a container element and leverage CSS selectors to accomplish all that you need: hiding, showing, and changing appearances.
您的HTML应该以这样的方式嵌套:您可以在容器元素中切换单个CSS类,并利用CSS选择器来完成所需的一切:隐藏,显示和更改外观。 For example, whatever style rules apply to
'ui-icon-triangle-1-s'
should be in a rule with a selector such as div.container.active .ui-icon-triangle-1
. 例如,适用于
'ui-icon-triangle-1-s'
任何样式规则应该在带有选择器的规则中,例如div.container.active .ui-icon-triangle-1
。
I'd try the following for starters: Add in the parent div to those classes as noted by #YOURCONTAINERDIV. 我会为初学者尝试以下方法:将父div添加到#YOURCONTAINERDIV所指出的那些类中。 I also added toggleClass for your add/remove class.
我还为你的add / remove类添加了toggleClass。
I am curious about this line of code: Can you explain why the loop of level, then doing an .each thru the collection of '.detailLevel' + i. 我很好奇这行代码:你能解释为什么级别的循环,然后通过'.detailLevel'+ i的集合做一个.each。 I think alot of your issue is here.
我想你的问题很多。
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 );
}
});
}
} }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.