我知道这个问题已经被问了很多次了,我已经看到了解决方案,这些解决方案并不适合我做这件事的方式,如果我做这件事的方式有一个正确的解决方案,那么我肯定错过了它。
下面是我添加新行的方法
$(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();
});
我已经想到了一种方法,那就是计算有多少行,然后用这个数字放在底部,但是没有更简单的方法吗?
发布于 2018-07-29 03:08:45
尝试使用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>
https://stackoverflow.com/questions/51543995
复制相似问题