Kendo Treeview - 如何在另一个树视图中显示选定节点和所有父节点答案

【问题标题】：Kendo Treeview - How to Display selected node with all parent nodes in another treeviewKendo Treeview - 如何在另一个树视图中显示选定节点和所有父节点
【发布时间】：2017-06-07 21:02:48
【问题描述】：

我有一个带有复选框以及父节点和子节点的剑道树视图。我需要将选中节点的完整层次结构复制到另一个树视图中。 ex - 根节点、父节点和选中的子节点。

以下是我的代码，但我只能显示子节点及其父节点。我还需要根节点，并且每次都选择子节点，如果父节点和根节点已经选择，则需要附加它

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.default.min.css">
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.mobile.all.min.css">

  <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2017.2.504/js/angular.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2017.2.504/js/jszip.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script>

  <style>
    #treeview-left,
    #treeview-right
    {
      float: left;
      width: 220px;
      overflow: visible;
    }
    .demo-section {
      width: 500px;
    }
    .demo-section:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
  </style>

</head>
<body>
  <div class="demo-section k-header">

      <div id="treeview-left"></div>

      <div id="treeview-right"></div>          
  </div>

  <button id="copy-nodes" class="k-button">Copy nodes</button>

      <script>

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

      $("#treeview-right").kendoTreeView({});

      function onCheck(e) {
          e.preventDefault();
          var checkedNodeParentItem = this.dataItem(this.parent(e.node)).toJSON(),
              checkedNodeParentItemItems = checkedNodeParentItem.items;

          var treeviewTarget = $("#treeview-right").data("kendoTreeView"),
              treeviewTargetItems = treeviewTarget.dataItems().toJSON();

          var parentExists = false;
          for (var j = 0; j < treeviewTargetItems.length; j += 1) {
              var currentItem = treeviewTargetItems[j];

              if (currentItem.text == checkedNodeParentItem.text) {
                  parentExists = true;
                  break;
              }
          }

          if (parentExists) {
              var target = treeviewTarget.findByText(checkedNodeParentItem.text);
              var node = this.dataItem(e.node);

              treeviewTarget.append(node, target);

          } else {
              var clonedParent = $.extend({}, checkedNodeParentItem);
              clonedParent.items = [];
              var checkedItems = [];
              for (var i = 0; i < checkedNodeParentItemItems.length; i += 1) {
                  var isChecked = checkedNodeParentItemItems[i].checked;

                  if (isChecked) {
                      clonedParent.items.push(checkedNodeParentItemItems[i]);
                  }
              }
              treeviewTarget.append(clonedParent)
          }
      }

      </script>          
</body>
</html>

【问题讨论】：

标签： javascript jquery kendo-ui kendo-treeview

【解决方案1】：

我建议为第二个树视图使用单独的DataSource，将数据复制到其中并启用过滤。

完整的工作代码在这里http://dojo.telerik.com/oqIXa/2

最重要的部分是将源数据复制到目标，扩展所有节点并剥离源 observable：

 function onCheck(e) {
      // toJSON is to strip Observable and decouple two datasources
      var sourceData = treeView.dataSource.data().toJSON();

      expandNodes(view);

      treeViewRight.setDataSource(new kendo.data.HierarchicalDataSource({
        data: sourceData,
        filter: {field: "checked", operator: "eq", value: true }
      }));
  }

但是有一个小问题 - 如果 Decor 节点最初没有展开并且您选择它，它的行为真的很奇怪。似乎折叠项目的数据最初没有加载，这会导致一些奇怪的效果。如果您需要最初折叠的树项目，则应进一步调查这一点。

 text: "Decor",  items: ...

【讨论】：