Toast UI Grid点击board_title单元格时如何获取board_no值？

针对Toast UI Grid点击board_title单元格获取对应行board_no的需求，提供两种实现方式：

方法一：通过Grid的cellClick事件监听 #

直接监听网格的单元格点击事件，判断点击列后获取行数据中的board_no：

// 假设你的Grid实例已初始化，变量名为grid
grid.on('cellClick', (ev) => {
  // 仅处理board_title列的点击
  if (ev.columnName === 'board_title') {
    // 从当前行数据中提取board_no
    const boardNo = ev.row.board_no;
    // 执行你的业务逻辑，比如打印或跳转
    console.log('当前行的board_no:', boardNo);
    // 若需跳转详情页，也可在此处理（替代formatter中的a标签）
    // window.location.href = `detail?no=${boardNo}`;
  }
});

方法二：在formatter中直接获取行数据并绑定逻辑 #

利用formatter参数中的row对象，直接获取当前行的board_no，同时可修正跳转链接的参数（你原代码中href使用的是board_title的值，若需传board_no需替换）：

formatter: function (e) {
  const boardNo = e.row.board_no;
  // 生成带正确参数的a标签，同时可绑定点击事件处理逻辑
  return `<a href="detail?no=${boardNo}" onclick="handleBoardTitleClick(${boardNo})">${e.value}</a>`;
}

// 定义点击处理函数（需确保函数在当前作用域可访问）
function handleBoardTitleClick(boardNo) {
  console.log('点击的board_no:', boardNo);
  // 这里添加你的自定义逻辑
}

注意事项 #

• 若选择方法二，需确保handleBoardTitleClick函数处于全局作用域或Grid所在的作用域内，避免找不到函数的问题。
• 原formatter代码中href使用${e.value}对应的是board_title的值，若跳转详情页需要的是board_no，必须替换为e.row.board_no才能保证参数正确。

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