HTML несколько уровней развернуть свернуть для таблицы с большим количеством строк медленно

Question

HTML несколько уровней развернуть свернуть для таблицы с большим количеством строк медленно

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

user2760273 18 сен. 2013, в 01:08

Источник

Теги:

javascript

jquery

html

2 ответа

Ещё вопросы

james emanon · Answer 1 · 2013-09-17T21-00-00.000Z

Я бы попробовал следующее для стартеров: добавьте в родительский 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 );
        }
    }); 
}

}

спасибо за предложение. Этот фрагмент, который, по вашему мнению, является проблемой, используется, когда пользователь выбирает просмотр уровня 3, а затем показывает строки на уровне 1, уровень2, уровень3. Необходимо показать все строки на уровнях, которые ниже, чем то, что выбирает пользователь.
хм, в jQuery вы можете выбрать диапазон элементов, чтобы показать, что "может" быстрее. Я проверю позже, и если вы думаете, что это дорога, по которой вы хотите идти, и не поняли, я постараюсь помочь вам в дальнейшем.

cage rattler · Answer 2 · 2013-09-17T20-41-00.000Z

В приведенном выше скрипте есть несколько высокопроизводительных свиней. Селекторы 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.