使用数据在javascript中将行添加到剑道网格答案

【问题标题】：Add row to kendo grid in javascript with data使用数据在javascript中将行添加到剑道网格
【发布时间】：2018-07-16 20:10:43
【问题描述】：

添加新记录时，用户会看到一个包含要填写的表单的模式。单击“确定”时，数据将保存到 DB 并关闭模式。但是我现在必须将此记录添加到网格中。我不能只从数据库中刷新网格，因为它可能会清除用户可能在网格中所做的其他更改。

我需要从各种表单字段中获取数据并将其作为 javascript 中的新行传递给网格。我见过一个例子，其中一行从一个剑道网格复制到另一个，但我找不到从头开始客户端添加新记录到剑道网格的任何内容。这是从一个网格复制到另一个网格的示例：how to add a new row with pre defined data in kendo grid?

基本上我想做的是这样的：

var newRow = {field1: $("#field1").val(), field2: $("#field2").val(), field3: $("#field3").val()};

var grid = $("#grid").data("kendoGrid");
grid.addRow(newRow);

【问题讨论】：

标签： javascript kendo-ui telerik

【解决方案1】：

这不是addRow() 的目的。根据文档，它“向网格添加一个空数据项”，因此它不接受任何参数，也不向网格添加数据。

您应该使用dataSource.add() 添加新数据：

var newRow = {field1: $("#field1").val(), field2: $("#field2").val(), field3: $("#field3").val()};

var grid = $("#grid").data("kendoGrid");
grid.dataSource.add(newRow);

Demo

【讨论】：

【解决方案2】：

使用 grid.insert(0, dataItem); 插入 Grid 顶部；

您的样本：

var newRow = {field1: $("#field1").val(), field2: $("#field2").val(), field3: $("#field3").val()};

var grid = $("#grid").data("kendoGrid");
grid.dataSource.insert(0, newRow);

【讨论】：