Question

我有一个带有复选框和父节点和子节点的kendo树视图。我需要将已检查节点的完整层次结构复制到另一个树视图中。 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>

Answer 1

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

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

关键部分是将源数据复制到目的地，扩展所有节点并剥离源可观察数据：

 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: ...

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

1 个答案: