Select Kendo UI ListView 项目

Question

使用 Kendo ListView 并且当我的页面重新加载时，如果 selection 已经完成，我需要让我的代码自动 select 之前 select编辑。我可以通过遍历数据源集合来获取 Kendo DataItem，但是当我执行 listView.select(item) 时，UI 不会像 selected 那样显示任何内容。

这是我的列表视图：

$("#listview").kendoListView({
        dataSource: coverages,
        template: kendo.template($("#listTemplate").html()),
        selectable: true,
        change: function() {
            var index = this.select().index();
            dataItem = this.dataSource.view()[index];

            if (selectedCoverageCode == null) {
                selectedCoverageCode = dataItem;
            }

            onCodeChanged(categoryId, planId, dataItem);
        }
    });

这是我设置之前 selected 项目的代码：

   function setSelectedCoverageCode(code) {
    var listView = $("#listview").data("kendoListView");
    var dataSource = listView.dataSource.view();
    if (listView) {
        $.each(dataSource, function(index, item) {
            if (item.Code === code) {
                listView.select(item);
                selectedCoverageCode = item;
            }
        });
    }
}

我需要 DOM 对象而不是数据源 DataItem，我相信。上面的 setSelectedCoverageCode 函数触发了 Change 事件，但实际元素并未 select 在 DOM 中的那个点编辑。

我该怎么做才能在重新加载时显示已 select 的项目？建议？

谢谢

Answer 1

您可以通过查找其 UID 来获取数据项的 DOM 元素。

var item = // the item out of the DataSource that you want to select
var listView = $("#listview").data("kendoListView");

listView.select(listView.element.find('[data-uid="' + item.uid + '"]'));

Select Kendo UI ListView 项目

Select Kendo UI ListView Item

javascript

jquery

listview

kendo-ui

kendo-listview