我有一个问题困扰了我一段时间。我的项目设置中有一个 Kendo UI Treeview ,如 http://demos.telerik.com/kendo-ui/web/treeview/events.html 中所述.
我需要实现的是说当我在 Treeview 上展开一个节点时,不在该分支中的所有其他节点都应该折叠并在该分支上展开。我曾尝试使用以下代码,但不幸的是它进入了无限循环。
<div id="example" class="k-content">
<div id="treeview" class="demo-section" style="width: 200px"></div>
<div class="demo-section">
<h3 class="title">Console log
</h3>
<div class="console"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
function onExpand(e) {
e.preventDefault();
kendoTreeView.collapse('.k-item');
kendoTreeView.expand(e.node);
}
$("#treeview").kendoTreeView({
dataSource: [
{ text: "Furniture", expanded: true, items: [
{ text: "Tables & Chairs" },
{ text: "Sofas" },
{ text: "Occasional Furniture" }
] },
{ text: "Decor", items: [
{ text: "Bed Linen" },
{ text: "Curtains & Blinds" },
{ text: "Carpets" }
] },
{ text: "Storage" }
],
expand:OnExpand
});
});
</script>
请帮忙。
谢谢
最佳答案
正如@Logard 正确指出的那样,如果您尝试在 OnExpand
内部展开,您将进入无限循环,因为在折叠其他节点后,您想要展开当前节点,这将触发对展开
。
为了防止这种情况,您应该将 OnExpand
处理程序定义为:
function OnExpand(e) {
if (kendoTreeView.collapsingOthers) {
kendoTreeView.collapsingOthers = false;
} else {
kendoTreeView.collapse('.k-item');
kendoTreeView.collapsingOthers = true;
kendoTreeView.expand(e.node);
}
}
这引入了一个名为 collapsingOthers
的新字段,它控制我是否折叠所有节点并以编程方式扩展当前节点。我利用 JavaScript 允许我扩展当前对象动态添加属性。
关于javascript - Kendo UI Treeview 折叠所有项目并仅展开当前节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23761175/