Question

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

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

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

我创建了一个基本的道场here，以表明我所说的实际上正在发生。

＆＃13;

$(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;
});

＆＃13;

<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>

＆＃13;

Answer 1

您已从UI中删除了行，但仍然删除了网格模型/数据源中可用的记录/数据，因此您也必须从模型中删除数据/记录。

请尝试使用以下代码段。

$(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（）实际上并没有从网格中删除行

2 个答案: