Question

我正在研究Kendo Grid上的功能。有一个表，每行都有一个复选框，有一个Select All选项会检查所有复选框，并且当您使用Select All行时，该Update All选项旁边有一个按钮单击Update All，它将更新网格中所选行的Status，但尚未在数据库上更新。要更新数据库上的那些行，您必须单击一个Save Changes按钮。我遇到的问题是，当我单击Update All按钮时，性能超过100行时非常慢，我知道为什么在Javascript中，这是执行此步骤的代码非常慢：

  var items = $('#grid').data().kendoGrid.dataSource.data();
$.each(selectedRows, function (index, r) {
 var indexOf = rows.indexOf(r);
 var item = items[indexOf];
item.set('STATUS', status); //This line of code is very slow for more than 100 records
});

因此，当有300多个记录时，Chrome变得无响应，因此使用set方法会使此过程非常缓慢。所以我将其更改为：

  var items = $('#grid').data().kendoGrid.dataSource.data();
$.each(selectedRows, function (index, r) {
 var indexOf = rows.indexOf(r);
 var item = items[indexOf];
item.STATUS = status; //It works fast now
});
kendoGrid.refresh();

网格在前端正确更新，但是当我单击Save Changes时，没有调用应将那些记录保存在数据库中的控制器，这是因为Status列上的更改未当我使用最后一种语法时被检测到。

有什么区别

item.set('STATUS', status);

和

item.STATUS = status; 
kendoGrid.refresh();

为什么在第二步中使用set()方法将行保存到数据库中，但是当我使用item.STATUS = status;并单击Save Changes时却没有发送已更改的行根据要求？

Answer 1

所以我找到了这个答案：https://stackoverflow.com/a/20959758/5614045 并更新了我的语法，如下所示：

 var items = $('#grid').data().kendoGrid.dataSource.data();
$.each(selectedRows, function (index, r) {
 var indexOf = rows.indexOf(r);
 var item = items[indexOf];
item.STATUS = status; //It works fast now
item.dirty = true; //Added this line of code.
});
kendoGrid.refresh();

它现在可以正常工作，显然有一个dirty标志，当设置为true时，表示项目已更改...

Kendo Grid全选并保存

1 个答案: