批量更新 Kendo UI 网格动态更改值

Question

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

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

这是我网格中的内容：

 @(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();
        }
    });
};

批量更新 Kendo UI 网格动态更改值

Batch update Kendo UI Grid Changing values dynamically

javascript

jquery

datasource

kendo-ui

kendo-grid