2014-12-21 4 views
4

В процессе создания html-версий приложения, а одна часть - таблица, которая может содержать много ячеек.HTML-таблица - стиль отдельных тысяч ячеек

вокруг: 150 колонн, с легкостью до 10000 рядов.

Вопрос - это производительность, и что было бы порядочным, если бы можно было стилизовать каждую ячейку на основе контента?

так в каждой ячейке является числом, а цвет фона заполняются на основании процента, что число помещается в

, например:. Имеют полосатость

77-100 = red 
33 - 77 = blue 
0 < 33 = green 
0 = black 

, что я попробовал на небольшой table дает класс каждому, что я хотел бы его покрасить. (цвет является изменяемым пользователем, поэтому установка класса, должен иметь возможность изменить определение класса)

так что получить что-то вроде этого:

<tr> 
    <td class='percentile-100'>87.5%</td> 
    <td class='percentile-77'>75.0%</td> 
    <td class='percentile-0'>0.0%</td> 

и в CSS, задать стиль для классов. требуется только 4 стиля.

теперь с (150 * 10 000 =) 1 500 000 ячеек, чтобы быть стильным, я думаю, какое влияние может быть.

Таблица создается из JavaScript с данными. Но да данные в области MB. Таблица, отображаемая на стороне клиента. Так как рендеринг, решает, какое значение класса установить.

Какие еще возможные способы стилизации каждой ячейки на основе контента?

+1

Даже с ячейками 1.5M вы все еще говорите о 101 процентили классов. Я лично считаю, что это было бы лучше, чем 1,5M в стиле линии цвета фона. – rfornal

+1

Я бы предложил назначить классы на стороне сервера, а не передавать эту задачу потенциальным мобильным устройствам с относительно небольшим объемом оперативной памяти (мне было бы неловко видеть, что это будет с моим iPad Air, всего лишь 1 гб, для пример. И имейте в виду, что пользовательский интерфейс любой таблицы со 10000 строками (вероятно, будет) болезненным. –

+2

На самом деле, встроенные стили будут отображаться быстрее в браузере с меньшей нагрузкой, чем с использованием классов. Но это по-прежнему кажется действительно ужасным пользователем интерфейса (если только вы просто не пытаетесь поместить блоки цвета на экран, и в этом случае вы должны использовать изображение с холстом или сервером) – symcbean

ответ

0

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

Короче говоря, если вы беспокоитесь, вам потребуется много времени, чтобы стилизовать все ячейки, вы, вероятно, не должны загружать так много сразу. Может захотеть посмотреть в AJAX pagination.

Смежные вопросы