KendoDropDownList选项数据项

KendoDropDownList Option Data Items

本文关键字：数据项 选项 KendoDropDownList      更新时间：2023-09-26

我想将KendoDropDownList合并到我的应用程序中，但是有一个场景我无法工作。现有的应用程序将data-属性添加到下拉列表的listtitem类中(因此它呈现为<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初始化is:

kendo.init('body');

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

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();
});
演示

我知道这很难看，但在这些情况下剑道是有限的，并没有提供资源来处理它自己的结果。如果有什么可用的，我不知道。恐怕模板对你的情况不起作用。

您考虑过使用模板吗?

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

相关文章：