繁体   English   中英

Kendo网格更改多个选定的单元格值

[英]Kendo grid change multiple selected cells value

假设我有几行填充数字的数据。 我想选择多个单元格然后单击网格外的按钮将其值更改为其他数字,让我们说'8'。 样品

Telerik的员工给了我这个解决方案:

$(".change").click(function () {
    var grid = $("#Grid").data("kendoGrid");
    var cellsToChange = grid.select();

    for (var i = 0; i < cellsToChange.length; i++) {
        var item = grid.dataItem($(cellsToChange[i]).closest("tr"));
        item.ProductName = "new value";
    }

    grid.refresh();
});

但问题是我不知道将选择哪些单元格,因此我无法使用item.ProductName 有没有办法直接设置所有选定单元格的值,例如cellsToChange[i].value

您可以从grid.columns或相应的th元素中获取列名。 使用grid.cellIndex方法选择正确的列:

$("#change").click(function() {
    var selected = grid.select();
    var header = grid.thead;
    for (var i = 0, max = selected.length ; i < max ; i++) {
        var index = grid.cellIndex(selected[i]);
        var th = $(header).find("th").eq(index);
        // could also use grid.columns[index].field 
        // (not sure if this gets reordered on column reorder though)
        var field = $(th).data("field");

        var item = grid.dataItem($(selected[i]).closest("tr"));
        item[field] = "new value";
    }

    grid.refresh();
});

关于你的注释: dataItem.set()导致<tr>元素从它们的上下文中删除(因为grid.refresh()将为视图创建新的行),因此, grid.dataItem()不会使用您仍然可以引用的旧DOM元素为您提供预期结果。

如果你想使用dataItem.set() ,你可以尝试这样的解决方法:

$("#change").click(function () {
    var selected = grid.select(),
        header = grid.thead,
        dataItem,
        index,
        field,
        value,
        th;

    for (var i = 0, max = selected.length; i < max; i++) {
        dataItem = grid.dataItem($(selected[i]).closest("tr"));
        index = $(selected[i]).index();
        th = $(header).find("th").eq(index);
        field = $(th).data("field");
        value = "new value " + i;

        setTimeout(function (dataItem, field, value) {
            return function () {
                dataItem.set(field, value);
            }
        }(dataItem, field, value), 5);
    }
});

演示

您必须首先检索网格的ColumnList,然后循环遍历它

$(".change").click(function () {
    var grid = $("#Grid").data("kendoGrid");
    var columnsListOfView = grid.columns;
    var cellsToChange = grid.select();

    for (var j = 0; i < cellsToChange.length; i++) {
        var item = grid.dataItem($(cellsToChange[i]).closest("tr"));
        for (var j = 0; j < columnsListOfView.length; j++) {
         //Here columnsListOfView[j].field will give you the different names that you need 
         var field=columnsListOfView[j].field;
         item[field] = "new value";    
        }
    }

    grid.refresh();
});

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM