Question

我可以在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);
                                }
                            });


                    });

Answer 1

我从telerik论坛中通过拖动获取了行重新排序的示例： http://www.telerik.com/forums/drag-and-drop-reordering

我已经扩充了示例，以便将网格外的行拖动到多个目标：

<强> DEMO

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网格外拖动行并同时进行排序？

1 个答案: