Kendo Grid Kendo模板的可拖拽行

Question

我將使用使用模板填充的kendo網格實現拖放行爲。我如何實現可拖動的行並使用劍道網格重新排序。

Answer 1

.Orderable() 

作品一種享受。也許嘗試「.Dragable（）」雖然我有點不確定。

Answer 2

看看下面我的演示代碼，並嘗試實施。

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" }); 
    }     
} 
}); 

Answer 3

把.Dragable（） 但要確保你坐在它在正確的地方，需要訂貨。有時候你可能沒有得到預期的結果，這可能是因爲沒有注意到訂單。