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; 
    } 

} 

的facelet：

<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>