Kendo-UI网格使用Javascript在网格中设置值答案

【问题标题】：Kendo-UI grid Set Value in grid with JavascriptKendo-UI网格使用Javascript在网格中设置值
【发布时间】：2012-10-30 20:23:39
【问题描述】：

我只是想知道如何在 JavaScript 中更改网格中一行的值，以便在网格和底层数据源中将其标记为“脏”。

例如我有一个联系人/客户列表。他们有 3 个字段 FirstName/LastName/IsPrimaryContact。只能有 1 个主要联系人，因此当记录上的主要联系人设置为 true 时，我有 JavaScript 代码循环遍历数据源并将设置为主要联系人的任何其他联系人设置为 false。

JavaScript 一切正常，数据字段设置正确，但有两个问题： 1. 网格没有随着我在后台对数据源所做的更改而更新 2. 更改的记录没有标记为“脏”，因此当我调用 Datasource.sync() 时不会同步回来

我可以通过手动设置记录上的脏字段来解决第二个问题，但这似乎不正确。感觉我应该在网格级别更新字段，以便它在 UI 和数据源中处理它。

关于如何解决这个问题的任何想法？

谢谢

【问题讨论】：

标签： javascript data-binding kendo-ui kendo-grid

【解决方案1】：

基本上，当您想要更新记录时，您应该使用模型的 set 方法。例如，要更新数据源的第一条记录，您应该像这样更新它：

var firstItem = $('#GridName').data().kendoGrid.dataSource.data()[0];
firstItem.set('FirstName','The updated Name');

上面应该自动将标志标记为脏，它会通知网格有变化，所以网格会自动refresh。

此外，如果您想直接检索与特定行相关的对象，您可以使用 Grid 的 dataItem 方法。

【讨论】：

感谢@Pechka，它有效！但不知何故，我的网格没有显示脏标志。任何想法？试过了。 grid.refresh() 还是一样的...
Dirty flag 由 Grid 本身处理，而不是通过 dataSource 处理，因此仅当您手动更新 Grid 时才支持它。遗憾的是，在当前情况下，没有解决方法来启用此脏标记。
我找到了如何手动标记脏标志的解决方案。把答案贴在下面;)
为了避免刷新 Grid ，直接更新模型的值而不使用 set 方法，例如firstItem.FirstName = "The New Name" 最后，当你修改完所有你想要的模型或字段时，你可以调用 $('#GridName').data('kendoGrid').refresh()
如果这是一个复选框，则 firstItem.set('value','true'); 不起作用。

【解决方案2】：

我用一种非常简单有效的方式来做：

 var employee = employeeDataSource.get(employeeId);
     employee.dirty = true;  // set it as dirty
     employeeDataSource.sync();  //Tell the DataSource object to save changes

这是一个老问题，但希望它可以帮助任何有同样问题的人。

【讨论】：

【解决方案3】：

按照上面 Pechka 的回答，我添加了一些额外的代码来用脏标志标记已编辑的单元格。

这是我在列中需要的剃须刀代码，我添加了一个类名，以便以后可以在 jquery 选择器中使用它。

columns.Bound(r => r.RoomRate).HtmlAttributes(new { @class = "grid-allotment-roomrate" });

这是我的 Jquery 代码，用于在从服务器端成功检索数据后更新单元格并标记已编辑的单元格。

var dataSource = $("#grid-allotments").data("kendoGrid").dataSource;
var data = dataSource.data();
$.each(data, function (index, rowItem) {
    var checkbox = $("#checkbox_" + rowItem.RoomTypeId + "_" + rowItem.Date.getTime());
    if (checkbox != null && checkbox.is(':checked')) {
        $.ajax({
            url: "RackRate/GetRackRateForRoomTypeOn",
            type: "POST",
            data: { roomTypeId: rowItem.RoomTypeId, date: rowItem.Date.toUTCString() },
            success: function (result) {
                data[index].set('RoomRate', result);
                $('tr[data-uid="' + rowItem.uid + '"] .grid-allotment-roomrate').prepend('<span class="k-dirty"></span>');
            }
        });
    }
});

下面是负责高亮脏标志的代码行。

$('tr[data-uid="' + rowItem.uid + '"] .grid-allotment-roomrate').prepend('<span class="k-dirty"></span>');

【讨论】：

后期添加这个，但是我发现（由于 set() 调用引起的网格读取），如果要对多个网格项执行此操作，则必须设置脏标志在 set() 调用之后的单独 each() 调用中，或者只有最后一项显示脏平面。

【解决方案4】：

我以这种方式使用它 - 至少与复选框一起使用。我将使用“编辑”按钮设置列如下所示：

columns.Command(command => {command.Edit().HtmlAttributes(new { id = "btnEdit_" + "${Id}" }); }).Width(100).Hidden(true);

点击第一列（我有一个带有超链接的图像）使用 onclick 函数以编程方式单击“编辑”按钮，单击复选框，然后单击“更新”按钮。可能更“老派”，但我喜欢知道它遵循我自己更新时的顺序。

我传入对象（“this”），所以当它出现时我可以获取行和复选框，新状态为 0 或 1（我有一些使用它的代码，但对于这个演示来说并不是必需的，所以为了简单起见，我将这部分从我的函数中删除），以及该项目的 ID：

columns.Bound(p => p.IsActive).Title("Active").Width(100).ClientTemplate("# if (IsActive == true ) {# <a href=javascript:void(0) id=btnActive_${Id} onclick=changeCheckbox(this, '0', ${Id}) class='k-button k-button-icontext k-grid-update'><img style='border:1px solid black' id=imgActive src=../../Images/active_1.png /></a> #} else {# <a href=javascript:void(0) id=btnActive_${Id} onclick=changeCheckbox(this, '1', ${Id}) class='k-button k-button-icontext k-grid-update'><img style='border:1px solid black' id=imgActive src=../../Images/active_0.png /></a> #}#");

function changeCheckbox(obj, status, id) {
    var parentTr = obj.parentNode.parentNode;
    $('[id="btnEdit_' + id + '"]').click();

    parentTr.childNodes[5].childNodes[0].setAttribute("id", "btnUpdate_" + id); // my Update button is in the 6th column over
    parentTr.childNodes[0].childNodes[0].setAttribute("id", "chkbox_" + id);
    $('[id=chkbox_' + id + ']').click().trigger("change");
    $('[id=chkbox_' + id + ']').blur();

    var btnUpdate = $('[id="btnUpdate_' + id + '"]');
    $('[id="btnUpdate_' + id + '"]').click();

}

当然，上面的代码假定复选框位于第一列。否则，将 chkbox setAttribute 行上的第一个 childNodes[0] 调整为它所在的列，减一，因为它从零开始计数。

【讨论】：

【解决方案5】：

对我来说是这样的（无需实例化网格）：

   select: function(e) {
           console.log("select");
           var item = e.item;
           var text = item.text();
           var index = item.index();
           console.log(item);
           console.log(text);
           console.log(index);
           var dataItem = this.dataItem(index);
           console.log(dataItem);
           // SET RETURNED VALUES FOR MODEL
           options.model.set("actionName.id", dataItem.id);
         }

【讨论】：

【解决方案6】：

set("fieldname",value) 将自动刷新网格，有一种简单的方法可以同时更新 UI 值和字段值，而无需刷新。只是做，例如：

    data.FieldName = "Whatevervalue";
    $(currentrow.children()[getColumnIndex("FieldName")]).text("Whatevervalue");

    function getColumnIndex(columnName) {
    var index;
    var columns = $("#grid").data("kendoGrid").columns;
    for (var i = 0; i < columns.length; i++) {
        if (columns[i].field == columnName) {
            index = i;
            return index;
        }
    }
}

    var data = $grid.data("kendoGrid")._data;
    var currentrow = $grid.data("kendoGrid").tbody.find("tr[data-uid='" +      data[i].uid + "']");

希望对你有帮助

【讨论】：