javascript - 如何在 Kendo Grid 中的 url 列中显示带有模板的窗口

Question

我有一个 kendoGrid，其中有一列使用如下命令:

command: { text: "View Details", click: showDetails }

该命令调用 showDetails 方法来打开 kendoWindow:

function showDetails(e) {
    e.preventDefault();

    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    wnd.content(detailsTemplate(dataItem));
    wnd.center().open();
}

这按预期工作。现在我想要另一列是一个 url，当您单击它时，它会执行相同的操作。到目前为止，这就是我对该专栏的模板的了解:

template: '<a href="javascript:void(0)" onclick=showDetails>#=CourseTitle#</a>'

我基本上遵循 Kendo 网站上的命令示例:http://demos.telerik.com/kendo-ui/grid/custom-command 。该命令有一个 click 属性，但模板没有，并且尝试将 url 的 onclick 属性设置为与我用于命令的 click 属性相同的值不起作用，我不知道如何修改它，所以它按照我的预期工作。

Answer 1

要调用 onclick 属性中的函数，您应该使用带括号的语法:

<a onlick='functionName(this)'></a>

然后在你的函数中你可以通过参数获取点击目标的dom元素。 所以你的模板应该是这样的:

template: '<a href="javascript:void(0)" onclick="showDetails(this)">#=CourseTitle#</a>'

您需要像这样修改函数 showDetails:

function showDetails(e) {
    var dataItem, grid;
    if(e.currentTarget === undefined){
        grid = $(e).closest(".k-grid").data('kendoGrid');
        dataItem = grid.dataItem($(e).closest("tr"));
    }
    else{
        e.preventDefault()
        dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    }
    wnd.content(detailsTemplate(dataItem));
    wnd.center().open();
}

工作 Kendo UI Dojo 示例:http://dojo.telerik.com/ACozi