我将使用使用模板填充的kendo网格实现拖放行为。我如何实现可拖动的行并使用剑道网格重新排序。Kendo Grid Kendo模板的可拖拽行
0
A
回答
0
.Orderable()
作品一种享受。也许尝试“.Dragable()”虽然我有点不确定。
0
看看下面我的演示代码,并尝试实施。
var data = [
{ id: 1, text: "text 1", position: 0 },
{ id: 2, text: "text 2", position: 1 },
{ id: 3, text: "text 3", position: 2 }
]
var dataSource = new kendo.data.DataSource({
data: data,
schema: {
model: {
id: "id",
fields: {
id: { type: "number" },
text: { type: "string" },
position: { type: "number" }
}
}
}
});
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
scrollable: false,
columns: ["id", "text", "position"]
}).data("kendoGrid");
grid.table.kendoDraggable({
filter: "tbody > tr",
group: "gridGroup",
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.get($(e.draggable.currentTarget).data("id")),
dest = $(e.target);
if (dest.is("th")) {
return;
}
dest = dataSource.get(dest.parent().data("id"));
//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" });
}
}
});
0
把.Dragable() 但要确保你坐在它在正确的地方,需要订货。有时候你可能没有得到预期的结果,这可能是因为没有注意到订单。
相关问题
- 1. Kendo UI Grid Grid模板
- 2. Kendo UI Grid Grid模板
- 3. Kendo Grid外键模板
- 4. 模板无效 - Kendo Grid
- 5. Kendo Grid模板与JQuery的迷你图
- 6. Kendo UI MVC Grid - DataSource干扰列模板
- 7. Kendo UI Web Grid - Popup_Editor模板 - Dropdown
- 8. 使用Angular模板进行Kendo UI Grid详细模板
- 9. Kendo TabStrip和Kendo模板
- 10. Kendo Listview + Kendo DataSource +模板
- 11. Kendo dropdown - 模板
- 12. Kendo UI Grid多选拖放问题
- 13. Kendo UI Grid:添加包含影响模板的变量的行
- 14. 如何在使用Kendo Grid时为单行设置行模板?
- 15. Kendo Grid FilterMenu
- 16. Kendo Grid with DropdownList
- 17. Kendo UI Grid,Durandal
- 18. Kendo Grid plumbing
- 19. kendo grid multi filterable
- 20. Kendo Grid Computed Column
- 21. kendo grid cancelChanges issue
- 22. Kendo UI模板中的Javascript
- 23. Kendo内部的Kendo MVC Grid TabStrip
- 24. Kendo Grid:禁用行编辑
- 25. Kendo UI Grid获取行值
- 26. Kendo Grid - 行展开动画
- 27. Kendo UI Grid - 显示行号
- 28. Kendo Grid - 多个页脚行
- 29. Kendo Grid内部的Kendo日期选择器Tabstrip - 无效的模板
- 30. Kendo Grid模板 - 在模板中使用Javascript变量
你好那里.... –