Функции работы с 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.

------- Параметры :

Подробное описание параметров otherStyles, arrayHeadStyles, arrayBodyStyles - см. выше - в описании параметров функции .gridNew()

Удаление грида

.gridDelete( descriptor )

Удаляет Грид и его персональный тег <style> (визуальную CSS-тему).

Возвращает true или false если грид не найден или некорректен (грубо испорчен недопустимыми прямыми действиями).

При удалении содержимое родителя parentNode очищается через .innerHTML="";

Для навигации по всем страницам этого раздела сайта используйте пиктограмму или ссылку Навигация в верхней строке навигации.

Демо - блок с примерами использования функций

Визуальный пример использования ряда плагинов (отдельная веб-страница), в котором продемонстрированы следующие возможности:

объект управления событиями
комбинированные списки выбора (combobox)
анимационные меню
вывод модального окна сообщения
работа с окнами и панелью окон
работа с Гридами (в статичном блоке и в окнах)
работа плагина анимации
возможно, что-то ещё...

См. исходный код страницы. На странице находятся базовые CSS-стили и JavaScript-код управления страницей с комментариями
(на всякий случай, сорри за оформление кода страницы - страница предназначена для теста Гридов и скорости браузеров, а не для красоты кода).

Ссылка на страницу: Визуальный пример некоторых плагинов