kendo-ui - Kendo UI TreeView - 如何将内容从一个 Treeview 复制到另一个 Treeview ？

Question

我在一页上有两个 Kendo UI TreeViews。例如:

var data1 = new kendo.data.HierarchicalDataSource({
    data: [
        { text: "foo", items: [
            { text: "believe" },
            { text: "Sofas" },
            { text: "Occasional Furniture" }
        ] },
        { text: "Decor", items: [
            { text: "Bed Linen" },
            { text: "Curtains & Blinds" },
            { text: "Carpets" }
        ] }
    ]
});

var data2 = new kendo.data.HierarchicalDataSource({
    data: [

    ]
});


$("#treeview-1").kendoTreeView({
    dataSource: data1
}); 

$("#treeview-2").kendoTreeView({
    dataSource: data2
});

$('#copy-button').click(function(e){
  // what goes here?
});

如何将数据从一棵树复制到另一棵树？如果目标树的现有数据被覆盖，则可以。

谢谢!

Answer 1

您需要检索第一棵树的数据并将其分配给第二棵树的数据源。就像是:

// Access both trees
var tree1 = $("#treeview-1").data("kendoTreeView");
var tree2 = $("#treeview-2").data("kendoTreeView");
// Get the data from the first tree
var data = tree1.dataSource.data();
// Assign it to the second tree
tree2.dataSource.data(data);

一个片段

$(document).ready(function() {
  var data1 = new kendo.data.HierarchicalDataSource({
    data: [
      { text: "foo", items: [
        { text: "believe" },
        { text: "Sofas" },
        { text: "Occasional Furniture" }
      ] },
      { text: "Decor", items: [
        { text: "Bed Linen" },
        { text: "Curtains & Blinds" },
        { text: "Carpets" }
      ] }
    ]
  });

  var data2 = new kendo.data.HierarchicalDataSource({
    data: [

    ]
  });


  $("#treeview-1").kendoTreeView({
    dataSource: data1
  }); 

  $("#treeview-2").kendoTreeView({
    dataSource: data2
  });

  $('#copy-button').click(function(e){
    var tree1 = $("#treeview-1").data("kendoTreeView");
    var tree2 = $("#treeview-2").data("kendoTreeView");
    var data = tree1.dataSource.data();
    tree2.dataSource.data(data)
  });
});

#treeview-1 {
  border: 1px solid red;
  padding: 5px;
  min-height: 40px;
}

#treeview-2 {
  border: 1px solid green;
  padding: 5px;
  min-height: 40px;
}

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>

<button id="copy-button" class="k-button">Copy</button>
<div id="treeview-1"></div>
<div id="treeview-2"></div>