代码之家 › 专栏 › 技术社区 › techiva.blogspot.com

Kendo UI TreeView拖放获取目标(已拖放)TreeView对象

kendo-treeview drag-and-drop kendo-ui jquery javascript

1

techiva.blogspot.com · 技术社区 · 8 年前

作为参考,您可以查看 link here

在这个演示中,我可以将一些内容从一个类别移动到另一个类别,但我想捕获包含所有子类别的类别的更新列表。

这是我的代码片段

<div id="example">
        <div class="demo-section k-content">
            <h4>Treeview One</h4>
            <div id="treeview-left"></div>
            <h4 style="padding-top: 2em;">Treeview Two</h4>
            <div id="treeview-right"></div>
        </div>

        <script>
            $("#treeview-left").kendoTreeView({
                dragAndDrop: true,
                dataSource: [
                    { text: "Furniture", expanded: true, items: [
                        { text: "Tables & Chairs" },
                        { text: "Sofas" },
                        { text: "Occasional Furniture" }
                    ] },
                    { text: "Decor", items: [
                        { text: "Bed Linen" },
                        { text: "Curtains & Blinds" },
                        { text: "Carpets" }
                    ] }
                ]
            });

            $("#treeview-right").kendoTreeView({
                dragAndDrop: true,
                dataSource: [
                    { text: "Storage", expanded: true, items: [
                        { text: "Wall Shelving" },
                        { text: "Floor Shelving" },
                        { text: "Kids Storage" }
                    ]
                    },
                    { text: "Lights", items: [
                        { text: "Ceiling" },
                        { text: "Table" },
                        { text: "Floor" }
                    ]
                    }
                ]
            });
        </script>

我怎样才能做到这一点? 非常感谢。

1 回复 | 直到 8 年前

1

Rahul Gupta Jerod Venema 8 年前

我创建了一个 JsFiddle DEMO here .

您需要绑定 dragend event 然后你可以从那里获得目标树视图列表。以下是演示的片段:

function tree_dragend(e) {
  alert("See your console");
  console.log("Drag end sourceNode = ", e.sourceNode, "dropPosition = ", e.dropPosition, "destinationNode = ", e.destinationNode);

  var destinationTreeviewDOMElement = $( e.destinationNode ).closest( "div.k-treeview" );
  console.log("destinationTreeviewDOMElement = ", destinationTreeviewDOMElement);

  var destinationTreeview = $(destinationTreeviewDOMElement).data("kendoTreeView");
  console.log("destinationTreeview = ", destinationTreeview);

  console.log("destinationTreeviewData = ", destinationTreeview.dataSource.data());
}

var treeview_left = $("#treeview-left").data("kendoTreeView");
var treeview_right = $("#treeview-right").data("kendoTreeView");

treeview_left.bind("dragend", tree_dragend);
treeview_right.bind("dragend", tree_dragend);