Question

我试图在用户双击后从KendoUI ListItem的模板中获取Name。我似乎无法找到获取所选项目的价值的方法。警报将以未定义的形式返回。

   <script type="text/x-kendo-tmpl" id="template">
       <div class="machineInstances">
               #:Name# [#:Environment#] #:Description#
        </div>
    </script>

  $("#listView").kendoListView({
      dataSource: dataSource,
      selectable: "single"
      , dataBound: setItemDoubleClickEvent
      , template: kendo.template($("#template").html())

   });

  function setItemDoubleClickEvent() {
      var items = $(".machineInstances");
      items.dblclick(function () {
              $("#menuInstances").click();
              var selected = $("#listView").data("kendoListView").select();
              alert(selected.Name);
               alert("Double Click!");
              });
      }

谢谢，

德鲁

Answer 1

在Kendo UI ListView中，select不返回项目，而是返回HTML。您应该使用index()来获取所选元素的索引，使用dataSource.view()来获取当前显示的元素。

您的代码应为：

function setItemDoubleClickEvent() {
    var items = $(".machineInstances");
    items.dblclick(function () {
        $("#menuInstances").click();
        var listView = $("#listView").data("kendoListView");
        var idx = listView.select().index();
        var item = listView.dataSource.view()[idx];
        alert(item.Name);
        alert("Double Click!");
    });
}

但我建议将代码简化为：

function setItemDoubleClickEvent() {
    $(".machineInstances").on("dblclick", function () {
        var listView = $("#listView").data("kendoListView");
        var idx = $(this).index();
        var item = listView.dataSource.view()[idx];
        alert(item.Name);
        alert("Double Click!");
    });
}

或者使用完全不同的策略来获得相同的结果：

var listView = $("#listView").data("kendoListView");
function setItemDoubleClickEvent() {
    $(".machineInstances", listView).on("dblclick", function () {
        var uid = $(this).data("uid");
        var item = listView.dataSource.getByUid(uid);
        alert(item.Name);
        alert("Double Click!");
    });
}

我获取双击元素的uid，然后使用getByUid检索项目数据。

同时在外部设置listView可以防止每次执行函数时都计算它。

示例：http://jsfiddle.net/OnaBai/3wQaK/

KendoUI ListView双击所选项目

1 个答案: