Dynatree-ノードが選択されたときに子ノードのチェックボックスを無効（または非表示）にします

debugcn 投稿 Dev

ファルサレラ

dynatreeディレクトリの階層でマルチノードを選択するために使用しています。

そこで、のすべての組み込みオプションの動作を調査しましたselectModeが、残念ながら、いずれも私の問題を解決しません。

1：単一選択（私の場合ではない）
2：複数選択
- すべての子ノードが選択されている場合、親ノードは選択されません（ok）
- 親ノードが選択されている場合、すべての子ノードが選択されるわけではありません（OKではありません）
3：階層的な複数選択
- すべての子ノードが選択されたときに親ノードを選択します（OKではありません）
- 親ノードが選択されると、すべての子ノードが選択されます（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
    });
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]