Question

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

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

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

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

选择所有子节点时，它不会选择父节点
- 选择所有子目录与选择其父目录不同
在选择父节点时选择所有子节点
- 否则，用户可能不明白孩子也被选中

问题＃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
    });
}

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

1 个答案: