如何将gridjs整行设为可点击链接而非仅列内链接？

方案一：隐藏链接列 + 行点击事件跳转 #

这种方法无需修改表格核心结构，通过隐藏原链接列保留数据，监听行点击事件实现跳转，同时添加hover反馈提示用户可点击。

代码示例 #

new gridjs.Grid({
  columns: [
    '姓名',
    '邮箱',
    // 原链接列设置为隐藏，仅保留数据用于跳转
    { name: '跳转链接', hidden: true }
  ],
  data: [
    ['张三', 'zhangsan@example.com', '/user/zhangsan'],
    ['李四', 'lisi@example.com', '/user/lisi']
  ],
  // 行点击事件处理跳转逻辑
  onRowClick: (e, row) => {
    // 对应隐藏列的索引（这里是第3列，索引为2）
    const targetUrl = row.cells[2].data;
    if (targetUrl) {
      // 直接跳转，如需新标签页用 window.open(targetUrl, '_blank')
      window.location.href = targetUrl;
    }
  },
  // 添加hover样式，提升交互体验
  style: {
    row: {
      cursor: 'pointer',
      ':hover': {
        backgroundColor: '#f0f0f0'
      }
    }
  }
}).render(document.getElementById('grid-container'));

方案二：用a标签包裹整行内容 #

通过rowFormatter自定义行结构，将整行内容放入a标签中，原生支持浏览器右键菜单（如“在新标签页打开”）功能。

代码示例 #

new gridjs.Grid({
  columns: ['姓名', '邮箱'],
  data: [
    ['张三', 'zhangsan@example.com', '/user/zhangsan'],
    ['李四', 'lisi@example.com', '/user/lisi']
  ],
  // 自定义行渲染逻辑
  rowFormatter: (row) => {
    const targetUrl = row.data[2]; // 获取行数据中的链接
    const linkEl = document.createElement('a');
    
    linkEl.href = targetUrl;
    linkEl.style.display = 'block';
    linkEl.style.textDecoration = 'none';
    linkEl.style.color = 'inherit'; // 继承原文本颜色
    
    // 将所有单元格添加到a标签内
    row.cells.forEach(cell => linkEl.appendChild(cell.el));
    
    // 创建跨列的td包裹a标签，避免表格结构错乱
    const td = document.createElement('td');
    td.colSpan = row.cells.length;
    td.appendChild(linkEl);
    
    const tr = document.createElement('tr');
    tr.appendChild(td);
    return tr;
  },
  style: {
    row: {
      cursor: 'pointer'
    }
  }
}).render(document.getElementById('grid-container'));

注意事项 #

• 若使用异步加载数据（如data为函数），需确保row.data或row.cells能正确获取到链接字段；
• 方案二可能需要微调表格边框、内边距样式，避免a标签包裹后出现布局错位；
• 如需区分行内特定元素（如按钮）不触发跳转，可在onRowClick中判断点击目标：

onRowClick: (e, row) => {
  if (e.target.tagName === 'BUTTON') return; // 点击按钮时跳过跳转
  // 跳转逻辑...
}

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