Question

如何在 Angular 4 中动态地在Kendo嵌入式网格底部添加一行。

当跳出最后一行的最后一个单元格时如何自动添加新行？

Answer 1

很难帮助您，无需任何代码。但是您可以执行以下操作：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.3.911/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.3.911/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
  <script>
    $(function() {
      $("#grid").kendoGrid({
        dataSource: {
          data: [{ Name: "John Doe", Age: "31" }]
        },
        editable: "incell"
      });
      
      $("#grid").on("focusout", "input", function() {
        let grid = $("#grid").data("kendoGrid"),
            $td = $(this).closest("td"),
            $tr = $td.parent(),
            tdCount = $tr.find("td").length;
        
        if ($td.index() == (tdCount - 1)) {
          // Add a new empty row at the beginning
          //grid.addRow();
          
          // Add a new empty row at the end
          grid.dataSource.add({});
          grid.editCell(grid.tbody.find("tr:last td:first")); // Open the cell for editing
        }
      });
    });
  </script>
</head>
<body>
  <div id="grid"></div>
</body>
</html>

主要代码：

$("#grid").on("focusout", "input", function() {
    let grid = $("#grid").data("kendoGrid"),
        $td = $(this).closest("td"),
        $tr = $td.parent(),
        tdCount = $tr.find("td").length;

    if ($td.index() == (tdCount - 1)) {
      // Add a new empty row at the beginning
      //grid.addRow();

      // Add a new empty row at the end
      grid.dataSource.add({});
      grid.editCell(grid.tbody.find("tr:last td:first")); // Open the cell for editing
    }
});

Demo

如何在Kendo嵌入式网格底部动态添加行-

1 个答案: