下面是我正在经历的行为的演示。
如果编辑id为1的现有行,将文本更改为其他内容,然后按"取消"按钮,则该行将正确恢复到以前的状态。
为了重现我的问题,你需要:
- 添加新行
- 按更新按钮保存
- 再次选择行并按下更新按钮
- 按下取消按钮
- 那一排消失了
尽管在这个问题上也有类似的问题,但我还没有找到一个令人满意的答案。
有些人说我需要定义一个id。正如你从我的演示中看到的,这没有任何区别,新行有一个id,但它仍然会消失。
当您使用远程数据源时,有一些建议,但这在我的情况下不起作用,我需要使用本地数据。
最后,有了这个答案。虽然它确实可以防止新行消失,但"取消行"不会将数据恢复到旧状态,它只会关闭编辑器,并且数据在编辑后保持原样。
也有同样的问题。我通过简单地调用DataSource:的cancelChanges()方法就解决了这个问题
..
cancel: function(e) {
$('#mainGrid').data('kendoGrid').dataSource.cancelChanges();
},
..
它似乎只是bug。但是,您仍然可以通过下面的代码获得所需的输出。
- 我引入了新的变量tempSavedRecords和更新使用kendo保存或删除记录时的变量数据源数据
-
当用户单击取消按钮时,用tempSavedRecords填充剑道数据源
$(document).ready(function() { var tempSavedRecords = null; var gridDataSource = new kendo.data.DataSource({ data: [ { id: 1, description: 'Test 1', begin: new Date() } ], schema: { model: { id: 'id', fields: { id: { type: 'number' }, description: { type: 'string' }, begin: { type: 'date' } } } } }); $('#grid').kendoGrid({ dataSource: gridDataSource, scrollable: true, sortable: true, toolbar: ['create'], columns: [ { field: 'id', title: 'ID', width: 'auto' }, { field: 'description', title: 'Description', width: 'auto' }, { field: 'begin', title: 'Begin', width: 'auto', format: '{0:d}' }, { command: ['edit', 'destroy'], title: ' ', width: '172px'}], editable: { mode: 'inline', confirmation: false }, save:function(e){ updateTempRecords(); }, cancel:function(e){ if(tempSavedRecords != null){ $('#grid').data('kendoGrid').dataSource.data(tempSavedRecords); } else{ $('#grid').data('kendoGrid').dataSource.cancelChanges(); } }, remove:function(e){ $('#grid').data('kendoGrid').dataSource.remove(e.model) updateTempRecords(); } }); function updateTempRecords(){ tempSavedRecords = $('#grid').data('kendoGrid').dataSource.data(); tempSavedRecords = tempSavedRecords.toJSON(); } });
希望这能有所帮助。谢谢
$(document).ready(function() {
var tempSavedRecords = null;
var gridDataSource = new kendo.data.DataSource({
data: [
{ id: 1, description: 'Test 1', begin: new Date() }
],
schema: {
model: {
id: 'id',
fields: {
id: { type: 'number' },
description: { type: 'string' },
begin: { type: 'date' }
}
}
}
});
$('#grid').kendoGrid({
dataSource: gridDataSource,
scrollable: true,
sortable: true,
toolbar: ['create'],
columns: [
{ field: 'id', title: 'ID', width: 'auto' },
{ field: 'description', title: 'Description', width: 'auto' },
{ field: 'begin', title: 'Begin', width: 'auto', format: '{0:d}' },
{ command: ['edit', 'destroy'], title: ' ', width: '172px' }
],
editable: {
mode: 'inline',
confirmation: false
},
save:function(e){
updateTempRecords();
},
cancel:function(e){
if(tempSavedRecords != null){
$('#grid').data('kendoGrid').dataSource.data(tempSavedRecords);
}
else{
$('#grid').data('kendoGrid').dataSource.cancelChanges();
}
},
remove:function(e){
$('#grid').data('kendoGrid').dataSource.remove(e.model)
updateTempRecords();
}
});
function updateTempRecords(){
tempSavedRecords = $('#grid').data('kendoGrid').dataSource.data();
tempSavedRecords = tempSavedRecords.toJSON();
}
});
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="grid"></div>
<script src="http://cdn.kendostatic.com/2014.1.318/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<script src="script.js"></script>
</body>
</html>
发生这种情况是因为id仍设置为默认值。数据源将此类数据项视为"新"数据项,取消这些数据项将删除它们。保存"新"项目后,需要将其id
设置为非默认值。
我用这个拔毛器修改了您的更改,它似乎起作用了。我所做的唯一更改是将"id"列重命名为"ied"。
不知怎的,剑道示例中显示的"id"列名不起作用,对我来说这似乎是一个bug。
model: {
id: 'ided',
fields: {
ided: { type: 'number' },
description: { type: 'string' },
begin: { type: 'date' }
}
}
我可以通过在添加新行后重新设置数据对象来解决这个问题。
例如:
function onInsertNewRow(dataItem) {
myDataSource.insert(dataItem);
myDataSource.data(myDataSource.data());
}
通过调用data()方法,您可以对网格说,已分配的新数据是基础数据,新行不再是新的。
我希望这对你有帮助。