javascript - 如何在kendo网格列模板中调用模态窗口？

Question

目前，我正在努力在单击 Kendo Grid 中的链接后显示模式窗口。下面是我的代码:

{
    field:"filename",
    title: "File Name",
    width: 60,
    template: '<a href='javascript:(function() {$("win").kendoWindow();})();'><span id="win">#:filename#</span></a>'
},

现在发生的情况是，该文件是一个 json，仅显示为其文件名，但我需要显示的是文件内的内容。有什么办法可以做到这一点吗？将不胜感激所提供的任何帮助。

我已经尝试过<a target="_blank"></a>它在新选项卡中打开，但我需要它在新的模式窗口中打开。

Answer 1

您的模板无效。您无法将纯 JavaScript 代码添加到字符串中。这不是它的工作方式。您的控制台中可能会出现错误。此外，您的代码中还存在一些其他缺陷:

• 您不应该像使用 <span id='win'></span> 那样在 dom 中添加多个具有相同 id 的元素。 。将其更改为一个类。

• 如果您在该范围内打开一个窗口，则会破坏该列的内容。 Check this .

我建议的是这段代码:

模板:

template: '<a href="javascript:void(0)" class="open-modal">#:filename#</a>'

点击事件:

$("#grid").on("click", "a.open-modal", function() {
    $("<div></div>").appendTo($("#win")).kendoWindow();
});

哪里#win是 div你体内的元素。

Demo

在点击事件中 - 该事件附加到网格并按链接的类进行过滤 .open-modal - 它只是创建一个新的 div ，将其附加到 div#win然后调用kendoWindow就在上面。

更新

• 要在显示时使窗口居中，只需使用 center() 方法；

• 要获取点击行的数据，获取tr从单击的链接，然后使用 dataItem() 网格中的方法。

Demo