如何从 kendo 树视图级联 kendo 下拉列表
How to cascade kendo dropdownlist from kendo tree view
我是 kendo 树视图的新手,目前我正在尝试加载 kendo 下拉列表的值基于 kendo 树视图选中的复选框 values.i 我想得到kendo 树视图的选定值检查了节点,但无法使用这些树值级联下拉列表。
谁能就我的问题提出一些建议。
请尝试使用以下代码片段。
<!DOCTYPE html>
<html>
<head>
<title>Jayesh Goyani</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
</head>
<body>
<div id="treeview"></div>
<div id="color"></div>
<script>
$(document).ready(function () {
$("#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" }
]
}
]
}]
});
$("#color").kendoDropDownList({
dataTextField: "text",
dataValueField: "value"
});
});
function onCheck(arg) {
var checkedNodes = [],
treeView = $("#treeview").data("kendoTreeView"),
message;
checkedNodeIds(treeView.dataSource.view(), checkedNodes);
//convert array to CSV
var selectedIDs = checkedNodes.join(",");
var ddl = $("#color").data("kendoDropDownList");
// for testing purpose I have created dummy collection.
var data = [
{ text: "Red", value: "1" },
{ text: selectedIDs, value: "2" },
{ text: "Grey", value: "3" }
];
ddl.setDataSource(data);
}
function checkedNodeIds(nodes, checkedNodes) {
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].checked) {
checkedNodes.push(nodes[i].id);
}
if (nodes[i].hasChildren) {
checkedNodeIds(nodes[i].children.view(), checkedNodes);
}
}
}
</script>
</body>
</html>
如有任何疑问,请告诉我。
我是 kendo 树视图的新手,目前我正在尝试加载 kendo 下拉列表的值基于 kendo 树视图选中的复选框 values.i 我想得到kendo 树视图的选定值检查了节点,但无法使用这些树值级联下拉列表。 谁能就我的问题提出一些建议。
请尝试使用以下代码片段。
<!DOCTYPE html>
<html>
<head>
<title>Jayesh Goyani</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
</head>
<body>
<div id="treeview"></div>
<div id="color"></div>
<script>
$(document).ready(function () {
$("#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" }
]
}
]
}]
});
$("#color").kendoDropDownList({
dataTextField: "text",
dataValueField: "value"
});
});
function onCheck(arg) {
var checkedNodes = [],
treeView = $("#treeview").data("kendoTreeView"),
message;
checkedNodeIds(treeView.dataSource.view(), checkedNodes);
//convert array to CSV
var selectedIDs = checkedNodes.join(",");
var ddl = $("#color").data("kendoDropDownList");
// for testing purpose I have created dummy collection.
var data = [
{ text: "Red", value: "1" },
{ text: selectedIDs, value: "2" },
{ text: "Grey", value: "3" }
];
ddl.setDataSource(data);
}
function checkedNodeIds(nodes, checkedNodes) {
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].checked) {
checkedNodes.push(nodes[i].id);
}
if (nodes[i].hasChildren) {
checkedNodeIds(nodes[i].children.view(), checkedNodes);
}
}
}
</script>
</body>
</html>
如有任何疑问,请告诉我。