javascript - 如何在 Kendo UI 网格中添加下拉列表

Question

使用 Kendo UI 和行模板，我有一个如下所示的网格:

http://jsfiddle.net/xF4CK/

我想要更改操作列以包含由操作对象填充的下拉列表。 actions 对象包含显示文本和相对 URL 路径，如下例所示:

var actions = [
    { name: "edit", url: "reports/report/1" },
    { name: "delete", url: "reports/delete/1" }
];

此操作对象位于网格的每一行上，并且可能因行/用户/等而异。预期用途是用户选择下拉列表，然后选择其中一个选项。选择该选项后，将发布 url 值。

我不确定从哪里开始，或者是否可以在行模板中开始。非常感谢任何帮助。

Answer 1

我已经弄清楚了。在行模板中，我调用 js 函数并返回列表的 html 标记。然后根据类属性在所有项目上设置 .kendoDropDownList。我已经更新了jsfiddle here但在 jsfiddle 中似乎不起作用。当我在我的开发机器上使用 IE10 和 Chrome 进行测试时，它可以正常工作。

以下是相关代码更改:

在rowTemplate中，已更改

#: actions #

至

#= renderDropDown(actions) #

这个“=”显示将 html 渲染为 html 的文字文本，而“:”则对 html 进行编码。

renderDropDown 函数:

function renderDropDown(actions) {
    var dropDownList = "<select class=\"insight-dropdown\">";

    dropDownList = dropDownList + "<option value=\"default\" disable=\"disabled\">...</option>";

    for (var i = 0; i < actions.length; i++) {
        dropDownList = dropDownList + "<option value=\"" + actions[i].url + "\">" + actions[i].name + "</option>";
    }

    dropDownList = dropDownList + "</select>";
    return dropDownList;
}

在网格的dataBound事件中，我添加了这个函数来将html变成下拉列表:

// Set the drop down lists
$(".insight-dropdown").kendoDropDownList({
    select: onDDLSelect
});

处理操作的选择:

function onDDLSelect(e) {
    var dataItem = this.dataItem(e.item.index());
    alert(dataItem.value);
}