Kendo - 网格 - 删除多行

时间:2012-11-16 21:19:06

标签: performance grid kendo-ui

我有以下代码删除已检查的行(每行都有一个复选框,我在工具栏中有一个Filter按钮(和其他按钮)。)

var grid = $("#resultsGrid").data("kendoGrid");
grid.tbody.find("input:checked").closest("tr").each( function(index) {
    grid.removeRow($(this));
});

然而,当有>时,性能开始成为一个问题。删除了20行。但是,kendo过滤(删除)20行或更快更快。 kendo过滤如何从视图中删除多行?或者还有其他更好的方法从网格中删除多行?在此先感谢您的帮助。

2 个答案:

答案 0 :(得分:4)

**更新小提琴到新位置 - 与之前的代码相同**

尝试直接处理数据。将复选框挂钩到行的Id并对其进行过滤。

我链接了一个删除数组元素然后重新创建网格的小提琴。网格顶部的2个文本框捕获您要删除的ID的范围(这将是您的checkboxIds的相同数组)。然后我循环访问那些“删除ID”,将它们从数据数组中删除并重新生成网格。

我略微修改了之前的小提琴,这就是我重新创建网格而不是直接处理DataSource对象的原因。但我希望你能理解我正在做的事情。

我在这个例子中有1000条记录(只有3列),但它很快就删除了950条记录。

Fiddle- Remove from data array

如果您需要使用KendoUI DataSource对象的示例,请告诉我。

我在下面添加了这段代码,因为如果没有它,StackOverflow就不会让我发布。

function filterData() {

    var val1 = $("#val1").val();
    var val2 = $("#val2").val();

    var removeIndexes = new Array();

    for (var i = val1; i <= val2; i++) {
        removeIndexes.push(i);
    }    

    $(removeIndexes).each(function(removeIndex) {
        var removeItemId = this;
        $(randomData).each(function(dataIndex) {
            var continueLoop = true;
            if (this.Id == removeItemId) {
                randomData.splice(dataIndex, 1);
                continueLoop = false;
            }
            return continueLoop;
        });
    });

    createGrid();
}

答案 1 :(得分:1)

您应该使用批量更新:

$("#resultsGrid").kendoGrid({
    dataSource: {
        batch: true,
        ...
    }, ...});

var grid = $("#resultsGrid").data("kendoGrid");
grid.tbody.find("input:checked").closest("tr").each( function() {
    var dataItem = grid.dataItem(this);
    grid.dataSource.remove(dataItem);
});
grid.dataSource.sync(); // this applies batched changes