Примеры работы с табличной частью карточек в веб доступе (версия DIRECTUM 5.4.2)

Разработка типов справочников и карточек документов с табличными частями в десктоп-клиенте не нова. Но если разработку нужно адаптировать под веб, то тут частенько можно столкнуться с разного рода "неприятностями", которые совсем не ждешь. И неприятности эти далеко не всегда оттого, что что-то написано не так, а порой просто от незнания что и как нужно написать.

В этой статье хотела поделиться с вами небольшими примерами работы с табличными частями в вебе с одного из наших проектов. 

Итак, начнем, конечно, с элементарного: 

Код на JS:

// 1. Получить таблицу карточки справочника или документа
var tableDfmName = 'STcxGrid1';
var tableDetailNumber = 1;

// По DFM имени
var tableDfm = WA.CR.form.controls.tables[tableDfmName];
var tableDfm2 = WA.CR.form.controls.tables.STcxGrid1;

// По номеру детального раздела
var tableDetail = WA.CR.details[tableDetailNumber].getTable();

// Скрыть таблицу с помощью метода hide()
tableDfm._jObject.hide();

// Показать таблицу с помощью метода show()
tableDfm._jObject.show();

// Сделать таблицу недоступной для редактирования с помощью метода disable()
tableDfm.disable();

// Сделать таблицу доступной для редактирования с помощью метода enable()
tableDfm.enable();

Необходимость скрывать таблицу целиком встречается не часто, а вот скрыть одну из колонок таблицы, кейс более востребованный. 

Код на JS:

// Получить таблицу карточки справочника или документа
var tableDfmName = 'STcxGrid1';
var columnName = 'ДопТ';
var tableDfm = WA.CR.form.controls.tables['STcxGrid1'];
var visCols = tableDfm._grid.getVisibleColumns();
var newVisCols = _(visCols).filter(function (col) {
  // Убрать нужную колонку
  return col.id != columnName;
}); 
tableDfm._grid.setVisibleColumns(newVisCols);

Здесь стоит отметить, что при скрытии элементов на JS через СОМ и jQuery при показе карточки будет заметное мелькание. 

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

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

$(".slick-header-columns").draggable({ grid: true, axis: "y" });
var grid = WA.CR.form.controls.tables.STcxGrid1._grid.grid;
// Применить изменений по блокировке заголовков таблицы с помощью метода setColumns 
grid.setColumns(grid.getColumns());

В данном примере необходимо обратить внимание на 2 момента:

• во-первых, на jquery-метод draggable, позволяющий включать и отключать возможность перетаскивания элемента. Подробнее про draggable можно почитать по следующей ссылке: https://professorweb.ru/my/javascript/jquery/level4/4_12.php В примере используется привязка к ячейкам сетки (grid: true) и ограничение на перемещение по оси y (axis: "y").
•  во-вторых, на вычисления: grid.setColumns(grid.getColumns());. Эти вычисления необходимы для применения изменений таблицы, без этой строки кода, до полной блокировки перемещения можно было 1 раз переместить заголовок поля таблицы, и только после этого происходила блокировка всех заголовков таблицы.

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

var tableName = 'STcxGrid1';
var columnName = ' ДопТ';

// Получить таблицу
var table = WA.CR.form.controls.tables[tableName];

// 1.Заблокировать весь столбец: 
// при добавлении новых строк в таблицу реквизит будет недоступен
table.columns[columnName].disable();

// 2.Заблокировать только введенные значения
// при добавлении новых строк в таблицу реквизит в новой строке будет доступен для редактирования
var reqNames = ' ДатаТ';
var currentColumn = table.columns[reqNames].requisites._arr;
for(var j = 0; j < currentColumn.length; j++)
   currentColumn[j].disable();

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

Пример кода на JS:

WA.CR.form.controls.tables.STcxGrid1._grid.settings.plugins[3]._customMenuClass.generateItems = function(event){return[];}

Чтобы выделить какую-то строку в таблице, можно изменить ее стиль. 

Код на JS:

var nomRow  = 0;                                      // Первая строка таблицы
var rowID = WA.CR.form.controls.tables.STcxGrid1.rows._arr[nomRow]._rowID;         // ИД строки таблицы
$("#"+rowID).css("color", "red");           // изменить цвет текста строки таблицы
$("#"+rowID).css("font-size", "14px");      // изменить размер шрифта
$("#"+rowID).css("font-weight", "bold");    /* изменить толщину шрифта. В качестве его значения выступает: normal, bold.; */
$("#"+rowID).css("font-style", "oblique");  /* изменить начертание (стиль) шрифта В качестве его значения выступает: normal, oblique; */

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

Код на JS

var tableName = 'STcxGrid1';
var columnName = 'НомСтр';

var table = WA.CR.form.controls.tables[tableName];
  // очистить сортировку
  table._grid.grid.setSortColumn(); 
  table._gridColumns[columnName].type = 7;
  var columnIndex = table._grid.state.VisibleColumns.indexOf(columnName) - 1;
  $('#' + tableName).find('.slick-sort-indicator')[columnIndex].click(); 
WA.CR.form.controls.tables[tableName]._grid.grid.render();

Ну и самое популярное — фильтрация выбора из справочника в строках детального раздела. 

Фильтр в строках детального раздела устанавливается с помощью метода setFilter:

var nomRow  = 0;                                      // Первая строка таблицы
var rowID = WA.CR.form.controls.tables.STcxGrid1.rows._arr[nomRow]._rowID; // ИД строки таблицы
WA.CR.form.controls.tables.STcxGrid1.rows[rowID].requisites['PerformerT'].setFilter('[ИД] in {173909, 167138}')

Если фильтр должен зависеть от значений реквизитов строки, то необходимо устанавливать фильтры для каждой строки:

var table = WA.CR.form.controls.tables.STcxGrid1;
var row = table.rows;
var rowID = 0;
for(var i = 0; i < row.count(); i++){
  rowID = row._arr[1].id;
  table.rows[rowID].requisites['PerformerT'].setFilter('[Дополнение3] = ' + table.rows[rowID].requisites['ДопТ'].getValue());
}

При этом фильтр необходимо обновлять при каждом изменении ведущего реквизита в строке.

Чтобы при добавлении новой строки для нужных реквизитов также установился фильтр, нужно навесить вычисления на событие добавление.

Код на JS

WA.CR.form.controls.tables.STcxGrid1.bind("addRow", function(val1) {
			        WA.CR.form.controls.tables.STcxGrid1.rows[val1._rowID].requisites['DFAEDocKindT'].setFilter(res.Result)
		          });

На этом все, делитесь в комментариях своими примерами.