jQuery показывает/скрывает столбец на большой производительности таблицы

вот код, который я использовал, чтобы скрыть "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-переключатель "показать / скрыть";

кажется, что он показывает / скрыть столбец из 400 строк за 1 секунду ...

Борик

Вы можете многое сделать в области кэширования. Для начала, кешируйте свой контейнер gridView:

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

И затем можно кэшировать строку:

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

Кроме того, выполняйте фактическое скрытие с использованием набора, а не .each ()

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

Кэширование наборов элементов заранее, а не многократные запросы к DOM с помощью $ и выполнение действий с наборами элементов, а не с циклами, могут иметь большое значение для производительности.

Очевидно, эта альтернатива более удобна для отображения и скрытия элементов:

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

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

Но я подозреваю, что ваша настоящая проблема - это цикл.

Могу я предложить что-то вроде этого?

$(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();
    }
}

Я думаю, что проблема в вашем цикле. Вы перебираете каждое -е в таблице. Если вы хотите найти только определенные, почему бы просто не перебрать те, которые хотите найти?

Итак, вот что происходит именно здесь. При нажатии кнопки «показать» (или «скрыть») мы перебираем массив заголовков, вызывая ToggleHeadVisibility.

В этой функции мы получаем индекс первого элемента с данным заголовком, а затем показываем или скрываем узлы nth-child (x).

Я запускал его на таблице с 6 столбцами, показывая и скрывая по 3 за раз, и более 1000 строк. Это довольно быстро для того, что делает.

Обратите внимание, что если ваши заголовки не уникальны, он найдет только первый в таблице.

Итерация по строкам и столбцам всегда замедляет работу. Попробуйте манипулировать правилами CSS напрямую, чтобы избежать повторения в вашем JavaScript и заставить браузер делать это за вас.

Проверьте плагины jQueryRule и jQueryCSSRule .

Прямое манипулирование правилами CSS может быть полезным, если вы объедините все правила. Вот быстрый тест с 500 строками и 50 столбцами. Большая часть времени уходит на повторный рендеринг, а время, потраченное на функцию JavaScript, дает мне в среднем 200–300 мс в Chrome и 0 мс в Firefox. В настоящее время он использует стандартные API-интерфейсы, но распространить это на IE тривиально.

Он работает путем создания нового узла