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/

編輯如果在編輯模式下插入要輸入該行的行后，您必須記住插入頁面內的位置，因為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頁面之間移動）。