Kendo Grid 指定位置增加记录
来源:互联网 发布:网络语cbd女生 编辑:程序博客网 时间:2024/06/15 23:29
原文出处:https://stackoverflow.com/questions/24931390/kendo-ui-grid-inline-insert-new-row-at-a-specific-position-on-the-grid
![](https://s.zkcdn.net/Advertisers/6768ddb6a63e482c9c31155cdde7af9a.png)
![](https://engine.adzerk.net/i.gif?e=eyJhdiI6NDE0LCJhdCI6NCwiYnQiOjAsImNtIjo0NzE0OTMsImNoIjoxMTc4LCJjayI6e30sImNyIjoxNjI3NzYzLCJkaSI6ImRmMTNmZWI1NmY1ZTQ0MmI5ODgxNGE3ZWMxN2I1ZGUxIiwiZG0iOjEsImZjIjoxOTI0NDQyLCJmbCI6MjE0MjMxMiwiaXAiOiIxMjEuMTMuMTA4LjIwNyIsImt3IjoiamF2YXNjcmlwdCxqcXVlcnksa2VuZG8tdWksa2VuZG8tZ3JpZCIsIm53IjoyMiwicGMiOjAsImVjIjowLCJwciI6MTYwNCwicnQiOjEsInJmIjoiaHR0cHM6Ly93d3cuYmFpZHUuY29tL2xpbms_dXJsPWMxcnNheWZwM1E4ZkYteGpSODZfZHphdC1DbWpHdVdoTkhLTm5oaEFNLVkzb0FoZTRUTlM3d0phVGVMU1ZDZXo1NWJZVnd0czJ1RHE3REU5NGpqX0VNMUN5NzQ2eW1DQU5fbV90TTlKZEx3Z2xIODJsclJLOEhJTDhXWkNkekhkMHBROUxiZW5iZXdXYy1BVzB6NnUybFluOVRhLWtzVW14dmpaMW9aUGdHYSZ3ZD0mZXFpZD1mMmViNmFkMDAwMDAxMzI0MDAwMDAwMDY1OTQyM2E0MSIsInNhIjoiMyIsInNiIjoiaS0wOTllNmY5M2ZhODE0N2Q5NCIsInNwIjo3ODIwLCJzdCI6ODI3NywidWsiOiJ1ZTEtNGM3ZjQ5NThmM2I5NDg1YThjYWVmOWFiODYxZmM2MTgiLCJ6biI6NDMsInRzIjoxNDk3NTEyNzk3Mjc5LCJiZiI6dHJ1ZSwicG4iOiJhZHplcmszNzc5MTc2OTIiLCJmcSI6MH0&s=kq5KH3EwA0YWhJ3KUaPFdGCFNa0)
I am trying to insert a new row via the addRow() method to the grid but I want it to be added AFTER the currently selected row on the grid OR BEFORE the currently selected row? Can anyone help with this please? At the moment all I got was:
Grid.addRow(); // 在第1行增加
$(".k-grid-edit-row").appendTo("#Grid tbody"); // 在最后1行增加(配合上面的Grid.addRow()用)
But this inserts a row at the bottom of the table. I need it to add rows at specific positions with the grid which would already have rows.
1 Answer
These are the steps: (在某行前、后插入记录步骤)
- Get the selected item
- Get the item corresponding to the selected item.
- Get the index corresponding to the item that is selected.
- Use
insert
method inDataSource
for specifying the position where you want to insert.
Code:
var grid = $("#grid").data("kendoGrid");// Get selected itemvar sel = grid.select();// Get the itemvar 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 beforegrid.dataSource.insert(idx, { /* Your data */ });// Insert element aftergrid.dataSourcer.insert(idx + 1, { /* Your data */ });
See it in action here: http://jsfiddle.net/OnaBai/8J4kr/
EDIT If after inserting the row you want to enter that row in edit mode, you have to remember the position inside the page where you are inserting since editRow
works at DOM level:
var grid = $("#grid").data("kendoGrid");// Get selected itemvar sel = grid.select();// Remember index of selected element at page levelvar sel_idx = sel.index(); // Get the itemvar 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 rowgrid.editRow($("#grid tr:eq(" + ( sel_idx + 1) + ")"));
For after you should do
// Insert element before (use {} if you want an empty record)grid.dataSource.insert(idx + 1, { LastName: "Smith", FirstName: "John", City: "Baiona" });// Edit inserted rowgrid.editRow($("#grid tr:eq(" + ( sel_idx + 2) + ")"));
See it in action here: http://jsfiddle.net/OnaBai/8J4kr/1/
There is an additional question that is that you might need to move to previous or next page depending if you are inserting before the first row of a page or after the last row of a page (use page
for moving between Grip pages).
- Kendo Grid 指定位置增加记录
- kendo ui grid 汉化
- MVC kendo Grid EditorTemplate
- kendo grid序号显示
- Kendo UI Grid
- Kendo UI Grid
- MySQL数据库在指定位置增加字段
- MySQL数据库在指定位置增加字段
- MVC Kendo总结之-----> Grid
- kendo ui grid 高度自适应
- [JS]: Kendo UI: Grid, Upload
- kendo grid 的小例子
- 封装扩展Kendo UI Grid
- kendo ui grid 合計
- kendo widow 打开的位置
- sql排序后指定记录显示在指定位置
- 如何为增加的列指定位置 (zz)
- 给MySQL表增加指定位置的列
- Kotlin Coroutine 协程Gradle配置
- MAC下GDB出现问题-Unable to find Mach task port for process-id 1262: (os/kern) failure (0x5).
- Android常用组件-editview
- JAVA---TTML
- docker搭建registry(对于认证的个人用户)
- Kendo Grid 指定位置增加记录
- Ecshop后台增加|添加商店设置选项和使用方法详解
- Bootstrap Tree View,简单而优雅的树结构组件
- springboot 启动报错:Cannot determine embedded database driver class for database type NONE
- Keycode对照表
- 判断手机是否root
- 密码强度等级
- C++获取当前路径
- FTP连接格式
dropdownlist
have to do with programmatically add a row at a specific position. What is what you are going to insert? When is this inserted? What triggers the insertion? Can you review you original question and put there all the relevant information? – OnaBai Jul 24 '14 at 11:13