Formio Data Grid实现行枚举标题动态更新的技术问询

核心思路 #

绕开Formio内置的Advanced Logic限制，通过自定义JavaScript监听Data Grid的行增删事件，手动维护每行的当前编号和原始编号，实现标题的动态更新。

分步实现 #

1. 自定义行标题模板 #

找到你的Data Grid组件，进入Display设置页，把「Row Label」改成以下模板：

<span class="row-number"></span> Row <span class="original-number" style="display:none;"></span>

• .row-number：用来显示当前行的连续编号
• .original-number：隐藏存储每行的初始编号，用于删除后显示备注

2. 添加自定义脚本 #

在表单的Custom JavaScript区域粘贴以下代码：

// 更新所有行的编号显示
function updateRowNumbers(grid) {
  const rows = grid.querySelectorAll('.formio-grid-row');
  rows.forEach((row, index) => {
    const currentNum = index + 1;
    const numSpan = row.querySelector('.row-number');
    const originalSpan = row.querySelector('.original-number');

    // 新行初始化原始编号
    if (!originalSpan.textContent) {
      originalSpan.textContent = currentNum;
    }

    // 根据当前编号和原始编号生成显示文本
    const originalNum = parseInt(originalSpan.textContent);
    if (currentNum !== originalNum) {
      numSpan.textContent = `${currentNum}. (formerly ${getOrdinal(originalNum)})`;
    } else {
      numSpan.textContent = `${currentNum}.`;
    }
  });
}

// 生成序数后缀（1st/2nd/3rd...）
function getOrdinal(num) {
  const lastDigit = num % 10;
  const lastTwo = num % 100;
  if (lastTwo >= 11 && lastTwo <= 13) return `${num}th`;
  switch(lastDigit) {
    case 1: return `${num}st`;
    case 2: return `${num}nd`;
    case 3: return `${num}rd`;
    default: return `${num}th`;
  }
}

// 监听行变化
document.addEventListener('DOMContentLoaded', () => {
  const grid = document.querySelector('.formio-component-grid');
  // 页面加载时初始化
  updateRowNumbers(grid);

  // 用MutationObserver监听DOM行增删
  const observer = new MutationObserver(() => {
    // 延迟执行确保行渲染完成
    setTimeout(() => updateRowNumbers(grid), 100);
  });
  observer.observe(grid, { childList: true, subtree: true });
});

3. 效果验证 #

• 初始状态：每行显示 1. Row、2. Row、3. Row
• 删除第2行后：剩余行变为 1. Row、2. (formerly 3rd) Row
• 添加新行：自动使用下一个连续编号，比如新增后显示 3. Row

关于Advanced Logic的局限性 #

Formio的Advanced Logic主要聚焦组件值的联动规则，对于DOM层面的动态文本更新、行状态追踪这类需求支持不足，直接用JS操作DOM是更高效的解决方式。

内容的提问来源于stack exchange，提问作者Lali Micskei