是否可以将行拖出 kendo 网格并同时在其中排序?
Is it possible to drag row outside kendo grid and sort within at same time?
我可以在 kendo ui 网格中拖动行。能够单独将网格外的行拖到另一个 html 元素。
可以同时进行吗?
网格内:
可在网格内拖动:
grid.table.kendoSortable({
filter: ">tbody >tr",
cursor: "move",
hint: function(element) {
return $('<div class="k-grid k-widget"><table><tbody><tr>' + element.html() + '</tr></tbody></table></div>');
},
container: ".etr-watchlist_grid tbody",
change: function(e) {
let oldIndex = e.oldIndex,
newIndex = e.newIndex,
data = grid.dataSource.data(),
dataItem = grid.dataSource.getByUid(e.item.data("uid"));
grid.dataSource.remove(dataItem);
grid.dataSource.insert(newIndex, dataItem);
}
});
拖到网格外:
$(".myGrid table tbody > tr").kendoDraggable({
group: "gridGroup",
threshold: 100,
hint: function(e) {
return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
}
});
$(".dropHere").kendoDropTarget({
group: "gridGroup",
drop: function(e) {
e.draggable.hint.hide();
var txt = '';
$(e.draggable.element[0]).find("td").each(function(idx, td){
txt += $(td).text() + '\n';
});
e.dropTarget.text(txt);
}
});
});
我从 telerik 论坛中举了一个通过拖动来重新排序的例子:
http://www.telerik.com/forums/drag-and-drop-reordering
我扩充了示例,将网格外的行也添加到多个目标:
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
selectable: true,
columns: ["id", "text", "position"]
}).data("kendoGrid");
grid.table.kendoDraggable({
filter: "tbody > tr",
group: "gridGroup",
threshold: 100,
hint: function(e) {
return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
}
});
grid.table.kendoDropTarget({
group: "gridGroup",
drop: function(e) {
e.draggable.hint.hide();
var target = dataSource.getByUid($(e.draggable.currentTarget).data("uid")),
dest = $(document.elementFromPoint(e.clientX, e.clientY));
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" });
}
}
});
$(".dropTarg").kendoDropTarget({
group: "gridGroup",
drop: function(e) {
console.log(e.draggable)
e.draggable.hint.hide();
var txt = '';
$(e.draggable.currentTarget).find("td").each(function(idx, td){
txt += $(td).text() + '\n';
});
e.dropTarget.text(txt);
}
});
我可以在 kendo ui 网格中拖动行。能够单独将网格外的行拖到另一个 html 元素。
可以同时进行吗?
网格内:
可在网格内拖动:
grid.table.kendoSortable({
filter: ">tbody >tr",
cursor: "move",
hint: function(element) {
return $('<div class="k-grid k-widget"><table><tbody><tr>' + element.html() + '</tr></tbody></table></div>');
},
container: ".etr-watchlist_grid tbody",
change: function(e) {
let oldIndex = e.oldIndex,
newIndex = e.newIndex,
data = grid.dataSource.data(),
dataItem = grid.dataSource.getByUid(e.item.data("uid"));
grid.dataSource.remove(dataItem);
grid.dataSource.insert(newIndex, dataItem);
}
});
拖到网格外:
$(".myGrid table tbody > tr").kendoDraggable({
group: "gridGroup",
threshold: 100,
hint: function(e) {
return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
}
});
$(".dropHere").kendoDropTarget({
group: "gridGroup",
drop: function(e) {
e.draggable.hint.hide();
var txt = '';
$(e.draggable.element[0]).find("td").each(function(idx, td){
txt += $(td).text() + '\n';
});
e.dropTarget.text(txt);
}
});
});
我从 telerik 论坛中举了一个通过拖动来重新排序的例子: http://www.telerik.com/forums/drag-and-drop-reordering
我扩充了示例,将网格外的行也添加到多个目标:
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
selectable: true,
columns: ["id", "text", "position"]
}).data("kendoGrid");
grid.table.kendoDraggable({
filter: "tbody > tr",
group: "gridGroup",
threshold: 100,
hint: function(e) {
return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
}
});
grid.table.kendoDropTarget({
group: "gridGroup",
drop: function(e) {
e.draggable.hint.hide();
var target = dataSource.getByUid($(e.draggable.currentTarget).data("uid")),
dest = $(document.elementFromPoint(e.clientX, e.clientY));
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" });
}
}
});
$(".dropTarg").kendoDropTarget({
group: "gridGroup",
drop: function(e) {
console.log(e.draggable)
e.draggable.hint.hide();
var txt = '';
$(e.draggable.currentTarget).find("td").each(function(idx, td){
txt += $(td).text() + '\n';
});
e.dropTarget.text(txt);
}
});