#JS Column

#介绍

JS Column 用于表格中的“自定义列”，通过 JavaScript 渲染每一行的单元格内容。不绑定具体字段，适合衍生列、跨字段组合展示、状态徽章、按钮操作、远程数据汇总等场景。

#运行时上下文 API

JS Column 的每个单元格渲染时可使用以下上下文能力：

• ctx.element：当前单元格的 DOM 容器（ElementProxy），支持 innerHTML、querySelector、addEventListener 等；
• ctx.record：当前行记录对象（只读）；
• ctx.recordIndex：当前页内的行索引（从 0 开始，可能受分页影响）；
• ctx.collection：表格绑定集合的元信息（只读）；
• ctx.requireAsync(url)：按 URL 异步加载 AMD/UMD 库；
• ctx.importAsync(url)：按 URL 动态导入 ESM 模块；
• ctx.openView(options)：打开已配置的视图（弹窗/抽屉/页面）；
• ctx.i18n.t() / ctx.t()：国际化；
• ctx.onRefReady(ctx.ref, cb)：容器就绪后再渲染；
• ctx.React / ctx.ReactDOM / ctx.antd：支持 JSX，直接由 ctx.ReactDOM 渲染。
• ctx.render(vnode)：渲染 React 元素/HTML/DOM 到默认容器 ctx.element（当前单元格），多次渲染会复用 Root，并覆盖容器现有内容。

#编辑器与片段

JS Column 的脚本编辑器支持语法高亮、错误提示与内置代码片段（Snippets）。

• Snippets：打开内置代码片段列表，可搜索并一键插入到当前光标位置。
• Run：直接运行当前代码，运行日志输出到底部 Logs 面板，支持 console.log/info/warn/error 与错误高亮定位。

可结合 AI 员工生成代码：

• AI 员工 · Nathan：前端工程师

#常见用法

#1) 基础渲染（读取当前行记录）

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

#2) 使用 JSX 渲染 React 组件

const { Tag } = ctx.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。
• 事件清理：表格行可能随分页/刷新动态变化，单元格会多次渲染。绑定事件前应清理或去重，避免重复触发。
• 性能建议：避免在每个单元格里重复加载大型库；应将库缓存到上层（如通过全局变量或表级变量）后复用。