javascript - 批量更新 Kendo UI Grid 动态更改值

Question

我将此 Kendo ui 网格绑定(bind)到表格。该网格具有激活的批量编辑功能。这意味着我可以直接更改网格单元上的值并保存。

我想要完成的是通过每行运行一个循环，更改客户端某些列中的显示值，然后单击保存按钮。

这是我的网格中的内容:

 @(Html.Kendo().Grid<TokenEncrypt.Models.SellerEntity>()
  .Name("grid")

  .Columns(columns =>
  {
      columns.Bound(c => c.Name);
      columns.Bound(c => c.EntityId);
      columns.Bound(c => c.SellerEntityTypeId);
      columns.Bound(c => c.CompanyId);
      columns.Bound(c => c.IsActive);
      columns.Bound(c => c.AwsAccessKeyId);
      columns.Bound(c => c.SecretAccessKey);
  })
  .HtmlAttributes(new { style = "height: 500px;" })
  .Scrollable()      
  .Editable(editable => editable.Mode(GridEditMode.InCell))
  .ToolBar(toolbar =>
  {
       toolbar.Save();
  })


  .DataSource(dataSource => dataSource
      .Ajax()
      .Read(read => read.Action("SellerEntities_Read", "Grid"))
      .Update(update => update.Action("SellerEntities_Ubdate", "Grid"))
      .Batch(true)
      .Model(model =>

      {
          model.Id(c => c.EntityId);
      }
      )

      )

        )

这就是我循环中的内容:(我不知道如何删除该值并将新值放入网格单元中。

 function gridChange() {

    var grid = $("#grid").data("kendoGrid");
    grid.dataSource.read();
    var count = grid.dataSource.total();
    $("#countElement").html('Encrypting ' + count + ' Lines');

    // get data from the grid
    var gridData = $("#grid").data().kendoGrid.dataSource.view();
    var grid = $("#grid").data("kendoGrid");
    // loop rows
    for (i = 0; i < count; i++) {

        str = gridData[i].EntityId;
        EntityIdhash = CryptoJS.SHA256(str);

        // remove old value
        // enter new value

        console.log('EntityId: ' + gridData[i].EntityId + '\n'); 
        console.log('EntityId encrypted: ' + EntityIdhash + '\n'); 

    }

};

Answer 1

您可以执行以下操作(无需看到任何 HTML):

$('#save').on('click', function () {
    success();
})

function success() {
    var storedValues = [];
    var gridData = $("#grid").data().kendoGrid.dataSource.data();
    for (var i = 0; i < gridData.length; i++) {
        if (gridData[i].EntityId) {
            storedValues.push({
                cellValue: gridData[i].EntityId,
            });
        }
    }
    var inputData = { yourVariable: JSON.stringify(storedValues) };
    $.ajax({
        cache: false,
        type: 'POST',
        url: "/YourController/Here",
        data: inputData
    }).done(function (data) {
       // success here
            $('#grid').data('kendoGrid').refresh();
        }
    });
};