点击父节点时，检查树的子节点 [ExtJS]

Question

我想知道在ExtJs中，当单击特定节点时如何检查树的兄弟节点。

我为每个节点提供了id，我可以访问所单击节点的id。那么我该如何自动检查子节点呢？

请有经验的人帮帮我。

- tismon

Answer 1

// or any other way of getting hands on the node you want to work with
var node = treePanel.getNodeById('your-id');
node.eachChild(function(n) {
    n.getUI().toggleCheck(true);
});

如果您希望此功能在当前节点的整个子树上运行，则需要进行一些递归操作。

更加融合一些：

treePanel.on('checkchange', function(node, checked) {
    node.eachChild(function(n) {
        n.getUI().toggleCheck(checked);
    });
});

- Stefan Gehrig

---

在更新的API版本中无法正常工作。在此成功：https://dev59.com/nVjUa4cB1Zd3GeqPVumV - pahan

没错。上面的代码是针对 Ext JS 3 的，而 Ext JS 4 对树 API 进行了相当大的更改。 - Stefan Gehrig

如果您不展开子节点，它们将不会加载。因此，当您调用checkchange时，它只会检查已加载的子节点。我最终做的是在node.eachChild之前添加node.expand（true）;，因此它展开所有节点，然后将检查它们全部。 - Grammin

我遇到了以下错误："超出最大调用堆栈大小"。 - Cesar Miguel

Answer 2

function nodeCheck(node) {
    node.eachChild(function(n) {
        if(n.hasChildNodes())
            nodeCheck(n)
        n.getUI().toggleCheck(false);
    });
}
var node = (tree.getSelectionModel().getSelectedNode()) ? tree.getSelectionModel().getSelectedNode() : tree.root;
if(node) nodeCheck(node);

对我来说它很好用 ;)

- slammer

---

工作得很好！至少在Chrome中，我没有遇到以下错误：“调用栈大小超过最大值”=） - Cesar Miguel

Answer 3

监听器：{

checkchange : function(node, checked) {
    node.parentNode.cascadeBy(function(n){n.set('checked', checked);});
}

}

- damo

Answer 4

function checkChange(node, checked, Object) {
    node.cascadeBy(function(n) {
        n.set('checked', checked);
    });
}

- boooch

---

一些简短的解释会很有帮助。 - Andrew Barber

Answer 5

C先生的回答很好（适用于ExtJS 4.2），但是当父节点的子节点只有1个时，会出现一个错误。 这里是我做的一点改进。有人可以进一步完善。

function (node, checked) {

    if (node.isLeaf()) {
        node = node.parentNode;
        var siblingStateEqual = true;
        if (node.childNodes.length == 1) {
            siblingStateEqual = checked;
        } else {
            node.cascadeBy(function (n) {
                if (n != node) {
                    if (n.get('checked') != checked) {
                        siblingStateEqual = false;
                    }
                }

            });
        }

        if (siblingStateEqual == checked) {
            node.set('checked', checked);
        }

    }
    else {
        node.cascadeBy(function (n) {
            n.set('checked', checked);
        });
    }
}

- daniel

Answer 6

当您填充节点时，JSON或XML将需要将“checked”属性设置为true或false。我假设您正在使用AsyncTreeNode来为您完成此操作。如果树节点在创建时没有此已检查属性，则ExtJS将不会使用复选框呈现它。

- It Grunt

Answer 7

或者，如果像我一样，您需要在所有子叶节点被选中/取消选中时自动检查/取消选中父节点，您可以尝试以下方法：

function (node, checked)
{

    if (node.get('leaf'))
    {
        node = node.parentNode;
        var siblingStateEqual = true;
        node.cascadeBy(function (n)
        {
            if (n != node) {
                if (n.get('checked') != checked) {
                    siblingStateEqual = false;
                }
            }

        });

        if (siblingStateEqual == checked)
        {
            node.set('checked', checked);
        }

    }
    else
    {
        node.cascadeBy(function (n) { n.set('checked', checked); });
    }


}

- Fred Dump