Question

KendoDropDownList 选项数据项

2015-10-19

2010

javascript html kendo-ui kendo-dropdown

我想将 KendoDropDownList 合并到我的应用程序中，但是有一种情况我无法实现。现有应用程序将 data- 属性添加到下拉列表的 ListItem 类中（因此它呈现为 <option data-xyz="abc" /> ）。这样做有一个合理的原因：该信息用于在客户端预填充表单，但我遇到的 kendoDropDownList 问题是它构建了自己的列表来表示列表项，但它没有带来这些数据属性。有没有办法将选定的列表项链接到原始项，我可以从那里获取数据属性？否则，我似乎根本无法使用该控件。

编辑：我使用数据属性以及 kendo.init 进行初始化。以下是 HTML：

<select .. data-role="dropdownlist" data-option-label="- Select -">
   <option data-x="y" value="..">..</option>
   <option data-x="y" value="..">..</option>
   .
   .
</select>

要初始化的 Javascript 是：

kendo.init('body');

仅供参考，我没有使用客户端 MVVM 绑定。但是，Kendo 使用 LI 元素构建了一个表示下拉列表的 UL 元素，而不是使用 OPTION 元素，因此在构建列表时，它不包括所有属性。

Answer 1

Kendo 重新创建元素，这就是其属性丢失的原因。我建议使用包装函数，在创建小部件之前复制 data- 属性，然后再次设置属性：

$.fn.myDDL = function() {
  var el = $(this);
  var attrs = [];

  el.find("option").each(function() {
    attrs.push($(this).data());
  });

  el
    .kendoDropDownList()
    .find("option").each(function(i, e) {
      var keys = Object.keys(attrs[i]);

      for (var k = 0; k < keys.length; k++) {
        $(e).data(keys[k], attrs[i][keys[k]]);
      }
    });

  // Test
  var opt = $("#abc option:eq(0)").data();
  console.log(opt);
};

$(function()
{
    $("#abc").myDDL();
});

Demo

我知道这很难看，但在那些情况下，kendo 是有限的，并且不提供资源来处理其自己的结果。如果有可用的东西我不知道。恐怕模板不适用于您的情况。

Answer 2

您是否考虑过使用模板？

http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#configuration-template