javascript - Dynatree - 选择节点时禁用（或隐藏）子节点的复选框

Question

我正在使用dynatree在目录层次结构中选择多节点。

因此，我调查了 的所有内置选项的行为selectMode，但不幸的是，它们都没有解决我的问题：

• 1：单选（不是我的情况）
• 2：多选
  • 选择所有子节点时它不会选择父节点（好的）
  • 选择父节点时它不会选择所有子节点（不好）
• 3：分层多选
  • 它在选择所有子节点时选择父节点（不好）
  • 选择父节点时，它会选择所有子节点（确定）

如果出现以下情况，我的情况的行为将​​是正确的：

• 选择所有子节点时不选择父节点
  • 选择所有子目录不同于选择它们的父目录
• 选择父节点时选择所有子节点
  • 否则，用户可能无法理解孩子也被选中

问题#1：如何实现这种行为？

此外，dtnode.tree.getSelectedNodes()正在返回冗余节点：

/Foo
/Foo/Bar

如果/Foo被选中，对我来说已经暗示/Foo/Bar被选中。

问题#2：如何优化选定节点的冗余？

Answer 1

我看到的最佳解决方案涉及selectMode: 2在选择节点时使用和切换子复选框的可见性：

//enable or disable redundant children nodes recursively
function toggleChildrenNodes(disableChildren, dtnode) {
    if (!dtnode)
        return;

    if (!dtnode.childList)
        return;

    for (var chIdx = 0; chIdx < dtnode.childList.length; chIdx++) {
        dtnode.childList[chIdx].data.hideCheckbox = disableChildren;
        dtnode.childList[chIdx].render(true);
        //when re-enabling a child node that was previously selected, it should disable their children
        toggleChildrenNodes(disableChildren || dtnode.childList[chIdx].isSelected(), dtnode.childList[chIdx]);
    }
}

$('#myTree').dynatree({
    selectMode: 2,
    checkbox: true,
    onSelect: function(isSelected, dtnode) {
        if(!dtnode)
            return;

        toggleChildrenNodes(isSelect, dtnode);

        //gets the optimized selected nodes
        var dryNodes = $.map(dtnode.tree.getSelectedNodes(), function(currentSelectedNode, idx) {
            if (!currentSelectedNode.data.hideCheckbox) { //skip redundant nodes
                return currentSelectedNode.data.key;
            }
            return null;
        });
        console.log(dryNodes);
    }
});

此外，如果树节点扩展是惰性的，则需要处理新的子节点以保持一致性：

onLazyRead: function(dtnode) {
    if(!dtnode)
        return;

    //[...] business logic

    //[...] possible iteration to add N children

    dtnode.addChild({
        //[...] other properties

        //creates childnode with the checkbox hidden if the parent is selected or hidden due to a higher ancestor
        hideCheckbox: dtnode.isSelected() || dtnode.data.hideCheckbox
    });
}