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

Question

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

Grid.addRow();

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

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

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页面之间移动).