Question

我将使用使用模板填充的kendo网格实现拖放行为。如何实现可拖动的行并使用kendo网格进行重新排序。

Answer 1

    .Orderable()

工作一种享受。也许试试＆＃34; .Draggable（）＆＃34;虽然有点不确定。

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

put .Dragable（）但要确保你坐在正确的地方，需要订购。有时您可能无法获得预期的结果，而这可能是因为没有注意订单。

Kendo Grid可拖动行与剑道模板

3 个答案: