Kendo UI 网格 URL 列

Posted 2023-05-07

【中文标题】Kendo UI 网格 URL 列

【英文标题】：Kendo UI grid URL Column

【发布时间】：2014-07-26 16:20:49

【问题描述】：

我想在我的 Kendo UI Grid 中添加一个超链接。从数据源我得到一个 URL，我只想将它显示为超链接。下面是一个示例代码。请给我建议最简单的方法。

 <div id="testGrid" data-role="grid" data-bind="source: sampleData"
data-sortable="true"  data-resizable="true" />

$(document).ready(function()
var sampleData = [
     "Title": "The Code Project", "URL": "http://codeproject.com/","Developer":"Tom Hanks" ,
     "Title": "Kendo UI", "URL": "http://kendoui.com/" ,"Developer":"Tom Cruise"
];
var ddatasource=  new kendo.data.DataSource.create(sampleData);
$("#testGrid").kendoGrid(
    dataSource: ddatasource,
    columns: [ field: "Title", title: "Title Name",
               field: "URL", title: "URL :"]
);
);

【问题讨论】：

你有没有做过任何研究或尝试过？如果是这样，请将其包含在您的帖子中。如果您首先表现出一些努力，人们会想帮助您。

嗨 Rick，我确实尝试搜索并获得了一些使用模板的文章，但不清楚如何在我的场景中使用，因为我从 Web API 和实际代码中的列获取数据正在使用数据列进行声明性初始化。

【参考方案1】：

您可以使用模板来做到这一点：

columns: [ field: "Title", title: "Title Name",
           field: "URL", title: "URL :", template: '<a href="#=URL#">#=Title#</a>']

您可以在此处的剑道道场上试一试：http://trykendoui.telerik.com/aFAR

【讨论】：

嗨 Rick，当我在“数据列”的声明式初始化中指定模板部分时，它会抛出错误。我可以使用 来完成所需的操作并创建一个使用 URL 形成 TR 的模板，但现在的问题是没有强加备用行样式。 请更新我的答案中链接到的剑道道场代码，以便我了解发生了什么。没关系。我摆脱了声明性的东西，你的代码为我工作......非常感谢你的帮助。