Question

我一直在寻找一种方法来在用户更改到另一行时自动保存客户端编辑的网格数据（就像访问，sql管理工作室等）。这似乎有点挑战。

一种方案是使用数据源同步，但这就是失去我们的单元格位置的问题（它总是跳转到单元格0,0）。

我已经看到了一些聪明的工作（在案例之后回到单元格，顺便提一下非常感谢谢谢），但是经过一些漫长的测试（由我自己和其他人）似乎有点“小问题”（或许我只需要更多地研究这个）

无论如何，我想探索可能不使用这种数据源同步，也许只是“手动”进行服务器端调用（这有点可惜，但如果这是我们需要做的，那就这样吧）。如果我这样做，我会想要重置细胞小红细胞“脏”指示器。

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

所以，如上面的链接，我有以下内容..

 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

在以上都没有工作之后，我尝试了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 ”类（ 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 Grid：删除脏单元格指示器

3 个答案: