javascript 如何基于单击按钮折叠和展开 Kendo UI treeView 中的所有树节点？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17956894/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how do I collpase and expand all tree nodes in a Kendo UI treeView based on a button click?
提问by RJ.
This is not working:
这不起作用：
<script type="text/javascript">
$('#btnCollapseAll').click(function()
{
$('#treeview').collapseAll();
});
</script>
回答by object json
You can use this code
您可以使用此代码
1: collapse
1：崩溃
collapse kendoTreeView document
$("#treeview").kendoTreeView();
var treeview = $("#treeview").data("kendoTreeView");
treeview.collapse(document.getElementById("firstItem"));
$('#btn').click(function () {
// collapse the node with id="firstItem"
// collapse all nodes
treeview.collapse(".k-item");
});
2:expand
2：展开
$("#treeview").kendoTreeView();
var treeview = $("#treeview").data("kendoTreeView");
treeview.collapse(document.getElementById("firstItem"));
$('#btn').click(function () {
// expand the node with id="firstItem"
// expand all nodes
treeview.expand(".k-item");
});
回答by Pankaj Rawat
only need to set one property "expanded: false"
只需要设置一个属性“ expanded: false”
$("#TreeList").kendoTreeList({
height: 400,
filterable: false,
sortable: true,
columns: [
{ field: "Name", title: " ", width: 235 },
{ field: "Outstanding", title: "Outstanding", width: 235, template: $("#outstanding-olor-div-template").html() }
],
dataSource: {
transport: {
read: {
url: ServiceUrl ,
dataType: "json"
}
},
schema: {
model: {
id: "Id",
parentId: "ParentId",
fields: {
ParentId: { field: "ParentId", nullable: true },
Id: { field: "Id", type: "number" },
Name: { field: "Name" }
},
expanded: false
}
}
}
});
回答by Doberon
<script>
$(document).ready(function() {
$("#treeview").kendoTreeView();
var treeview = $("#treeview").data("kendoTreeView");
$("#expandAllNodes").click(function() {
treeview.expand(".k-item");
});
$("#collapseAllNodes").click(function() {
treeview.collapse(".k-item");
});
});
</script>
回答by user11809641
None of the above answers worked for me because my tree had a lot of data and was set to loadOnDemand: true. I included my solution below that recursively expands each node as it is loaded in the tree.
以上答案都不适合我，因为我的树有很多数据并且设置为loadOnDemand: true. 我在下面包含了我的解决方案，当每个节点加载到树中时，它会递归地扩展每个节点。
The use case for me was that I wanted to expand all nodes when filtering the tree, but leave them collapsed when browsing the full tree (thus the settings needed to stay loadOnDemad: true)
我的用例是我想在过滤树时扩展所有节点，但在浏览完整树时让它们折叠（因此需要保留设置loadOnDemad: true）
Here it is:
这里是：
// Expands entire tree
function expandTree() {
console.log("Expanding All...");
var tree = $("#treeview").data("kendoTreeView");
var nodes = document.getElementsByClassName('k-item');
for (var i = 0; i < nodes.length; i++) {
expandNode(nodes[i]);
}
}
// Expand nodes recursively
function expandNode(htmlElement) {
var tree = $("#treeview").data("kendoTreeView");
var dataItem = tree.dataItem(htmlElement);
dataItem.set("expanded", true);
var children = dataItem.items;
if (children) {
for (var i = 0; i < dataItem.items.length; i++) {
expandNode(tree.findByUid(dataItem.items[i].uid))
}
}
}
