Question

我知道这个问题已经问过很多次了，我已经看到了解决方案，但是这些解决方案都不适合我的工作方式，如果我的工作方式有正确的解决方案，那么我一定错过了。

这是我要添加新行的方式

$(document).on('click', '.btnAddNewRoom', function (e) {
    let roomGrid = $('#TabEditor').data("kendoGrid");

    roomGrid.dataSource.insert({ "RoomID": -1, "RoomName": "" + $('#txtNewRoom').val() + "", "Areas": [{ "AreaID": -1, "AreaName": "New Area" }] });
    roomGrid.refresh();
});

我知道我可以像这样放置一个索引。

$(document).on('click', '.btnAddNewRoom', function (e) {
    let roomGrid = $('#TabEditor').data("kendoGrid");

    roomGrid.dataSource.insert(0, { "RoomID": -1, "RoomName": "" + $('#txtNewRoom').val() + "", "Areas": [{ "AreaID": -1, "AreaName": "New Area" }] });
    roomGrid.refresh();
});

我想到了一种方法，那就是计算有多少行，然后使用该数字放在底部，但这不是更简单的方法吗？

Answer 1

尝试使用add代替insert似乎可以解决问题：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
</head>
<body>
  
  <button onclick="addRow()">Test</button>
  
<div id="grid"></div>
<script>
let a = 1;

$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: {
   data: [
    { id: 1, name: "Jane Doe", age: 30 },
    { id: 2, name: "John Doe", age: 33 }
   ],
   schema:{
    model: {
     id: "id",
     fields: {
       age: { type: "number"}
     }
    }
   }
  }
});
  
  function addRow() {
    let grid = $("#grid").data("kendoGrid");
    grid.dataSource.add({ id: 0, name: "Test" + a++, age: 10 });
  }
</script>
</body>
</html>

Answer 2

这可以通过Kendo UI网格配置完成

“可编辑”：{ “ mode”：“ inline”， “ createAt”：“底部” }

如何在Kendo Grid的底部插入新行

2 个答案: