Grid.js 表格行rowId不显示，如何配置实现行操作与编辑交互

核心实现思路 #

• 复用Grid.js内置rowId配置项，直接绑定后端返回的唯一业务ID，无需手动拼接行标识
• 调整数据返回格式为与列id一一对应的对象结构，彻底避免数组索引错位导致的取值错误
• 优化编辑按钮事件绑定逻辑，仅传rowId作为参数，规避直接拼接JSON到DOM属性的转义、安全问题

具体改造步骤 #

1. 新增全局rowId配置 #

在Grid初始化配置中新增rowId字段，逻辑为提取当前行的后端业务ID作为唯一标识，后续所有行定位、样式修改都基于这个值执行：

// 把Grid实例存为当前作用域变量，方便后续操作行
const grid = new gridjs.Grid({
  // 新增rowId配置，入参为当前行对象，返回值就是行唯一标识
  rowId: (row) => row.cells.id.data,
  // 其余原有配置...
})

2. 调整数据返回格式，取消数组索引映射 #

原server.then中返回数组的写法需要严格匹配列顺序，极容易出现索引错位（如原代码中取row.cells[6]取不到值就是这个原因），改成返回与columns的id一一对应的对象即可：

server: {
  method: "GET",
  url: "/getData",
  then: function (data) {
    loadDataCombobox(data.records);
    // 把原始业务数据存到Grid实例上，避免全局污染，方便后续根据rowId快速取值
    grid.rawData = data.records;
    return data.records.map(function (col) {
      // 按columns的id返回键值对，不再用数组
      return {
        "update": null,
        "short-name": col.shortName,
        "full-name": col.fullName,
        "id": col.id
      };
    });
  },
}

3. 修正编辑列formatter逻辑，优化事件绑定 #

原formatter中取值索引错误、拼接JSON到onClick的写法存在兼容问题，修改为仅传rowId作为参数，彻底规避特殊字符转义、全局变量污染问题：

columns: [
  {
    id: "update",
    name: "update",
    width: "3%",
    align: "center",
    sort: { enabled: false },
    formatter: (cell, row, column) => {
      // 直接取当前行的rowId，无需手动拼接业务对象
      const rowId = row.cells.id.data;
      return gridjs.html(
        `<i class="bi bi-pencil-square fs-5" role="button" onclick='setValue("${rowId}")'></i>`
      );
    },
  },
  // 其余列配置保持不变...
  {
    id: "short-name",
    name: "Short name",
    width: "47%",
  },
  {
    id: "full-name",
    name: "Full name",
  },
  {
    id: "id",
    name: "id",
    hidden: true,
  },
],

配套改造后的setValue函数，可通过rowId快速定位完整业务数据：

function setValue(rowId) {
  // 从Grid实例存储的原始业务数据中匹配目标行
  // 也可以直接用grid.getRow(rowId).cells 获取渲染后的行数据
  const targetRow = grid.rawData.find(item => String(item.id) === String(rowId));
  // 后续原有编辑逻辑直接使用targetRow即可
}

4. 基于rowId修改行样式 #

绑定rowId后可直接通过Grid实例的getRow方法拿到对应行的实例，进而获取DOM元素执行样式调整：

// 例：给rowId为12的行加背景色
const targetRowInstance = grid.getRow(12);
const targetRowEl = targetRowInstance.el;
targetRowEl.style.backgroundColor = '#e6f7ff';

如果需要加载时自动给满足条件的行加样式，可新增rowAttributes配置：

// 加到Grid初始化配置里
rowAttributes: (row) => {
  const fullName = row.cells.fullName.data;
  // 例：名称包含"已停用"的行标红
  if (fullName.includes('已停用')) {
    return { style: 'background-color: #fff1f0;', 'data-status': 'disabled' };
  }
  // 给所有行绑定data-row-id属性，方便后续DOM操作
  return { 'data-row-id': row.cells.id.data };
}

原代码问题修正说明 #

• 原formatter中row.cells[6]取值无效：当前配置仅4列，cells索引最大为3，调整为对象格式后按列id取值即可彻底避免这类错位问题
• 原直接拼接JSON.stringify(rowObject)到onClick的写法存在转义风险：业务字段包含引号等特殊字符时会直接导致事件失效，改为仅传rowId的写法可完全规避
• 原未声明直接赋值rowObject会污染全局作用域，多表格同页面时会出现变量覆盖问题

内容的提问来源于stack exchange，提问作者チン スアントウ