从多列表视图中删除所选元素

时间:2014-04-22 09:53:11

标签: kendo-ui kendo-listview

使用Kendo UI,请告诉我如何从多列表视图中删除元素。当我选择任何项目时,它给了我价值,但我无法删除所选元素。

PSB代码:

var data = [
{ id: 1, text: "text 1" },
{ id: 2, text: "text 2" },
{ id: 3, text: "text 3" }
];


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

    var d = $("#listview").data("kendoListView");
    alert(d.element.children().first());
    d.remove(dataItem.text);

    //log("id: " + dataItem.id + ", text: " + dataItem.text);
    var selected = $.map(this.select(), function(item) {
        return data[$(item).index()].id;
           });
    //data.remove(selected.id);
    //console.log(data);
    console.log(selected);
    //console.log("[" + selected.join(", ") + "]");
}
});

1 个答案:

答案 0 :(得分:1)

删除元素是:

// Find selected 
var idx = this.select().index();
// Get reference to the DataSource
var ds = d.data("kendoListView").dataSource;
ds.remove(ds.at(idx));

这会在您点击它时立即删除所选项目(但在change事件处理程序中执行此操作实际上不允许您删除多个项目。)

但您也可以使用remove方法直接从列表中删除单个项目:

// Find selected 
var selected = this.select();
d.data("kendoListView").remove(selected);

选中here,点击某个项目即可删除。

问题是这些接口能够每次调用删除一个项目。如果你想删除很多,你可以迭代它们:

// Find selected 
var items = d.select();
$.each(items, function(idx, elem) {
    d.remove($(elem));
});

查看here,选择多个,然后点击“删除”按钮。