如何在Kendo Grid列中构建锚点链接以在新窗口打开页面？

嘿，这个需求挺常见的，我给你两种实用的解决方式，你可以根据自己当前的showDetails实现情况来选：

方式一：直接修改返回的<a>标签（推荐） #

如果你的showDetails方法原本就是返回一个HTML链接标签，那只需要给标签加上target="_blank"属性，同时加上安全属性rel="noopener noreferrer"来避免潜在的安全风险（防止新页面通过window.opener获取原页面的上下文）。

示例修改后的代码：

function showDetails(id) {
  // 替换成你实际的详情页URL
  const detailUrl = `/your-details-page/${id}`;
  return `<a href="${detailUrl}" target="_blank" rel="noopener noreferrer">查看详情</a>`;
}

这样用户点击链接时，浏览器就会自动在新窗口打开详情页了。

方式二：通过window.open()触发新窗口跳转 #

如果你的showDetails是通过JavaScript逻辑触发跳转（比如原本是用window.location.href跳转），那可以改用window.open()方法来打开新窗口。

比如你原本的方法可能是这样：

function showDetails(id) {
  window.location.href = `/your-details-page/${id}`;
  return '';
}

修改后可以调整为：

function showDetails(id) {
  // 返回一个可点击的元素（比如按钮或链接）
  return `<button onclick="openDetailWindow(${id})">查看详情</button>`;
}

// 单独定义打开窗口的方法
function openDetailWindow(id) {
  const detailUrl = `/your-details-page/${id}`;
  // _blank指定在新窗口打开
  window.open(detailUrl, '_blank');
}

这种方式适合需要在跳转前做额外逻辑处理的场景（比如参数校验、加载提示等）。

额外注意点 #

• 确保showDetails和相关的JS方法是全局作用域可访问的，不然Kendo Grid的ClientTemplate可能找不到这些方法。
• 如果你的详情页URL是动态生成的，注意做好参数的转义处理，避免XSS风险。

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