他们有啥方法可以从 KendoTreeView 中获取选定的节点并在 Angular 5 中的另一个 KendoTreeView 中显示它们
Posted
技术标签:
【中文标题】他们有啥方法可以从 KendoTreeView 中获取选定的节点并在 Angular 5 中的另一个 KendoTreeView 中显示它们【英文标题】：Is their any way to get selected nodes from KendoTreeView and show them in another KendoTreeView In Angular 5他们有什么方法可以从 KendoTreeView 中获取选定的节点并在 Angular 5 中的另一个 KendoTreeView 中显示它们 【发布时间】：2020-02-29 18:54:52 【问题描述】：我正在尝试从 KendoTreeView 中获取所有选定的节点，并显示一个 Treeview，其中仅包含上一棵树中的选定值。
这有可能实现吗？
提前致谢。
【问题讨论】：
【参考方案1】：当然可以，下面有一个粗略的方法，取自this demo：
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/treeview/checkboxes">
<style>html font-size: 14px; font-family: Arial, Helvetica, sans-serif; </style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common-fiori.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.fiori.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.fiori.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<div>
<h4>Check nodes</h4>
<div id="treeview"></div>
<hr>
<div id="treeview2"></div>
</div>
</div>
<script>
$("#treeview2").kendoTreeView();
$("#treeview").kendoTreeView(
checkboxes:
checkChildren: true
,
check: onCheck,
dataSource: [
id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
id: 3, text: "about.html", spriteCssClass: "html" ,
id: 4, text: "index.html", spriteCssClass: "html" ,
id: 5, text: "logo.png", spriteCssClass: "image"
]
,
id: 6, text: "New Web Site", expanded: true, spriteCssClass: "folder", items: [
id: 7, text: "mockup.jpg", spriteCssClass: "image" ,
id: 8, text: "Research.pdf", spriteCssClass: "pdf" ,
]
,
id: 9, text: "Reports", expanded: true, spriteCssClass: "folder", items: [
id: 10, text: "February.pdf", spriteCssClass: "pdf" ,
id: 11, text: "March.pdf", spriteCssClass: "pdf" ,
id: 12, text: "April.pdf", spriteCssClass: "pdf"
]
]
]
);
// function that gathers IDs of checked nodes
function checkedNodeIds(nodes, checkedNodes)
for (var i = 0; i < nodes.length; i++)
if (nodes[i].checked)
checkedNodes.push(nodes[i]);
if (nodes[i].hasChildren)
checkedNodeIds(nodes[i].children.view(), checkedNodes);
// show checked node IDs on datasource change
function onCheck()
var checkedNodes = [],
treeView = $("#treeview").data("kendoTreeView"),
message;
checkedNodeIds(treeView.dataSource.view(), checkedNodes);
let treeView2 = $("#treeview2").data("kendoTreeView");
treeView2.dataSource.data(checkedNodes);
</script>
<style>
#treeview .k-sprite,
#treeview2 .k-sprite
background-image: url("../content/web/treeview/coloricons-sprite.png");
.rootfolder background-position: 0 0;
.folder background-position: 0 -16px;
.pdf background-position: 0 -32px;
.html background-position: 0 -48px;
.image background-position: 0 -64px;
</style>
</div>
</body>
</html>Demo in Dojo
关键是，您必须检索选定的节点（与checkedNodeIds() 一样），然后将它们设置为目标树视图数据源：
$("#treeview2").data("kendoTreeView").dataSource.data(checkedNodes);
【讨论】：
感谢您的解决方案，但我试图在 Angular 5 中实现这一点，我得到的节点 ID 有点像 '0_1'、'0_1_0' 等等，使用 (checkedChange)="onCheck($事件）”。 我可以在 Angular 5 中获得一些解决方案吗？以上是关于他们有啥方法可以从 KendoTreeView 中获取选定的节点并在 Angular 5 中的另一个 KendoTreeView 中显示它们的主要内容，如果未能解决你的问题，请参考以下文章
有啥方法可以从 docker hub 提取图像并使用 cloudbuild.yaml 部署到云运行