JQuery Remove() 实际上并没有从网格中删除行

Question

我一直致力于从网格中删除行，经过一些搜索后终于可以从我的网格中删除行了。这是一个只持续了短短几秒钟的雅虎时刻，因为我仔细检查了该行是否真的被删除了，并注意到它实际上并没有被删除，只是被隐藏了。

我通过使用网格中的过滤器发现了这一点，当我过滤其中一个已删除的行数据时，它再次出现，一旦我清除过滤器，所有已删除的行再次出现。

所以现在我对很多事情感到困惑，为什么这些行只是隐藏而没有真正删除，以及我如何实际从网格中删除行而不必使用 ajax 删除行然后再次重新绑定 table，这样做不好的原因是网格中的任何数据都将丢失，必须重新输入。因为正如我现在所看到的那样，如果我只是隐藏该行，那么当我从网格中获取所有数据并将其添加到数据库时，我将遇到问题，因为我删除了行一个原因。

我创建了一个基本的 dojo here 来证明我所说的确实在发生。

$(document).ready(function() {
  var junkData = [{
      "DiscountID": 1,
      "DealerDiscount": "15"
    }, {
      "DiscountID": 2,
      "DealerDiscount": "16"
    }, {
      "DiscountID": 3,
      "DealerDiscount": "17"
    }, {
      "DiscountID": 4,
      "DealerDiscount": "18"
    }, {
      "DiscountID": 5,
      "DealerDiscount": "19"
    }, {
      "DiscountID": 6,
      "DealerDiscount": "20"
    }, {
      "DiscountID": 7,
      "DealerDiscount": "21"
    }, {
      "DiscountID": 8,
      "DealerDiscount": "22"
    }, {
      "DiscountID": 9,
      "DealerDiscount": "23"
    }

  ];

  ShowGrid(junkData);
});

function ShowGrid(userdata) {

  $("#grid").kendoGrid({
    noRecords: {
      template: "No Records Available"
    },
    dataSource: {
      data: userdata
    },
    schema: {
      model: {
        DiscountID: "DiscountID"
      }
    },
    filterable: {
      mode: "row"
    },
    columns: [{
        title: "<input id='checkAll', type='checkbox', class='check-box' />",
        template: "<input name='Selected' class='checkbox' type='checkbox'>",
        width: "30px"
      }, {
        field: "DealerDiscount",
        title: "Dealer Discount",
        template: "<div style='text-align: center'>#= DealerDiscount #</div>"
      }, {
        title: "Delete",
        template: "<button type='button' class='removeit'>X</button>"
      }
    ],
    scrollable: true,
    height: 856
  });
}

$(document).on('click', 'button.removeit', function() {
  $(this).closest('tr').remove();
  return false;
});

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>

<div id="grid"></div>

Answer 1

您只从 UI 中删除了行，但 record/data 在网格 model/datasource 中仍然可用，因此您还必须从模型中删除 data/record。

请尝试使用以下代码片段。

$(document).on('click', 'button.removeit', function () {
   var currentrow = $(this).closest('tr');
   currentrow.remove();
   var grid1 = $('#grid').data('kendoGrid');
   var currItem = grid1.dataSource.getByUid($(currentrow).data('uid'));
   grid1.dataSource.remove(currItem); 
    return false;
});

Answer 2

删除的行将出现在 kendo ui 中，直到您将更改推送到服务器。要完全删除该行，您需要使用 grid.saveChanges()

所以下面的代码将从服务器以及 ui

中删除行

  const row = $(e.target).closest('tr')[0];
const grid = $(e.target).closest('#grid').data("kendoGrid");
grid.removeRow(row);
grid.saveChanges() //comment if you need to remove only from ui

JQuery Remove() 实际上并没有从网格中删除行

JQuery Remove() doesn't actually delete the row(s) from grid

jquery

telerik

telerik-grid

kendo-ui

kendo-grid