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

Question

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

Grid.addRow();

$(".k-grid-edit-row").appendTo("#Grid tbody");

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

Answer 1

这些是步骤:

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

代码:

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/

EDIT 如果在插入行后你想在编辑模式下输入该行，你必须记住你要插入的页面内的位置，因为 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 页面之间移动)。