剑道网格拖放问题
Kendo grid drag and drop issue
我们在剑道网格表中使用剑道拖放功能。
1)如果用户提供了任何可编辑字段的数据并且没有保存数据,如果用户点击/跳转到其他字段进行编辑。用户正在丢失更新的数据。
2)如果用户更新了任何记录,我们将再次刷新/再生表,或者如果我们从函数外部刷新/再生,或者我们使用函数外部添加了新记录。在此之后,用户不能删除行来替换为其他。
Jsfiddel文件var data = [
{ Id: 1, Name: "data 1", Position: 1 },
{ Id: 2, Name: "data 2", Position: 2 },
{ Id: 3, Name: "data 3", Position: 3 }
];
var dataSource = new kendo.data.DataSource({
data: data,
schema: {
model: {
Id: "Id",
fields: {
Id: { type: "number" },
Name: { type: "string" },
Position: { type: "number" }
}
}
}
});
var grid= $("#grid").kendoGrid({
dataSource: dataSource,
scrollable: false,
editable : true,
toolbar: ["save","cancel", "create"],
columns: ["Id", "Name", "Position"]
}).data("kendoGrid");
grid.table.kendoDraggable({
filter: "tbody > tr:not(.k-grid-edit-row)",
group: "gridGroup",
cursorOffset: { top: 10, left: 10 },
hint: function(e) {
return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
}
});
grid.table/*.find("tbody > tr")*/.kendoDropTarget({
group: "gridGroup",
drop: function (e) {
var target = dataSource.getByUid($(e.draggable.currentTarget).data("uid")),
dest = $(e.target);
if (dest.is("th")) {
return;
}
dest = dataSource.getByUid(dest.parent().data("uid"));
//not on same item
if (target.get("Id") !== dest.get("Id")) {
//reorder the items
var tmp = target.get("Position");
target.set("Position", dest.get("Position"));
dest.set("Position", tmp);
dataSource.sort({ field: "Position", dir: "asc" });
}
}
});
-
我以前遇到过类似的问题。我还在他们的论坛上发现了以下帖子- http://www.kendoui.com/forums/ui/grid/drag-and-drop-reordering.aspx#boD2qq6aG2OF1P8AAFTdxQ
如果你在表格中添加了额外的一列并在那里放置了图像或其他元素,那么你就可以将该元素用作可拖动目标,例如
grid.table.kendoDraggable({ filter: "tbody > .draggableTarget".....
-
在刷新表的情况下,表完全在DOM中重新创建,所以你必须重新订阅你的拖放功能
我在使用带有可编辑网格的较新的kendoSortable来实现拖放行排序时遇到了类似的问题。
This fiddle http://jsfiddle.net/UsCFK/273/works.
它使用上面提到的带有拖拽句柄的列来防止单元格编辑丢失-其他单元格在设置中被忽略:
grid.table.kendoSortable({
filter: ">tbody >tr",
hint: $.noop,
cursor: "move",
ignore: "TD, input",
placeholder: function (element) {
return element.clone().addClass("k-state-hover").css("opacity", 0.65);
},
container: '#grid tbody',
change: onGridRowChange
});
它还更新数据源中的位置字段,而不是像在其他一些示例中那样先删除,然后重新插入行——因为这会导致对移动的每一行都向服务器发出删除请求——这可能在单击批编辑取消按钮时导致问题。position字段仅用于演示目的,不应暴露于手动编辑
相关文章:
- 拖放区 AMD 需要 JS 问题
- jQuery 性能问题,通过为新元素启用拖放
- 拖放保存定位问题
- Jquery UI表拖放问题
- jQueryUI-拖放问题-拖动的元素位于其他DOM元素之后
- HTML5拖放;Internet Explorer中的删除问题(无法访问dataTransfer属性)
- 角度拖放保存在数据库中的位置和屏幕大小调整问题
- Jquery拖放问题
- 我的拖放插件有问题
- webkitGetAsEntry的Javascript拖放文件上传问题
- jQuery UI拖放鼠标位置问题
- 拖放问题jquery
- Html5拖放显示id的问题
- SVG嵌入到HTML中,拖放代码问题
- 拖放问题
- 剑道网格拖放问题
- 拖放问题firefox
- Jquery -我有拖放的问题
- jQuery可排序的拖放-克隆和其他问题
- JavaScript拖放类/ID问题