[英]How to select all child nodes on selection of parent in a dynamic tree in zk?
I am currently using a dynamic tree in zk.我目前在 zk 中使用动态树。 The code is the following :代码如下:
<tree id="treeview" multiple="true" width="330px" model="@load(vm.treeModel)"
style="border: 1px solid #9D9D9D;" vflex="1" rows="14" >
<treecols sizable="true">
<treecol />
</treecols>
<template name="model">
<treeitem>
<treerow>
<treecell><checkbox label="@load(each.data.name)" checked="true"/></treecell>
</treerow>
</treeitem>
</template>
</tree>
I want that if I uncheck a parent checkbox all the child must be unchecked.我希望如果我取消选中父复选框,则必须取消选中所有子项。 And the vice versa should also happen ie if I check a parent checkbox,all child must be checked.反之亦然也应该发生,即如果我选中父复选框,则必须选中所有子项。
Is there any attribute available for tree tag in zk to do this? zk 中的树标签是否有任何可用的属性来执行此操作? If not, what are the other ways of doing it?如果没有,还有什么其他方法可以做到?
I was facing the same issue and came up with a client side only solution that is fast and accurately throws the proper selection events.我遇到了同样的问题,并提出了一个客户端唯一的解决方案,它可以快速准确地抛出正确的选择事件。
To enable it, in your tree item renderer, add this widget listener:要启用它,请在您的树项渲染器中添加此小部件侦听器:
treeitem.setWidgetListener(Events.ON_CLICK, "selectSubTreesOnItemClick(this, event);");
In your case (template), do it like this:在您的情况下(模板),请这样做:
<tree xmlns:w="client">
...
<treeitem w:onClick="selectSubTreesOnItemClick(this, event)">
Then, import the following js file (in your zul, add <script src="/js/treeselection.js" />
somewhere):然后,导入以下 js 文件(在您的 zul 中,在某处添加<script src="/js/treeselection.js" />
):
function selectSubTreesOnItemClick(item, event) {
// if clicked outside of check box, reset selection
if (!jq(event.target).is('.z-treerow')) {
item.getTree().clearSelection();
// re-select clicked node
item.setSelected(true);
}
privateSelectDescendants(item);
privateSelectParentIfAllDescendantsSelected(item);
// update selection
item.getTree().fireOnSelect(item);
// prevent interference of the tree's default click behavior (like selection of the clicked node ;) ).
event.stop();
}
/**
* @param parent if selected, selects all children (and grand-children and so on), otherwise
* removes them from selection.
*/
function privateSelectDescendants(parent) {
var items = parent.getTree().itemIterator();
// find all descendants of parent
while (items.hasNext() && items.next() !== parent) {}
var stopAt = privateGetFirstNonDescendant(parent);
// check descendants
while (items.hasNext()) {
var descendant = items.next();
if (descendant === stopAt) {
break;
} else {
descendant.setSelected(parent.isSelected());
}
}
}
/**
* @param item parent will be selected if item and all its siblings are selected, otherwise
* unselected. Repeated for grandparents, great-grandparents, and so on.
*/
function privateSelectParentIfAllDescendantsSelected(item) {
if (item.getParentItem() != null) {
var parent = item.getParentItem();
// find all descendants of parent
var items = parent.getTree().itemIterator();
while (items.hasNext()) {
if (items.next() === parent){
break;
}
}
var stopAt = privateGetFirstNonDescendant(parent);
// check descendants
var allDescendantsSelected = true;
while (items.hasNext()) {
var child = items.next();
if (child === stopAt) {
break;
} else if (!child.isSelected()) {
allDescendantsSelected = false;
break;
}
}
parent.setSelected(allDescendantsSelected);
// continue with grandparents
privateSelectParentIfAllDescendantsSelected(parent);
}
}
/**
* @param item
* @returns the next item that is on the same or a higher level as item.
* Undefined if item is the last node or only followed by children.
*/
function privateGetFirstNonDescendant(item) {
var result = item.nextSibling;
while (!result && item.getParentItem() != null) {
item = item.getParentItem();
result = item.nextSibling;
}
return result;
}
(Un)Selecting a tree node will also (un)select its descendants. (Un)选择一个树节点也将(un)选择它的后代。 Furthermore, if all the node's siblings are selected, the parent node will be selected, otherwise unselected (this goes all the way up to the root node).此外,如果选择了节点的所有兄弟节点,则将选择父节点,否则不选择(这一直到根节点)。
You can use Zscript for your purpose, by onclick
event you link to a function and pass the Treeitem as a parameter.您可以将 Zscript 用于您的目的,通过onclick
事件链接到一个函数并将 Treeitem 作为参数传递。 The function evaluates if it has children, cycles through the children and sets depending on whether the parent is selected.该函数评估它是否有子项,循环遍历子项并根据是否选择了父项进行设置。 In case there are many nested ones you can use a recursive function.如果有很多嵌套的,您可以使用递归函数。
<zscript><![CDATA[
public void selectItemsChildren(Treeitem item){
item.setOpen(true);
if(!item.isEmpty())
for(Treeitem p : item.getTreechildren().getItems()){
p.setSelected(item.isSelected());
}
}
]]>
</zscript>
<tree id="treeAccess" width="100%" model="@bind(vm.treeModel)">
<treecols>
<treecol hflex="1" label="Description"/>
</treecols>
<template name="model">
<treeitem onClick="selectItemsChildren(self)">
<treerow>
<treecell label="@load(each...any)"/>
</treerow>
</treeitem>
</template>
</tree>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.