Kendo UI Grid Inline - 在网格上的特定位置插入新行

Question

我正在尝试通过 addRow（）方法向网格插入一个新行，但我希望在网格上当前选定的行之后或当前选定的行之前添加它？有人可以帮忙吗？目前，我得到的是：

Grid.addRow（）;

$（＆＃34; .k-grid-edit-row＆＃34;）。appendTo（＆＃34; #Grid tbody＆＃34;）;

但是这会在表格的底部插入一行。我需要它在特定位置添加行，网格已经有行。

Answer 1

以下是步骤：

1. 获取所选项目
2. 获取与所选项目对应的项目。
3. 获取与所选项目对应的索引。
4. 使用insert中的DataSource方法指定要插入的位置。

代码：

var grid = $("#grid").data("kendoGrid");
// Get selected item
var sel = grid.select();
// Get the item
var item = grid.dataItem(sel);
// Get the index in the DataSource (not in current page of the grid)
var idx = grid.dataSource.indexOf(item);
// Insert element before
grid.dataSource.insert(idx, { /* Your data */ });
// Insert element after
grid.dataSourcer.insert(idx + 1, { /* Your data */ });

在此处查看此行动：http://jsfiddle.net/OnaBai/8J4kr/

编辑如果在编辑模式下插入要输入该行的行后，您必须记住要插入的页面内的位置，因为editRow在DOM级别工作：

var grid = $("#grid").data("kendoGrid");
// Get selected item
var sel = grid.select();
// Remember index of selected element at page level
var sel_idx = sel.index(); 
// Get the item
var item = grid.dataItem(sel);
// Get the index in the DataSource (not in current page of the grid)
var idx = grid.dataSource.indexOf(item);
// Insert element before (use {} if you want an empty record)
grid.dataSource.insert(idx, { LastName: "Smith", FirstName: "John", City: "Baiona" });
// Edit inserted row
grid.editRow($("#grid tr:eq(" + ( sel_idx + 1) + ")"));    

以后你应该做

// Insert element before (use {} if you want an empty record)
grid.dataSource.insert(idx + 1, { LastName: "Smith", FirstName: "John", City: "Baiona" });
// Edit inserted row
grid.editRow($("#grid tr:eq(" + ( sel_idx + 2) + ")"));  

在此处查看此行动：http://jsfiddle.net/OnaBai/8J4kr/1/

还有一个问题是，您可能需要移动到上一页或下一页，具体取决于您是在页面的第一行之前插入还是在页面的最后一行之后插入（使用page移动在Grip页面之间）。