如何动态添加Kendo内联网格底部的行 -

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何动态添加Kendo内联网格底部的行 -相关的知识,希望对你有一定的参考价值。

如何在Angular 4中动态添加Kendo内联网格底部的行。

  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>

以上是关于如何动态添加Kendo内联网格底部的行 -的主要内容,如果未能解决你的问题,请参考以下文章

如何在 MVC 应用程序中转置 Kendo UI 网格中的行和列?

即使没有更新数据,如何强制 Kendo 网格更新

kendoui:grid - 在网格的顶部和底部设置寻呼机

kendo 将 HTML 元素绑定到网格选定的行/dataItem

如何使用 jQuery 将 Kendo DropDownList 动态添加到 html5 表中

Kendo UI:Kendo 网格的惰性绑定