如何select all in PrimeFaces TreeTable?

How to select all in PrimeFaces TreeTable?

我有一个 PrimeFaces 树 table,我想添加一个复选框,允许用户 select/unselect 全部。

这是我的 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>

这是我的 bean 方法

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()]);
}

我最初尝试只设置 NODE.setSelected(selectAll);,但没有用,所以我也尝试手动填充 treeSelection

我觉得这应该是直截了当的,但一直想不通,有什么建议吗?

谢谢

  • 至少让你的豆子@ViewScoped
  • 创建附加字段private Set<TreeNode> selectedNodesSet = new HashSet<>();
  • 对 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);
    }
}

基本上 PrimeFaces 使用 treeTable 中的术语节点来指代每一行,并且它提供了一个 javascript 函数 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().

于是就有了下面的功能(全选,取消全不用,已经有了):

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

并假设 treeTable 的 widgetVartreeTableWV,并将 selectAll booleanCheckbox 调整为:

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

会做的。