Работа с таблицами

В системе существуют два типа таблиц:

  • Статические
  • Динамические

Контейнер [[column]]

У таких блоков есть разнообразные свойства:

  • type — тип поля
  • name — имя поля
  • table — название таблицы к которому поле принадлежит
  • th — атрибуты в секции таблицы
  • thclass — класс в секции таблицы
  • params — атрибуты в td
  • tags — атрибуты в td
  • path — используется в некоторых типах как ссылка
  • pathGroup — используется в некоторых типах как ссылка
  • modalSize — для задания размеров модального окна
  • modalTitle — для задания заголовка модального окна
  • target — используется для ссылок, как атрибут target
  • colspan — Задание colspan атрибута td
  • lock — для блокировки поля на редактирование

Типы колонок

По умолчанию тип пустой и автоматически определяется системой, но вы можете переопределить стандартное поведение системы:

  • td — тип поля по умолчанию
  • link — поле с ссылкой
  • num — для нумераций
  • image — для изображений
  • image_link — для изображений с ссылкой
  • checkbox — для checkbox редактируемого
  • checkView — для отображения булевого типа в виде checkbox readonly
  • radio — для radio типа
  • favorite — для отображения булевого типа в виде звездочки
  • attachment — для отображения булевого типа в виде скрепки
  • icq — для отображения icq
  • color — для отображения цвета
  • skype — для отображения skype
  • phone — для отображения телефона
  • mail, email — для отображения e-mail
  • url — для отображения ссылки
  • geopoints — для отображения геокоординат
  • textarea — для отображения многострочного текста
  • html — для отображения html текста
  • datetime — для отображения даты и времени
  • time — для отображения времени
  • date — для отображения даты
  • double — для числа
  • price — для цены
  • qty, quantity — для количества
  • percent — для процентного отображения
  • rating — для рейтинга

Так же существуют типы для различных действий из которых система автоматически показывает ([[edit]]):

  • edit — для редактирования
  • delete — для удаления в корзину
  • restore — для восстановления из корзины
  • wipe — для полного удаления

Статические

Такие таблицы используются в основном в формах EnList и Select. Используется для вывода основных табличных данных. Работает с EntrySet

Основной вид:

main table list

У таблицы есть:

  • Действия для несколько выбранных строк
  • Действия для каждой строки
  • Сортируемые колонки
  • Показать/Скрыть колонки
  • Экспорт данных

Действия для несколько выбранных строк

multiselect

Скрыть выбор/ Показать выбор — показывает или скрывает возможность выбора несколько строк сразу
Удалить в корзину, Восстановить из корзины, Удалить из корзины — действия над записями.

При выборе нескольких сразу и выполнив определенное действие, откроется модальное окно:

muty action delete

Нажмите кнопку действий(на данном скриншоте удаление в корзину и соответсвенно клавишу удалить):

delete complete

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

Действия для каждой строки

Если над каждым эелементом можно совершать какие-то действия, то в последней колонке появится меню возможных действий:

single action menu

Пункты меню и действия могут отличаться.

Сортируемые колонки

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

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

Показать/Скрыть колонки

Для каждой таблицы можно настроить отображение колонок. Все сохранение применяются в текущем браузере.

table show hide column

Галочками регулируется отображение колонок.
Если вы хотите оставить отображение по умолчанию, то нажмите на Сбросить отображение и все колонки отобразятся по умолчанию после обновления страницы.

Экспорт данных

Каждую таблицу можно сохранить или распечатать, если права пользователя ACCESS_EXPORT позволяют.

tableExport

Список форматов экспорта может меняться.

Настройка таблицы

При возможности редактирование таблицы(Администратор в системе, нет атрибута на таблицу edit:false), можно отредактировать колонки, удалить ненужные, добавить новые, изменить размер и переименовать.

Вверху три основные кнопки: Добавить колонку, Сохранить все изменение, Отмена действий.
При добавлении колонки, добавить можно только неиспользуемые.
Сохранить: если ее не нажать, изменения приняты не будут. После удачного сохранения страница перезагрузится.
Отмена: Просто отменяет действия без перезагрузки страницы.

Колонки можно редактировать, если они не заблокированы:

Менять можно наименование, выравнивание по горизонтали и перенос текста.

Создание таблицы в php

Для того что бы таблица отобразилась, ее нужно создать в php, а потом вывести в шаблоне

Void printDataTable(String $name, $fieldList = [], Array $order = null, EntrySet $struct = null, Callable $mapFunction($obj, $row) = null, Array $options = [], Bool $enableAuto = true)

$name — имя таблицы. На одной странице должно быть уникально.
$fieldList — список колонок. По умолчанию загружены все по prototype entry set fields.
$order — сортировка
$struct — EntrySet? если надо вывести другой объект, а не $this->structure.
$mapFunction — Callable function. Функция возврата при ренгдере строк
$options — Массив настроек
$enableAuto — Загружать или нет автоматически pointer поля.

$this->printDataTable("form", [
    "num"  => "id",
    "name" => function($obj) {
        if ($obj->is_group == 1)
            return $obj->name;
        else
            return "<a href='/companies/" . $obj->id . "' target='_blank'>" . $obj->name . "</a>";
    },
    "custom" => function($obj){
        if($obj->id > 100)
            return "MORE";
        return "LESS";
    }
], ["name"]);

В данном примере используется в качестве объекта — $this->structure. Так же добавлено одно свое поле — «custom», которые выводит «MORE» или «LESS» в зависимости от id.
$obj в аргументе анонимной функции — это entry в текущей итерации от EntrySet объекта.

В конце [«name»] — говорит о сортировки по «name» (ASC).
Можно указывать только те поля, которые сами хотите переопределить или создать свои. По умолчанию берется все поля объекта, без учета pointer(если только не выставлен параметр enableAuto = true).

Options — это ассоциативный массив настроек таблицы:

[
    //Для редактирования записи
    "edit"               =>  0 || 1(default),
    //Можно добавлять запись
    "add"                =>  0 || 1(default),
    //Удаление записи
    "delete"             =>  0 || 1(default),
    //Стирание записи
    "wipe"               =>  0 || 1(default),
    //Экспорт/печать записей
    "export"             =>  0 || 1(default),
    //Показывать select all
    "selectAll"          => 0 || 1(default),
    //Удаленные записи показывать поумолчанию
    "showDelete"         => 0 || 1(default),
 
    //Поумолчанию срабатывают глобальные настройки показа select all. Если выставить в "1", то множественный выбор явно покажется
    "forceShowSelectAll" => 0(default) || 1,
    "tableActions" => [
        //Скрывает/Показывает у таблицы справа вверху - показать/скрыть колонки
        "table" => "",//hide - class to hide element
        //Скрывает/Показывает у таблицы справа вверху - показать/скрыть экспортные функции
        "export" => ""//hide - class to hide element,
    ]
]

Создание таблицы в шаблоне

В шаблоне нужно выводить таблицу с таким же именем, как и определена была в php.

[[table | name: form]]
    [[column | table: form | name: name | width: 15% | params: left]]
    [[column | table: form | name: date | width: 8% | tags: nowrap center]]
    [[column | table: form | name: phone | width: 30% | align: center]]
    [[column | table: form | name: city | width: 12% | align: center]]
    [[column | table: form | name: address | width: 13% | align: left | lock: true]]
    [[column | table: form | name: responsible | width: 22% | align: center]]
    [[edit | table: form | path: /companies]]
    [[delete | table: form]]
    [[restore | table: form]]
    [[wipe | table: form]]
[[table_end]]

Блоки [[edit ]], [[delete]], [[restore]], [[wipe]] обязательны, если вы хотите редактировать записи. В [[edit]] должен обязательно передаваться path.

В [[table]] можно добавить атрибут edit: false и тогда редактировать таблицу будет нельзя.

[[table | name: form | edit: false]]

Атрибуты [[table | name:form]], [[column | table: form]] — Обязательны и имеют имя как определено в php.

Динамическая

Такие таблицы используются в основном в формах Edit, ModalEdit. Используется для вывода дополнительных табличных данных. Работает с EntrySet. В отличии от обычной таблицы, динамических можно размещать несколько сразу, но с разными именами.

Основной вид:

main dtable list

Создание динамической таблицы в php

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

Void printDataDTable(EntrySet $struct, String $name, Array $fieldList = [], Array $options = [], Callable $mapFunction($obj, $row) = null, Bool $enableAuto = true)

$this->printDataDTable($this->structure->products->filter("visible=1"), "products", [
    "num"      => "id",
    "position" => function($obj) {
        return "<input type='checkbox' class='prod' name='pos_" . $obj->id . "' id='" . $obj->id . "' value='1'/>";
    },
    "product" => function($obj) {
        return "<a href='/products/" . $obj->product->id . "/' target='_blank'>" . $obj->name . "</a>";
    },
], [
    'path'             => '/companies/' . $this->structure->owner->id . '/orders/' . $this->structure->id . '/products',
    'modalTitle'       => Language::getVariable("companies/orders/edit", "Products"),
    'modalSize'        => 'fullscreen',
    'modalMulti'       => 1,
    'modalCustomReady' => true,
    'modalName'        => "products",
    'selectAll'        => 1,
    'calcFields'       => ['nds', 'total', 'profit'],
    "moreAttributes"   => [
        "fieldName" => "product",
    ]
]);

В данном примере используется в качестве объекта — $this->structure->products — Табличная часть products от order. Можно использовать любой EntrySet.

Options — это ассоциативный массив настроек таблицы:

[
    //путь для edit/add link
    "path"              => "",
    //путь только для add link. По умолчанию берется от path
    "path_add"          => "",
    //Лимит лицензии - текст. Параметр устанавливается автоматически
    "license_limit"     => "",
    //Тип модального окна(edit, frame, lookup, select...)
    "modal_type"        => "edit",
    //Разрешение просмотра. Параметр устанавливается автоматически если явно не задан (0/1)
    "view"              => 1,
    //Разрешение редактирования. Параметр устанавливается автоматически если явно не задан (0/1)
    "edit"              => 1,
    //Разрешение на добавление. Параметр устанавливается автоматически если явно не задан (0/1)
    "add"               => 1,
    //Разрешение на удаление в корзину. Параметр устанавливается автоматически если явно не задан (0/1)
    "delete"            => 1,
    //Разрешение на полное удаление. Параметр устанавливается автоматически если явно не задан (0/1)
    "wipe"              => 1,
    //Разрешение на печать и экспорт в файлы. Параметр устанавливается автоматически если явно не задан (0/1)
    "export"            => 1,
    //Если указать, то стандартный actionMode(save, saveAndClose) не сработает. метод onSave, onSaved не сработают
    //Для полностью ручного сохранения
    "actionMode"        => null,
    //Размер модального окна
    "modalSize"         => "mini",
    //???
    "modalFrameMinSize" => "",
    //Включение/Отключение сортировки (0/1).
    "sortableOff"       => 0,
    //Заголовок модального окна
    "modalTitle"        => "",
    //???
    "modalMode"         => true,
    //false - сисетма автоматически при готовности модального окна снимает disabled и loading у окна. true - программист сам должен позаботиться о готовности окна.
    //Для этого можно определить событие readyModal
    "modalCustomReady"  => false,
    //Имя модального окна. Удобно когда нужно поймать событие с нескольких окон.
    "modalName"         => "",
    //EditModal, SelectModal если стоит - 1, то после выбора или approve окно не закрывается и можно добавить несколько пунктов не закрывая окно.
    "modalMulti"        => 0,
    //Показывать сразу select all (0/1)
    "selectAll"         => 0,
    //???
    "addUnique"         => 0,
    //Массив полей для калькуляции в footer (Numeric only)
    //если указать ["*"] то все поля (Numeric only) будут как калькулируемые
    "calcFields"        => [],
    //true - скрыть все калькулируемые поля в footer
    "calcHide"          => false,
    "tableActions"      => [
        //???
        "filter"       => 'hide',
        //???
        "calc"         => "",
        //???
        "table"        => "",
        //???
        "export"       => "",
    ],
    "moreAttributes"   => [
        //Название поля "name" для mutliaction списка. Поле может быть любое, которое есть в таблице
        "fieldName" => "name",
    ]
]

Создание таблицы в шаблоне

В шаблоне нужно выводить таблицу с таким же именем, как и определена была в php.

[[CONTAINER | header: $data.products.name | name: products | template: table ]]
	[[dTable | name: products | id: prodTable | key: num ]]
	[[column | table: products | name: num | width: 1% | header: № | type: num | align: center]]
	[[column | table: products | name: article | align: center]]
	[[column | table: products | name: product | align: left]]
	[[column | table: products | name: number]]
	[[column | table: products | name: price_nds]]
	[[column | table: products | name: nds]]
	[[column | table: products | name: total]]
	[[column | table: products | name: profit]]
	[[edit | table: products ]]
	[[delete | table: products]]
[[CONTAINER_END]]

dtable main

Для динамических таблиц нужно использовать [[CONTAINER | template: table…]].
В отличие от обычных таблиц, в этих нужно добавлять только [[edit]] [[delete]].

В динамических таблицах удаление происходит сразу и полностью

Взаимодействие с javascript

Все таблицы в системе имеют дополнительные javascript методы:

  • Array getSelectedRows(Bool idsOnly = false) — Получить массив объектов выбранных строк. {val:id, eqRow: indexHtmlElement}. Если параметр idsOnly выставлен в true, то возвращает только массив id
  • Int getRows() — Количество строк в таблице.
  • unselectAll() — Снять все выделения.

Все таблицы в системе имеют дополнительные javascript события:

  • onSelect(event, extra) — Вызывается каждый раз когда вы выбираете строку
  • onUnSelect(event, extra) — Вызывается каждый раз когда вы сняли выбор со строки
  • update() — Обновляет все калькулируемые поля и вызывает свойства и методы различные при обновлении
  • afterUpdate() — Вызывается сразу после update

Примеры:

//Получить выделенные строки
$("table[table-name='products']").get(0).getSelectedRows();
//результат [{eqRow: 1, val: "77"}]
 
$("table[table-name='products']").get(0).getSelectedRows(true);
//результат ["77"]
 
//Получить количество строк строки
$("table[table-name='products']").get(0).getRows();
//результат 1
 
//Снять все выделения
$("table[table-name='products']").get(0).unselectAll();
//сбросит выбранные строки.
 
//После unselectAll
$("table[table-name='products']").get(0).getSelectedRows();
//результат []
 
 
//============================= некоторые события
 
//Подписываемся на событие выбора строки в таблице
$("table[table-name='products']").on("onSelect",function(event, extra){
    //event.target
    //extra: { checkedList:[], tr: jquery selector tr }
});
 
//Подписываемся на событие выбора строки в таблице
$("table[table-name='products']").on("onUnSelect",function(event, extra){
    //event.target
    //extra: { checkedList:[], tr: jquery selector tr }
});

В динамических таблицах при добавлении или редактировании записи в режиме модального окна, вызываются два события:

  • insertNew — вызывается при вставки записи в таблицу
  • updateRow — вызывается при изменении существующей записи в таблице

Примеры:

//Подписываемся на событие выбора строки в таблице
$("table[table-name='products']").on("insertNew",function(event, row){
    //event.target
    //row: { } - возвращаемый responseChange[tablename] объект
});
 
//Подписываемся на событие выбора строки в таблице
$("table[table-name='products']").on("updateRow",function(event, row){
    //event.target
    //row: { } - возвращаемый responseChange[tablename] объект
});

Для того что бы в объекте добавлялись с табличной части и изменялись в динамике, в Action нужно переопределить:

//Возвращаться должен массив
protected function responseChange() {
return [
   //Обязательно должно относится к имени таблицы 
    "products" => [
        "id" => 23,
        "name" => "product1",
    ]
];
}
Последние правки: 28.11.2018 11:37:27