添加新记录后，Kendo UI 网格拖放停止工作答案

【问题标题】：Kendo UI grid drag&drop stops working after adding new record添加新记录后，Kendo UI 网格拖放停止工作
【发布时间】：2015-08-26 12:31:39
【问题描述】：

我有带有拖放功能的 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();

Fiddle.

如果您创建新记录或在创建新行时点击“取消”，拖放将停止工作。我认为相同的问题会出现在所有网格 CRUD 操作中。

任何想法如何解决这个问题？

【问题讨论】：

标签： kendo-ui kendo-grid

【解决方案1】：

这个问题发生是因为剑道重绘所有的行（所有的DOM元素）在每个动作上再次，例如save，cancel，所以任何附加到DOM的事件都会丢失。

您所要做的就是在这些事件上调用createDraggable() 以重新创建所有拖放功能。请注意，如果您有一个大网格，这可能会很糟糕。

以下是网格事件：

cancel: function() {
    window.setTimeout(function() {
        createDraggable();
    }, 1); 
},
save: function() {
    window.setTimeout(function() {
        createDraggable();
    }, 1); 
}

是的，它很丑。 setTimeout 的目的是模拟 after 事件，因为这些事件被称为 before。我的意思是，它们在 DOM 发生变化之前被调用，我们需要在此之后应用拖放，否则它们将再次丢失。所以定时器在更改完成后立即执行，我们得到一个 after 事件。您还有remove 和edit 事件。

Fiddle

【讨论】：