How to select all in PrimeFaces TreeTable?

2019-05-07 14:50发布

问题:

I have a PrimeFaces tree table and would like to add a check box which allows the user to select/unselect all.

Here is an extract from my xhtml

<p:selectBooleanCheckbox
        itemLabel="Select all"                                      
        value="#{mainViewBean.selectAll}">
        <p:ajax listener="#{mainViewBean.onSelectAll}"
            update="@this :mainForm" />
    </p:selectBooleanCheckbox>  

    <p:treeTable id="treeToAssign"
        value="#{mainViewBean.treeValue}" var="vh"
        selectionMode="checkbox"
        selection="#{mainViewBean.treeSelection}">
        <f:facet name="header">
            Tree Table                                                  
        </f:facet>                                                              
        <p:column>                                      
            <h:outputText value="#{vh.name}" />
        </p:column>                                 
    </p:treeTable>

and here is my bean method

private TreeNode treeValue;
private TreeNode[] treeSelection;
private boolean selectAll;

public void onSelectAll() {             
    List<TreeNode> selection = new ArrayList<>();
    for (TreeNode node : treeValue.getChildren()) {
    node.setSelected(selectAll);
        selection.add(node);
    }

    treeSelection = selection.toArray(new TreeNode[selection.size()]);
}

I had initially tried just setting NODE.setSelected(selectAll);, but that didn't work so I tried manually manually filling treeSelection as well.

I feel like this should be straightforward, but have been unable to figure it out, any suggestions?

Thanks

回答1:

Basically PrimeFaces uses the term node in the treeTable to refer to each row, and it provides a javascript function PrimeFaces.widget.TreeTable.selectNodesInRange(node) for selecting all the nodes in a rage of another node, and also another function to unselect all the nodes PrimeFaces.widget.TreeTable.unselectAllNodes().

Thus, having the following function (for selecting all, no need to have one for unselecting, it's already present):

function selectAllInTreeTable(widgetVar) {
   widgetVar.tbody.find('tr').each(function() {
      widgetVar.selectNodesInRange($(this));
   });
}

and assuming your widgetVar for the treeTable is treeTableWV, and adjusting the selectAll booleanCheckbox into this:

<p:selectBooleanCheckbox widgetVar="selectAllCheckBox" onchange="PF('selectAllCheckBox').isChecked()?PF('treeTableWV').unselectAllNodes():selectAllInTreeTable(PF('treeTableWV'))" >
   ...
</p:selectBooleanCheckbox>

Would do it.



回答2:

  • Make your bean at least @ViewScoped
  • Create additional field private Set<TreeNode> selectedNodesSet = new HashSet<>();
  • Use recursion for selecting/deselecting
public void onSelectAll() {
    for (TreeNode node : treeValue.getChildren()) {
        recursiveSelect(node);
    }

    treeSelection = new TreeNode[selectedNodesSet.size()];
    Iterator<TreeNode> iterator = selectedNodesSet.iterator();
    int index = 0;

    while (iterator.hasNext()) {
        treeSelection[index++] = iterator.next();
        iterator.remove();
    }
}

private void recursiveSelect(TreeNode node) {
    node.setSelected(selectAll);

    if (selectAll) {
        selectedNodesSet.add(node);
    } else {
        selectedNodesSet.remove(node);
    }

    for (TreeNode n : node.getChildren()) {
        recursiveSelect(n);
    }
}