我有Kendo UI网格,具有拖放功能:
var data = [
{ id: 1, text: "text 1", position: 0 },
{ id: 2, text: "text 2", position: 1 },
{ id: 3, text: "text 3", position: 2 },
{ id: 4, text: "text 4", position: 40 },
{ id: 5, text: "text 5", position: 100 },
{ id: 6, text: "text 6", position: 600 },
{ id: 7, text: "text 7", position: 47000 },
{ id: 8, text: "text 8", position: 99999 },
{ id: 9, text: "text 9", position: 1000000 }];
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,
editable : "popup",
columns: ["id", "text", "position"],
toolbar: ["create"]
}).data("kendoGrid");
var createDraggable = function() {
grid.table.find("tbody tr").kendoDraggable({
cursorOffset: {
top: 10,
left: 10
},
group: "gridGroup",
hint: function(e) {
return $('<div class="k-grid k-widget" style="color:red"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
}
});
grid.table.find("tbody tr").kendoDropTarget({
dragenter: function (e) {
var target = grid.dataSource.getByUid($(e.draggable.currentTarget));
$(e.dropTarget[0]).addClass("highlight-droparea");
// e.dropTarget.addClass("highlight-droparea");
console.log('entering');
},
dragleave: function (e) {
$(e.dropTarget[0]).removeClass("highlight-droparea");
//e.dropTarget.removeClass("highlight-droparea");
console.log('leaving');
},
group: "gridGroup",
drop: function(e) {
var target = grid.dataSource.getByUid($(e.draggable.currentTarget).data("uid")),
dest = $(e.target);
if (dest.is("th") || dest.is("thead") || dest.is("span") || dest.parent().is("th")) {
return;
}
//in case the grid contains an image
else if (dest.is("img")) {
dest = grid.dataSource.getByUid(dest.parent().parent().data("uid"));
} else {
dest = grid.dataSource.getByUid(dest.parent().data("uid"));
}
//not on same item
if (target.id !== dest.id) {
//reorder the items
var tmp = target.get("position");
target.set("position", dest.get("position"));
dest.set("position", tmp);
//Lets mark the changes as dirty
target.dirty = true;
dest.dirty = true;
grid.dataSource.sort({ field: "position", dir: "asc" });
}
createDraggable();
}
});
};
createDraggable();
如果您创建新记录,则拖放功能会停止工作或点击&#34;取消&#34;在创建新行时。我认为同样的问题会出现在所有网格CRUD操作中。
任何想法如何解决这个问题?