Kendo 网格：删除脏单元格指示器

Question

我一直在寻找一种方法来在用户更改到另一行时自动保存我的客户端编辑的网格数据（就像在访问中一样，sql management studio 等）。做起来好像真的有点挑战。

一种方案是使用数据源同步，但这有丢失单元格位置的问题（它总是跳到单元格 0、0）。

有人向我展示了一些聪明的变通办法（案件结束后回到牢房，顺便说一句，非常感谢，谢谢），但经过一些长时间的测试（由我自己和其他人）似乎有点 "glitchy" （也许我只需要在这方面做更多的工作）

无论如何，我想探索也许不使用这个数据源同步，也许只是做服务器端调用 "manually"（这有点遗憾，但如果那是我们需要做的，随它吧）。如果我这样做，我想重置细胞小红细胞 "dirty" 指标。

我想我可以使用类似于 this scheme 的东西（除了不是重置标志，我想取消设置）。

所以，如上link，我有以下..

 var pendingChanges = [];

 function gridEdit(e) {
   var cellHeader = $("#gridID").find("th[data-field='" + e.field + "']");
   if (cellHeader[0] != undefined) {
      var pendingChange = new Object();         
     pendingChange.PropertyName = e.field;        
     pendingChange.ColumnIndex = cellHeader[0].cellIndex;        
     pendingChange.uid = e.items[0].uid;
     pendingChanges.push(pendingChange);
    }
   }

我们从数据源更改调用 gridEdit 的地方..

var dataSrc = new kendo.data.DataSource({
change: function (e) {
  gridEdit(e);
},

现在假设我们有一个检测行更改的回调，我想我可以执行以下操作...

// clear cell property (red indicator)
for (var i = 0; i < pendingChanges.length; i++) {
  var row = grid.tbody.find("tr[data-uid='" + pendingChanges[i].uid + "']");
  var cell = row.find("td:eq(" + pendingChanges[i].ColumnIndex + ")");

  if (cell.hasClass("k-dirty-cell")) {
    cell.removeClass("k-dirty-cell");

    console.log("removed dirty class");
  }
}

pendingChanges.length = 0;

// No good, we loose current cell again! (sigh..)
//grid.refresh();

当这不起作用时，我还尝试重置数据源脏标志..

// clear dirty flag from the database
var dirtyRows = $.grep(vm.gridData.view(),
  function (item) {
    return item.dirty == true;
  })

if (dirtyRows && dirtyRows.length > 0) {
  dirtyRows[0].dirty = false;
}

demo here

在上述 none 工作后，我尝试了 grid.refresh()，但这与数据源同步有相同的问题（我们丢失了当前单元格）

谁知道我如何清除这个单元格指示器，而不刷新似乎完全失去我们编辑上下文的整个网格？

在此先感谢您的帮助！

Answer 1

Css :

.k-dirty-clear {
  border-width:0;
}

网格编辑事件：

  edit: function(e) {
    $("#grid .k-dirty").addClass("k-dirty-clear"); //Clear indicators
    $("#grid .k-dirty").removeClass("k-dirty-clear"); //Show indicators
  }

http://jsbin.com/celajewuwe/2/edit

Answer 2

解决该问题的简单方法是将“标志”的颜色覆盖为透明。只需覆盖“.k-dirty”class (border-color) 只需将以上几行添加到您的 css

CSS:

//k-dirty is the class that kendo grid use for mark edited cells that not saved yet. 
//we override that class cause we do not want the red flag
.k-dirty {
    border-color:transparent transparent transparent transparent;
}

Answer 3

这也可以通过应用以下样式来完成，

<style>
  .k-dirty{
    display: none;      
  }
</style>

Kendo 网格：删除脏单元格指示器

Kendo Grid: Removing dirty cell indicators

kendo-ui

kendo-grid