Primefaces 树复选框单选

Question

我需要“复选框”选择模式下的 primefaces 树，但一次只能选择一个且只有一个节点。默认情况下，primefaces 树在选择节点时选择所有后代，这实际上是我想要更改的。

谁能帮我解决一下？

Answer 1

通过查看 Javascript source code of the tree，我终于找到了实现这一点的方法。你可以例如创建一个缓存先前选择的节点的单例。通过使用树的“onNodeClick”属性，您可以调用一个 Javascript 函数，该函数在小部件内部设置新的选定节点之前取消选择前一个节点（并可能在使用 ajax 事件时发布新的选择）。

---

更新：

我修改了 Facelet 和 Javascript 以在初始化时搜索树中的预选节点。请注意，预选节点必须可见才能使其正常工作。有关扩展父节点的详细信息，请参阅this answer。

---

豆：

@Named
@ViewScoped
public class BackingBean implements Serializable {

    private TreeNode rootTreeNode;

    // IMPORTANT: Use array!
    private TreeNode[] selected;

    public TreeNode getRootTreeNode() {
        if (rootTreeNode == null) {
            rootTreeNode = new DefaultTreeNode("Root", null);

            // init child tree nodes
        }
        return rootTreeNode;
    }

    public TreeNode[] getSelected() {
        return selected;
    }

    public void setSelected(TreeNode[] selected) {
        this.selected = selected;
    }

}

小脸：

<p:tree id="tree"
        onNodeClick="TREE_SELECTION.updateSelection(node, event)"
        propagateSelectionDown="false" propagateSelectionUp="false"
        selection="#{backingBean.selected}" selectionMode="checkbox"
        value="#{backingBean.rootTreeNode}"
        var="data"
        widgetVar="treeWidget">

    <p:treeNode>
        <h:outputText value="#{dataWrapper.label}" />
    </p:treeNode>

</p:tree>

Javascript：

<script type="text/javascript">
    // singleton for tree selection
    var TREE_SELECTION = {
        init: function (treeWidgetVar) {
            this.treeWidget = PF(treeWidgetVar);
            this.selectedNode = this.treeWidget.jq.find('.ui-treenode-selected');
        },
        treeWidget: null,
        selectedNode: null,
        updateSelection: function (node, event) {
            // get the checkbox state of the clicked node
            var checkbox = node.find('> .ui-treenode-content > .ui-chkbox'),
                    checked = checkbox.find('> .ui-chkbox-box > .ui-chkbox-icon').hasClass('ui-icon-check');
            if (checked) {
                // checkbox is going to be unchecked
                this.selectedNode = null;
                return;
            }

            // check for previously selected node
            if (this.selectedNode !== null) {
                // get the checkbox of the previously selected node
                checkbox = this.selectedNode.find('> .ui-treenode-content > .ui-chkbox');

                // update tree
                this.treeWidget.uncheck(checkbox);
                this.treeWidget.removeFromSelection(this.treeWidget.getRowKey(this.selectedNode));
            }

            // cache selected node
            this.selectedNode = node;
        }
    };

    // initialize singleton when document is loaded
    $(function () {
        TREE_SELECTION.init('treeWidget');
    });
</script>