Question

这里我有一个代码来按下按钮时更新单元格。它工作正常，但它没有设置标志，表明该单元格已被更改。它应该看起来像痘红三角形： enter image description here

代码：

<a id="button" href="#">Click me</a>
<div id="grid"></div>

<script>
    var dataSource, grid;
    $(document).ready(function () {
        dataSource = new kendo.data.DataSource({
            data: [
                { category: "Beverages", name: "Chai", price: 18},
                { category: "Seafood", name: "Konbu", price: 6}
            ],
        })

        grid = $("#grid").kendoGrid({
            dataSource: dataSource,
            editable: true,
        }).data("kendoGrid");

        $('#button').click(function (e) {
            var data = grid.dataItem("tr:eq(1)");
            data.set('category', 'Merchandice');
        });
    });
</script>

更新：以下是基于@tstancin的更新：Kendo example。谢谢你的答案 - 我已经想到了。我想知道是否有可能通过som MVVM以更干净的方式进行更新？

来自肯尼思的亲切问候

Answer 1

如果这就是您想要的所有内容，那么您应该使用以下内容扩展按钮点击代码：

$('#button').click(function (e) {
    var data = grid.dataItem("tr:eq(1)");

    data.set('category', 'Merchandice');

    $("#grid tr:eq(1) td:eq(1)").addClass("k-dirty-cell");
    $("#grid tr:eq(1) td:eq(0)").prepend("<span class='k-dirty'></span>");
});

但是，例如，如果您手动将name列的值从 Chai 更改为其他值，然后单击click me按钮，名称列将消失。

您应该为每个单元格使用标志，并在data.set()之前设置它们。然后，在网格的dataBound事件中，您应该检查每个单元格的值，并在需要时分配脏标记。对于手动更改，您应该处理save事件并在那里设置标记。

Answer 2

我编写了一个脚本，可以使用这样的调用：

SetCellData(id, columnName, value);

因此，使用id，columnName和值，我可以更新网格中的值，并在该单元格上设置标志。

function SetCellData(id, columnName, value) {
    var dataItem = grid.dataSource.get(id);
    dataItem.set(columnName, value);
    var columnIndex = GetColumnIndex(columnName);
    if (columnIndex > -1) {
        var cell = $('tr[data-uid*="' + dataItem.uid + '"] td:eq(' + columnIndex + ')')

        if (!cell.hasClass("k-dirty-cell")){
            cell.prepend("<span class='k-dirty'></span>");
            cell.addClass("k-dirty-cell");
        }
    }

}

function GetColumnIndex(columnName) {
    var columns = grid.columns;
    for (var i = 0; i < columns.length; i++)
        if (columns[i].field == columnName)
            return i;
    return -1;
};

我的代码在这里：example

远程更新kendo网格中的单元格内容

2 个答案: