kendo-ui - 他们有什么方法可以从 KendoTreeView 中获取选定的节点并在 Angular 5 中的另一个 KendoTreeView 中显示它们
问题描述
我正在尝试从 KendoTreeView 中获取所有选定的节点,并显示一个 Treeview,其中仅包含前一棵树中的选定值。
这有可能实现吗?
提前致谢。
解决方案
当然这是可能的,下面有一个粗略的方法,取自这个演示:
<!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>
关键是,您必须检索选定的节点(使用checkedNodeIds()
),然后将它们设置为目标树视图数据源:
$("#treeview2").data("kendoTreeView").dataSource.data(checkedNodes);
推荐阅读
- angular - 如何处理多个嵌套订阅
- postgresql - RESTful API 设计更新 1/多对多关系的最佳实践?
- spring-boot - Spring Boot 2 + Oauth2:如何为普通用户和管理员分别登录?
- angular - 如何获取在ngx-datatable中用作ngx-datatable-cell-template的div的scrollWidth和offSetWidth
- sql-server - 如何在sql中查找前10年第一天到今天的日期
- python - Pyro - 似然函数和采样维度
- python - 尽管我已经定义了函数,但代码有什么问题?
- node.js - 如果 src 是生成验证码的 php 脚本,如何在 ion-img 中抓取图像
- sql - 更新字段时,会为所有记录触发日期修改触发器,而不仅仅是正在修改的记录
- c - 如何在 OpenSSL 1.1.1 中预先准备 DTLS 服务器