剑道网格单列中的多个超链接答案

【问题标题】：Kendo Grid Multiple Hyperlinks in single column剑道网格单列中的多个超链接
【发布时间】：2017-01-06 20:52:56
【问题描述】：

我正在使用以下代码在 Kendo Grid 中显示来自服务器的数据。

工作正常。

我想在每行的最后一个单元格中放置两个超链接，但只能使用一个。

我希望 EDIT 和 DELETE 在同一个单元格中链接。

我怎样才能做到这一点？

代码

@(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
    columns.Bound(u => u.USERNAME);
    columns.Bound(u => u.PASSWORD);
    columns.Bound(u => u.ROLE);
    columns.Bound(u => u.STATUS);
    columns.Template(c => Html.ActionLink("Edit", "Edit", new { id = c.ID }));

}
)
.Pageable()

)

【问题讨论】：

标签： kendo-ui asp.net-mvc-5 kendo-grid

【解决方案1】：

有几种方法可以做到这一点。

首先，您可以使用网格配置中的内置编辑/删除选项

像这样：

 columns.Command(command =>
                {
                    command.Edit();
                    command.Destroy();                         
                });

然后只需连接编辑配置并适当地销毁delete 命令。

或者，您可以使用以下两种方法之一将这些模板化：

第一个内联模板：

columns.Bound(c => c.ID).ClientTemplate("<a href='Edit/#=data.ID#'>Edit Link #=data.ID#</a> 
<a href='Delete/#=data.ID#'>Delete Link #=data.ID#</a>")

所以这只是绑定到一个列，如果需要，可以使用标准 html 和 javascript 根据您的要求添加模板。这对于简单的事情很好，但如果你有更复杂的templates，这会导致第二个方法创建一个模板并像这样调用它：

columns.Bound(c => c.ID).ClientTemplate("#=getButtonTemplate(data,'buttonsTemplate')#")

然后像这样创建你的模板：

<script id="buttonsTemplate" type="text/x-kendo-template">
<div class='btn-group'>
<a class="btn btn-primary" href='@Url.Action("{edit action}", "controller")/#=ID#'>Edit Link #=ID#</a> 
<a class="btn btn-danger" href='@Url.Action("{delete action}", "controller")/#=ID#'>Delete Link #=ID#</a> 
<div> 

</script>

然后是getButtonTemplate函数：

function getButtonTemplate(data, templateName) {
    var templateObj = $("#" + templateName).html();
    var template = kendo.template(templateObj);
    return template(data); 
}

所以让我解释一下使用第二种方法的情况。

我们没有将列中的 html 模板化，而是将其提取为两个 components，以便找到更好的词。

我们使用 getButtonTemplate 函数在数据项和模板的 id 中传递 2 个参数。此函数只是将传递的数据对象加载到模板中，然后 kendo 魔术渲染 html 并根据需要注入值。查看剑道演示站点以获取有关此主题的更多信息。

模板元素可以是 html 和 javascript 的混合，因此如果您需要在模板中应用一些逻辑，可以在此处完成。再次参考剑道网站以获取有关此主题的更多信息。

我个人更喜欢做这个客户端模板的第二种方法，因为它更容易管理和进行更改，而无需流氓哈希或括号破坏代码。

如果您需要更多信息，请告诉我，我会为您更新答案。

【讨论】：