我已经有附件中所示的 Treeview ,现在我必须在单击按钮时展开,我知道执行展开的代码,但它不会展开完整的子节点,而是只执行 1 个直接子节点,如果有的话更多 child ,请帮助我如何实现单击以展开所有父节点和子节点。
这是我的代码:
$("#expand").on("click", function(){
var treeview = $("#treeview").data("kendoTreeView");
treeview.expand(".k-item");
})
最佳答案
如果您在 treeview 上调用 expand 方法,它将折叠所有项目:
var treeview = $("#treeview").kendoTreeView({
dataSource: {
data: [{
text: "Item 1",
expanded: true,
items: [
{
text: "Item 1.1", items: [ { text: "Item 1.4" }, { text: "Item 1.5" } ]
},
{
text: "Item 1.2", items: [ { text: "Item 1.6" }, { text: "Item 1.7" } ]
},
{
text: "Item 1.3", items: [{ text: "Item 1.8", items: [{ text: "Item 1.10" }, { text: "Item 1.11" } ] }, { text: "Item 1.9" } ] }
]
},
{
text: "Item 2",
items: [{ text: "Item 2.1" },
{ text: "Item 2.2" },
{ text: "Item 2.3" }
]
},
{ text: "Item 3" }
]
},
loadOnDemand: false
}).data("kendoTreeView"),
handleTextBox = function(callback) {
return function(e) {
if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
callback(e);
}
};
};
$("#expand").click(function() {
treeview.expand(".k-item");
});
$("#collapse").click(function() {
treeview.collapse(".k-item");
});
html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }
#wrapper {
float: left;
border: 1px solid black;
overflow: hidden; /* will contain if #first is longer than #second */
}
#expand {
float:left; /* add this */
border: 1px solid red;
}
#collapse {
border: 1px solid green;
overflow: hidden; /* if you don't want #second to wrap below #first */
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.3.911/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
</head>
<body>
<div id="treeview"></div>
<div id="wrapper">
<button id="expand" class="button1" >Expand button</button>
<button id="collapse" class="button2" >Collapse button</button>
</div>
</body>
</html>
关于jquery - OnClick 展开包含所有子节点的 Kendo Treeview,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52939376/