ExtJS 树形结构的级联选择

最新推荐文章于 2019-06-21 17:36:54 发布

原创最新推荐文章于 2019-06-21 17:36:54 发布 · 212 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#UI

本文详细介绍了如何使用 JavaScript 实现树形结构中节点的选择与扩展功能，包括选择父节点及其所有子节点，以及选择子节点并自动选择其父节点的父节点。通过调用特定的方法，可以轻松地在树形结构中实现节点的动态选择与操作。


tree.on('checkchange', function(node, checked) {
        selParent(node, checked);
        selChild(node, checked);
    }, tree);
    //这个方法是选择父节点,自动选中所有的子节点
    function selParent(node, checked) {
        checked ? node.expand() : node.collapse();
        if (node.hasChildNodes()) {
            node.eachChild(function(child) {
                child.attributes.checked = checked;
                var cb = child.ui.checkbox;
                if (cb) cb.checked = checked;
                selParent(child, checked);
            });
        }
    }

//这个方法是选择子节点,自动选中父节点的父节点
    function selChild(node, checked) {
        if (checked) {
            node.expand();
            var parentNode = node.parentNode;
            if (parentNode != undefined) {
                parentNode.attributes.checked = checked;
                var cb = parentNode.ui.checkbox;
                if (cb) cb.checked = checked;
                selChild(parentNode, checked);
            }
        }
    }