剑道网格:取消编辑删除新行

Kendo Grid: Canceling edit deletes new row

本文关键字：编辑 删除 新行 取消 网格      更新时间：2023-09-26

下面是我正在经历的行为的演示。

如果编辑id为1的现有行，将文本更改为其他内容，然后按"取消"按钮，则该行将正确恢复到以前的状态。

为了重现我的问题，你需要：

  • 添加新行
  • 按更新按钮保存
  • 再次选择行并按下更新按钮
  • 按下取消按钮
  • 那一排消失了

尽管在这个问题上也有类似的问题，但我还没有找到一个令人满意的答案。

有些人说我需要定义一个id。正如你从我的演示中看到的，这没有任何区别，新行有一个id，但它仍然会消失。

当您使用远程数据源时，有一些建议，但这在我的情况下不起作用，我需要使用本地数据。

最后，有了这个答案。虽然它确实可以防止新行消失，但"取消行"不会将数据恢复到旧状态，它只会关闭编辑器，并且数据在编辑后保持原样。

也有同样的问题。我通过简单地调用DataSource:的cancelChanges（）方法就解决了这个问题

..
cancel: function(e) {
            $('#mainGrid').data('kendoGrid').dataSource.cancelChanges();
        },
..

它似乎只是bug。但是，您仍然可以通过下面的代码获得所需的输出。

  1. 我引入了新的变量tempSavedRecords和更新使用kendo保存或删除记录时的变量数据源数据

  2. 当用户单击取消按钮时，用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（）方法，您可以对网格说，已分配的新数据是基础数据，新行不再是新的。

我希望这对你有帮助。

相关文章：