首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在Kendo Grid的底部插入新行

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

Stack Overflow用户
提问于 2018-07-27 00:56:29
回答 1查看 2.7K关注 0票数 0

我知道这个问题已经被问了很多次了,我已经看到了解决方案,这些解决方案并不适合我做这件事的方式,如果我做这件事的方式有一个正确的解决方案,那么我肯定错过了它。

下面是我添加新行的方法

代码语言:javascript
复制
$(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();
});

我知道我可以将索引放在我想要的位置,就像这样。

代码语言:javascript
复制
$(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();
});

我已经想到了一种方法,那就是计算有多少行,然后用这个数字放在底部,但是没有更简单的方法吗?

EN

回答 1

Stack Overflow用户

发布于 2018-07-29 03:08:45

尝试使用add而不是insert,似乎可以做到这一点:

代码语言:javascript
复制
<!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>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51543995

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档