Функции работы с Grid
Полный список свойств и функций, а так же общие правила их использования, см. здесь: Краткий обзор и правила, список функций VcorpJS.
Функции плагина Grid VcorpJS доступны только ПОСЛЕ инициализации объекта VcorpJS, подробности: Подключение и инициализация VcorpJS
Табличный вывод данных Grid используется для справочников и списков данных. Grid - краткий обзор и правила.
Визуальный пример работы Гридов.
Grid-блоки используют обязательные CSS-классы (см. правила CSS для Grid).
См. Блок с примерами использования функций
Создание нового грида
.gridNew( parentNode , [ otherStyles ] , [ arrayHeadStyles ] , [ arrayBodyStyles ] , [ handler ] , [ arrayData ] , [ animation ] )
Создаёт новый Грид в родительском объекте (или в окне).
Вместе с созданием Грида создаётся визуальная тема - персональный тег <style> для каждого грида.
Визуальная персональная тема расширяет оформление, задаваемое обязательными CSS-классами для всех Grid.
Функция возвращает числовой descriptor созданного Грида (от 1) или undefined
------- Параметры :
parentNode - ссылка на родительский объект или его текстовый id или числовой descriptor окна VcorpJS ( 1 - 49 ).
otherStyles - строка произвольных CSS-классов со стилями, для Грида и/или HTML-объектов, которые могут находиться в ячейках Грида.
Строка является полным аналогом обычного CSS-файла, если параметр otherStyles указан, то CSS-тема для грида начинается с указанного содержимого.
arrayHeadStyles - одномерный массив строк со стилями (не классами!) для заголовков колонок,
стили нужно указывать по правилам CSS (например "width: 100px; color: #000080;" )
0 элемент массива - общие стили для всех заголовков, следующие элементы массива - персональные стили для заголовка каждой колонки.
Если массив arrayHeadStyles указан, то CSS-тема для Грида уточняется CSS-правилами для заголовка каждой колонки.
Сколько элементов содержит массив, столько заголовков (слева направо) будет уточнено указанными стилями.
arrayBodyStyles - одномерный массив строк со стилями (не классами!) для колонок,
стили нужно указывать по правилам CSS (например "font-weight: bold; font-style: italic;")
0 элемент массива - общие стили для всех колонок, следующие элементы массива - персональные стили для каждой колонки.
Если массив arrayHeadStyles указан, то CSS-тема для Грида уточняется CSS-правилами для каждой колонки.
Сколько элементов содержит массив, столько колонок (слева направо) будет уточнено указанными стилями.
handler - callback-функция, вызываемая как function( e, desc, type, row, col, objCell ), где:
- this указывает на Грид (класса .pb_g)
- e - объект события event (тип события только "click" или "dblclick")
- desc - дескриптор Грида (от 1 и выше)
- type - "click" или "dblclick", при других событиях callback-функция не вызывается.
- row - число - индекс строки (от 1)
- col - число - индекс колонки (от 1)
- objCell - ссылка на корневой DIV ячейки Грида ( содержит HTML-содержимое из элемента массива arrayData[row][col] )
callback - функция может быть текстовой строкой с JavaScript-кодом, в таком случае имена параметров внутри функции таковы: e, desc, type, row, col, objCell
(см. правила для callback - функций).
arrayData - двумерный массив данных, каждая ячейка данных имеет индекс [строка][колонка] == "HTML-код ячейки"
каждая строка - ссылка на одномерный массив с HTML-содержимым ячеек.
0 строка - одномерный массив с HTML-содержимым заголовков,
0 элементы каждого одномерного подмассива строки не используются.
animation - Если не указан или 0 или false, то анимировать прозрачность окна с Гридом (по умолчанию), иначе без анимации (быстрее отзывчивость страницы).
Загрузка данных в грид
.gridData( [ descriptor ] , arrayData )
Полностью обновляет содержимое Грида. Стилевая тема не меняется. Если Грид в окне, то активное окно не меняется, как и текущее состояние окна.
------- Параметры :
descriptor - число, номер, которое возвращает функция .gridNew() при создании нового Грида.
Если параметр не указан (тогда дескриптор 0) или Грид с таким дескриптором не найден, то функция возвращает строку с HTML-содержимым грида под дескриптором descriptor. Строка может пригодиться для хранения или для тестов.
Если грид найден, то его HTML-содержимое обновляется (через .innerHTML - так быстрее всего) и возвращается true
arrayData - двумерный массив данных, подробное описание см. выше - в описании параметров функции .gridNew()
Если параметр arrayData не указан, то функция ничего не делает и возвращает false
Смена CSS-темы грида
.gridStyle( descriptor , [ otherStyles ] , [ arrayHeadStyles ] , [ arrayBodyStyles ] )
Полностью заменяет тему Грида. Удаляет старый персональный тег <style> и создаёт новый.
Для каждого Грида всегда создаётся визуальная тема - персональный тег <style>
Визуальная персональная тема расширяет оформление, задаваемое обязательными CSS-классами для всех Grid.
------- Параметры :
descriptor - число, номер, которое возвращает функция .gridNew() при создании нового Грида.
Если параметр не указан (тогда дескриптор 0) или Грид с таким дескриптором не найден, то функция работает с тегом для грида 0 - это может пригодиться для тестов. Функция ничего не возвращает (undefined)
Подробное описание параметров otherStyles, arrayHeadStyles, arrayBodyStyles - см. выше - в описании параметров функции .gridNew()
Удаление грида
.gridDelete( descriptor )
Удаляет Грид и его персональный тег <style> (визуальную CSS-тему).
Возвращает true или false если грид не найден или некорректен (грубо испорчен недопустимыми прямыми действиями).
При удалении содержимое родителя parentNode очищается через .innerHTML="";
Для навигации по всем страницам этого раздела сайта используйте пиктограмму или ссылку Навигация в верхней строке навигации.
Демо - блок с примерами использования функций
Визуальный пример использования ряда плагинов (отдельная веб-страница), в котором продемонстрированы следующие возможности:
- объект управления событиями
- комбинированные списки выбора (combobox)
- анимационные меню
- вывод модального окна сообщения
- работа с окнами и панелью окон
- работа с Гридами (в статичном блоке и в окнах)
- работа плагина анимации
- возможно, что-то ещё...
См. исходный код страницы. На странице находятся базовые CSS-стили и JavaScript-код управления страницей с комментариями
(на всякий случай, сорри за оформление кода страницы - страница предназначена для теста Гридов и скорости браузеров, а не для красоты кода).
Ссылка на страницу: Визуальный пример некоторых плагинов