java - 如何在zk动态树中选择父节点时选择所有子节点？

Question

我目前在 zk 中使用动态树。代码如下:

<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>

我希望如果我取消选中父复选框，则所有子复选框都必须取消选中。反之亦然也应该发生，即如果我选中父复选框，则必须选中所有子复选框。

zk 中的树标签是否有可用的属性来执行此操作？如果没有，还有其他方法吗？

Answer 1

我面临着同样的问题，并提出了一个仅客户端的解决方案，该解决方案可以快速准确地抛出正确的选择事件。

要启用它，请在树项渲染器中添加此小部件监听器:

treeitem.setWidgetListener(Events.ON_CLICK, "selectSubTreesOnItemClick(this, event);");

在您的情况(模板)中，请这样做:

<tree xmlns:w="client">
  ...
    <treeitem w:onClick="selectSubTreesOnItemClick(this, event)">

然后，导入以下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;
}

(取消)选择树节点也会(取消)选择其后代。此外，如果选择了该节点的所有兄弟节点，则将选择父节点，否则将取消选择(一直到根节点)。