0
チェックボックスと親ノードと子ノードを持つ剣道ツリービューがあります。 チェックノードの完全な階層を別のツリービューにコピーする必要があります。 ex - ルートノード、親ノード、およびチェックされた子ノード。剣道ツリービュー - 別のツリービューにすべての親ノードを持つ選択したノードを表示する方法
以下は私のコードですが、子ノードとその親ノードのみを表示できます。私もそれにデータをコピーし、私は2番目のツリービューのために別々のDataSourceを使用することをお勧め親とルートがすでに
<!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>