1

我发布了关于这个问题如何在剑道 ui 菜单中使用受限列表组合框，但忽略了发布代码并因此受到抨击。因此，我将尝试在这里清楚地解释我的问题。

(1) kendo-menu 能否支持对菜单项使用组合框？(2) 如果对 (1) 的回答是肯定的，那么我有一个关于如何做的问题。

我在这里创建了一个 jsfiddle：Kendo menu with combobox menu item

如果我定义我的剑道菜单如下：

HTML

<ul id="menu"></ul>

JS

$(document).ready(function() {
var menuItems = [{text: "Apple", url: "http://www.google.com"},
                 {text: "Banana", url: "http:\/www.google.com"},
                 {text: "Orange", url: "http://www.google.com"}];

var menuData = [{text: "Fruits", items: menuItems},
                {text: "Site", url: "http://www.google.com"},
                {text: "Location", url: "http://www.google.com"}];


var menu = $("#menu").kendoMenu({ dataSource: menuData });

});

我想让第一项“水果”在上面的代码中呈现为标准菜单项下拉，呈现为组合框（仅限于其数据项列表）并显示来自的文本用户选择的任何列表项。菜单数据源是动态的，所以我认为我不能在 html 中指定它。但我搜索了剑道论坛和演示以及 stackoverflow 并找不到任何相关示例。要求菜单功能如下。如果选择“Apple”，菜单将显示为：

苹果 v | 网站 | 地点

如果用户单击下拉菜单并选择“香蕉”，菜单将显示为：

香蕉 v | 项目 | 存货

- 拍

4

1 回答 1

0

仅使用 Menu 小部件并没有真正的好方法，因为出于某种原因，Menu 小部件并非旨在实际跟踪底层数据项。

  • 传入的值不会像其他所有小部件一样dataSource转换为真实值。kendo.data.DataSource
  • 菜单项不会uid返回创建它们的数据项，因为它不使用DataSource
  • 无法提供模板来呈现菜单项。

但是，您可以像这样（更新的 jsFiddle）使用 jQuery 蛮力地更改元素文本。

另一种方法是尝试在菜单旁边放置一个实际的 DropDown 小部件（也许将其浮动在菜单旁边？）并经历使 CSS 看起来与菜单相同的痛苦。

另一种选择是制作一个完全自定义的小部件，然后它可以输出与 Menu 小部件具有相同元素结构和 css 类的元素，但实际上将其绑定到 DataSource。然后，您可以将数据源中父项的名称更新为选定项的文本，并更新 UI 元素以与 MVVM 匹配。

我知道，这是一个非常笼统的解释，但我正在考虑类似于在旧的/不再支持的音乐商店示例中为自定义购物车菜单所做的事情，您可以在此处找到：

剑道音乐商店样品（见菜单右侧的“购物车”项目）。

该自定义购物车小部件的实现文档。

于 2014-08-13T21:15:21.727 回答