动态树-选中节点时，禁用(或隐藏）子节点中的复选框

Dynatree - disable (or hide) the checkboxes from the children nodes when a node is selected

本文关键字：隐藏 子节点 复选框 节点 动态 禁用      更新时间：2023-09-26

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

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

  • 1：单选(不是我的情况(
  • 2：多选
    • 当选择了所有子节点时，它不会选择父节点(ok(
    • 选择父节点时，它不会选择所有子节点(不正常(
  • 3：分层多选
    • 当选择了所有子节点时，它会选择父节点(不正常(
    • 选择父节点时，它会选择所有子节点(ok(

如果

  • 当选择了所有子节点时，它不会选择父节点
    • 选择所有子目录不同于选择它们的父目录
  • 选择父节点时，它会选择所有子节点
    • 否则，用户可能无法理解是否也选择了子项

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

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

/Foo
/Foo/Bar

如果选择了/Foo，对我来说，这已经意味着/Foo/Bar被选择了

问题2：如何优化所选节点的冗余度？

我看到的最佳解决方案包括使用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
    });
}
相关文章：