#JS-колонка

#Введение

JS-колонка используется для создания «пользовательских колонок» в таблицах, которая отображает содержимое ячеек каждой строки с помощью JavaScript. Она не привязана к конкретному полю и подходит для таких сценариев, как производные колонки, комбинированное отображение данных из разных полей, значки статуса, кнопки действий и агрегация удаленных данных.

#Контекстный API времени выполнения

При рендеринге каждой ячейки JS-колонка предоставляет следующие возможности контекстного API:

• ctx.element: DOM-контейнер текущей ячейки (ElementProxy), поддерживающий innerHTML, querySelector, addEventListener и другие методы.
• ctx.record: Объект записи текущей строки (только для чтения).
• ctx.recordIndex: Индекс строки на текущей странице (начинается с 0, может зависеть от пагинации).
• ctx.collection: Метаинформация о коллекции, привязанной к таблице (только для чтения).
• ctx.requireAsync(url): Асинхронно загружает библиотеку AMD/UMD по URL.
• ctx.importAsync(url): Динамически импортирует модуль ESM по URL.
• ctx.openView(options): Открывает настроенное представление (модальное окно/выдвижная панель/страница).
• ctx.i18n.t() / ctx.t(): Интернационализация.
• ctx.onRefReady(ctx.ref, cb): Выполняет рендеринг после готовности контейнера.
• ctx.libs.React / ctx.libs.ReactDOM / ctx.libs.antd / ctx.libs.antdIcons / ctx.libs.dayjs: Встроенные библиотеки React, ReactDOM, Ant Design, Ant Design Icons и dayjs для рендеринга JSX и работы со временем. (ctx.React / ctx.ReactDOM / ctx.antd сохранены для совместимости.)
• ctx.render(vnode): Рендерит элемент React/HTML/DOM в контейнер по умолчанию ctx.element (текущая ячейка). При многократном рендеринге будет повторно использоваться Root, а существующее содержимое контейнера будет перезаписано.

#Редактор и сниппеты

Редактор скриптов JS-колонки поддерживает подсветку синтаксиса, подсказки об ошибках и встроенные фрагменты кода (сниппеты).

• Snippets: Открывает список встроенных фрагментов кода, позволяя искать и вставлять их в текущую позицию курсора одним щелчком.
• Run: Запускает текущий код напрямую. Журнал выполнения выводится на нижнюю панель Logs, поддерживая console.log/info/warn/error и подсветку ошибок.

Вы также можете использовать AI-помощника для генерации кода:

• AI-помощник · Натан: Фронтенд-инженер

#Примеры использования

#1) Базовый рендеринг (чтение записи текущей строки)

ctx.render(<span className="nb-js-col-name">{ctx.record?.name ?? '-'}</span>);

#2) Использование JSX для рендеринга React-компонентов

const { Tag } = ctx.libs.antd;
const status = ctx.record?.status ?? 'unknown';
const color = status === 'active' ? 'green' : status === 'blocked' ? 'red' : 'default';
ctx.render(
  <div style={{ padding: 4 }}>
    <Tag color={color}>{String(status)}</Tag>
  </div>
);

#3) Открытие модального окна/выдвижной панели из ячейки (просмотр/редактирование)

const tk = ctx.collection?.getFilterByTK?.(ctx.record);
ctx.render(
  <a onClick={async () => {
    await ctx.openView('target-view-uid', {
      navigation: false,
      mode: 'drawer',
      dataSourceKey: ctx.collection?.dataSourceKey,
      collectionName: ctx.collection?.name,
      filterByTk: tk,
    });
  }}>Просмотр</a>
);

#4) Загрузка сторонних библиотек (AMD/UMD или ESM)

// AMD/UMD
const _ = await ctx.requireAsync('https://cdn.jsdelivr.net/npm/lodash@4/lodash.min.js');
const items = _.take(Object.keys(ctx.record || {}), 3);
ctx.render(<code>{items.join(', ')}</code>);

// ESM
const { default: dayjs } = await ctx.importAsync('https://cdn.jsdelivr.net/npm/dayjs/+esm');
ctx.render(<span>{dayjs().format('YYYY-MM-DD')}</span>);

#Важные замечания

• Рекомендуется использовать доверенные CDN для загрузки внешних библиотек и предусмотреть запасные варианты на случай сбоев (например, if (!lib) return;).
• Рекомендуется отдавать предпочтение селекторам class или [name=...] вместо фиксированных id, чтобы избежать дублирования id в нескольких блоках или модальных окнах.
• Очистка событий: Строки таблицы могут динамически изменяться при пагинации или обновлении, что приводит к многократному рендерингу ячеек. Перед привязкой событий следует очищать или дедуплицировать их, чтобы избежать повторных срабатываний.
• Совет по производительности: Избегайте повторной загрузки больших библиотек в каждой ячейке. Вместо этого кэшируйте библиотеку на более высоком уровне (например, с помощью глобальной или табличной переменной) и используйте ее повторно.