Javascript 下拉列表中的复选框树
我试图在下拉菜单中建立复选框树。我的意思是，如果你点击下拉按钮，就会出现一个复选框树及其分支，用户可以点击任意多个选项。我曾尝试使用包含类的引导代码，即div class=“dropdown”，但它没有到位。下面是复选框树的代码。请任何人帮助在下拉菜单栏中插入整个复选框树Javascript 下拉列表中的复选框树,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图在下拉菜单中建立复选框树。我的意思是，如果你点击下拉按钮，就会出现一个复选框树及其分支，用户可以点击任意多个选项。我曾尝试使用包含类的引导代码，即div class=“dropdown”，但它没有到位。下面是复选框树的代码。请任何人帮助在下拉菜单栏中插入整个复选框树 Here is the code: <!-- Bootstrap check-box tree --> <!DOCTYPE html> <html> <head> &
Here is the code:
<!-- Bootstrap check-box tree -->
<!DOCTYPE html>
<html>
<head>
<base href="http://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="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body> <!-- Checkbox selection -->
<div id="example">
<div class="demo-section k-content">
<div>
<h4>Check nodes</h4>
<div id="treeview"></div>
</div>
<div style="padding-top: 2em;">
<h4>Status</h4>
<p id="result">No nodes checked.</p>
</div>
</div>
<script>
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
check: onCheck,
dataSource: [{
id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
{
id: 2, text: "Page 1", expanded: true, spriteCssClass: "folder", items: [
{ id: 3, text: "Page a", spriteCssClass: "html" },
{ id: 4, text: "Page b", spriteCssClass: "html" },
{ id: 5, text: "Page c", spriteCssClass: "image" }
]
},
{
id: 6, text: "Page 2", expanded: true, spriteCssClass: "folder", items: [
{ id: 7, text: "Page d", spriteCssClass: "image" },
{ id: 8, text: "Page e", spriteCssClass: "pdf" },
]
},
{
id: 9, text: "Page 3", expanded: true, spriteCssClass: "folder", items: [
{ id: 10, text: "Page f", spriteCssClass: "pdf" },
{ id: 11, text: "Page g", spriteCssClass: "pdf" },
{ id: 12, text: "Page h", 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].id);
}
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);
if (checkedNodes.length > 0) {
message = "IDs of checked nodes: " + checkedNodes.join(",");
} else {
message = "No nodes checked.";
}
$("#result").html(message);
}
</script>
</div>
</body>
</html>
以下是代码：
html{字体大小：14px；字体系列：Arial、Helvetica、sans serif；}
检查节点
地位
未检查任何节点
$（“#treeview”）.kendoTreeView({
复选框：{
孩子们：是的
},
检查：onCheck，
数据源：[{
id:1，文本：“我的文档”，扩展：true，精灵类：“根文件夹”，项目：[
{
id:2，文本：“第1页”，扩展：true，精灵类：“文件夹”，项目：[
{id:3，文本：“第a页”，精灵类：“html”}，
{id:4，文本：“第b页”，spritecsclass:“html”}，
{id:5，文本：“c页”，精灵类：“图像”}
]
},
{
id:6，文本：“第2页”，扩展：true，精灵类：“文件夹”，项目：[
{id:7，文本：“第d页”，精灵类：“图像”}，
{id:8，文本：“第e页”，精灵类：“pdf”}，
]
},
{
id:9，文本：“第3页”，扩展：true，精灵类：“文件夹”，项目：[
{id:10，文本：“第f页”，精灵类：“pdf”}，
{id:11，文本：“第g页”，spritecsclass:“pdf”}，
{id:12，文本：“h页”，精灵类：“pdf”}
]
}
]
}]
});
//函数，用于收集选中节点的ID
函数checkedNodeId（节点，checkedNodes）{
对于（var i=0；i0）{
message=“选中节点的ID:”+checkedNodes.join（“，”）；
}否则{
message=“未检查任何节点。”；
}
$（“#结果”）.html（消息）；
}