如何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 的 widgetVar
是 treeTableWV
,并将 selectAll booleanCheckbox 调整为:
<p:selectBooleanCheckbox widgetVar="selectAllCheckBox" onchange="PF('selectAllCheckBox').isChecked()?PF('treeTableWV').unselectAllNodes():selectAllInTreeTable(PF('treeTableWV'))" >
...
</p:selectBooleanCheckbox>
会做的。
我有一个 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 的 widgetVar
是 treeTableWV
,并将 selectAll booleanCheckbox 调整为:
<p:selectBooleanCheckbox widgetVar="selectAllCheckBox" onchange="PF('selectAllCheckBox').isChecked()?PF('treeTableWV').unselectAllNodes():selectAllInTreeTable(PF('treeTableWV'))" >
...
</p:selectBooleanCheckbox>
会做的。