Grid - краткий обзор и правила
Полный список свойств и функций, а так же общие правила их использования, см. здесь: Краткий обзор и правила, список функций VcorpJS.
Функции плагина Grid VcorpJS доступны только ПОСЛЕ инициализации объекта VcorpJS, подробности: Подключение и инициализация VcorpJS
Табличный вывод данных Grid используется для справочников и списков данных. Визуальный пример работы Гридов.
VcorpJS Grid может находиться в любых блочных элементах, в том числе в окнах с изменяемыми размерами и положением на веб-странице (в модальных тоже).
Размещение данных в окнах VcorpJS позволяет легко реализовать RIA-интерфейс CRM-систем, не вникая в технические тонкости по реализации и организации управления окнами и навигации по справочникам. Автоматически поддерживаются сенсорные экраны.
Таким образом, VcorpJS предоставляет максимально простую, гибкую и быструю альтернативу существующим фреймворкам и плагинам, упрощая разработку и помогая в управлении сложными современными веб-интерфейсами. См. подробнее Функции для работы с Grid.
Grid-блоки используют обязательные CSS-классы (см. правила CSS для Grid).
| Grid - функция | Назначение |
|---|---|
| .gridNew(...) | Создаёт новый Грид и возвращает descriptor |
| .gridData(descriptor, array) | Загрузка новых данных в Грид |
| .gridStyle(descriptor, ...) | Смена стилей ( темы ) Грида |
| .gridDelete(descriptor) | Удаление Грида |
Способы повышения скорости браузеров
При работе с веб - Гридами самая критичная часть - отзывчивость веб-страницы, или комфорт работы, без «подвисаний» и «задумчивости» браузера.
Проблему задержек можно разделить на 2 основные части:
- задержки при подгрузке больших объёмов данных с сервера,
- задержки при формировании и обновлении Грида на клиенте.
С первой частью вроде всё ясно, важна скорость интернет-канала и степень нагрузки на сервер.
Скорее всего данные подгружаются в виде JSON-строки или в другом удобном формате
(вместо сервера, или параллельно с сервером, может использоваться десктопное приложение с веб-движком).
Если проблему нагрузки на сервер любая организация может решить простым увеличением мощности оборудования, то проблемы клиентских устройств вряд-ли получится решить покупками оборудования своим потенциальным клиентам :)
Значит, на клиенте нужно подробнее разбираться в работе браузеров. Если коротко, то создавать Грид можно двумя способами:
- через сборку HTML-строки с последующей .innerHTML - вставкой,
- через DOM-операции добавления объектов.
При создании объёмных Гридов DOM-операции значительно проигрывают по скорости отображения изменений (на мобильных в 10 и более раз с ростом объёма). Разумеется, небольшие изменения внутри Грида часто проще делать через DOM-операции, но результат изменения большого объёма данных рендерится браузерами значительно быстрее при использовании .innerHTML - вставок ( или вариантом .insertAdjacentHTML() ).
Речь идёт про скорость рендеринга (отображения изменений), а не скорость работы JavaScript-кода по модификации DOM или сборке строк. Рендеринг - то самое узкое место, от скорости которого зависит отзывчивость страницы и комфорт работы пользователя.
VcorpJS - Grid максимально оптимизирован под различные браузеры (включая мобильные устройства) и позволяет вполне комфортно работать с довольно большими таблицами данных (несколько десятков тысяч ячеек на десктопных компьютерах, несколько тысяч ячеек на мобильных). Причём комфортная работа достигается в реальных условиях, а не только в «синтетических тестах», что любят показывать некоторые разработчики. Вы можете посмотреть максимально приближенный к реальным условиям работы пример с подробным описанием здесь: Тест скорости браузеров - Гриды, заодно протестировав свои устройства и браузеры.
Для навигации по всем страницам этого раздела сайта используйте пиктограмму или ссылку Навигация в верхней строке навигации.
Демо - блок с примерами использования функций
Визуальный пример использования ряда плагинов (отдельная веб-страница), в котором продемонстрированы следующие возможности:
- объект управления событиями
- комбинированные списки выбора (combobox)
- анимационные меню
- вывод модального окна сообщения
- работа с окнами и панелью окон
- работа с Гридами (в статичном блоке и в окнах)
- работа плагина анимации
- возможно, что-то ещё...
См. исходный код страницы. На странице находятся базовые CSS-стили и JavaScript-код управления страницей с комментариями
(на всякий случай, сорри за оформление кода страницы - страница предназначена для теста Гридов и скорости браузеров, а не для красоты кода).
Ссылка на страницу: Визуальный пример некоторых плагинов