1

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

http://jsfiddle.net/xF4CK/

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

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

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

我不确定从哪里开始，或者是否可以在行模板中。任何帮助是极大的赞赏。

4

1 回答 1

0

我能够弄清楚。在行模板中，我正在调用一个 js 函数并返回列表的 html 标记。然后根据类属性在所有项目上设置 .kendoDropDownList。我在这里更新了 jsfiddle，但它似乎在 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);
}
于 2013-08-13T16:46:01.700 回答