Таблица 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');
}
});
}
}
Я бы попробовал следующее для стартеров: добавьте в родительский div те классы, которые отмечены #YOURCONTAINERDIV. Я также добавил toggleClass для вашего класса add/remove.
Мне интересно эту строку кода: Можете ли вы объяснить, почему цикл уровня, а затем сделать.each через коллекцию '.detailLevel' + i. Я думаю, что многое из вашей проблемы здесь.
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 );
}
});
}
}
В приведенном выше скрипте есть несколько высокопроизводительных свиней. Селекторы jQuery с только именами классов CSS и ненужным переключением многих имен классов выпрыгивают немедленно.
Используйте также имя тега при выборе для имен классов ($('tr.dataRow').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
.