我有一个树形表格和两个按钮:
但它们不起作用。在支持 bean 处,我做了
root.setExpanded(true);
和 root.setExpanded(false);
但它不起作用。
<center>
<p:treeTable value="#{roleMB.root}" var="roleTreeTableVar"
binding="#{roleMB.treeTable}" id="roleTreeTable">
<f:facet name="header">
<center>
<p:commandButton value="Réduire tout"
icon="ui-icon-folder-collapsed" style="font-size: 0.9em"
actionListener="#{roleMB.expandAll}"
update=":roleTreeTableForm:roleTreeTable" />
<p:spacer width="30px" />
<p:commandButton value="Développer tout"
icon="ui-icon-folder-open" style="font-size: 0.9em"
actionListener="#{roleMB.collapseAll}"
update=":roleTreeTableForm:roleTreeTable" />
<p:spacer width="30px" />
</center>
</f:facet>
<p:column style="width:150px">
<f:facet name="header">
Nom de Role
</f:facet>
<h:outputText value="#{roleTreeTableVar.nom}" />
</p:column>
<p:column style="width:100px">
<f:facet name="header">
Id de role
</f:facet>
<h:outputText value="#{roleTreeTableVar.id}" />
</p:column>
<p:column style="width:20px">
<p:commandLink oncomplete="dlgAddRole.show()" value="Ajouter"
update=":addRoleForm:selectRolesNamesId">
<f:setPropertyActionListener value="#{roleTreeTableVar}"
target="#{roleMB.selectedRole}" />
</p:commandLink>
<p:commandLink oncomplete="delRole.show()" value="Supprimer">
<f:setPropertyActionListener value="#{roleTreeTableVar}"
target="#{roleMB.selectedRole}" />
</p:commandLink>
<p:commandLink oncomplete="editRole.show()" value="Modifier">
<f:setPropertyActionListener value="#{roleTreeTableVar}"
target="#{roleMB.selectedRole}" />
</p:commandLink>
</p:column>
</p:treeTable>
</center>
这是折叠和展开的递归方法。
public void collapsingORexpanding(TreeNode n, boolean option) {
if(n.getChildren().size() == 0) {
n.setSelected(false);
}
else {
for(TreeNode s: n.getChildren()) {
collapsingORexpanding(s, option);
}
n.setExpanded(option);
n.setSelected(false);
}
}
您应该将
expanded
属性设置为 true
,不仅针对根节点,而且针对所有子节点。
可能的解决方案可能如下所示:
视图.xhtml<h:form id="form">
...
<p:commandButton update=":form:tree" actionListener="#{view.collapseAll}"
icon="fa fa-minus" title="#{msg.collapseAll}"/>
<p:commandButton update=":form:tree" actionListener="#{view.expandAll}"
icon="fa fa-plus" title="#{msg.expandAll}"/>
...
<p:treeTable id="tree" ...>
...
</p:treeTable>
...
</h:form>
View.java
@Named
@ViewScoped
public class View implements Serializable {
private TreeNode root;
...
public void collapseAll() {
setExpandedRecursively(root, false);
}
public void expandAll() {
setExpandedRecursively(root, true);
}
private void setExpandedRecursively(final TreeNode node, final boolean expanded) {
for (final TreeNode child : node.getChildren()) {
setExpandedRecursively(child, expanded);
}
node.setExpanded(expanded);
}
}
使用 PrimeNG 15 和 TreeTable 组件
toogleAllNodes(nodeList: TreeNode[], expand: boolean): void {
nodeList?.forEach(node => {
node.expanded = expand; // expand or collapse node
if (node.children?.length) {
this.toogleAllNodes(node.children, expand);
}
});
}
openAllNodes() {
this.toogleAllNodes(this.grid, true);
this.grid = [...this.grid]; // Update tree in HTML
}
closeAllNodes() {
this.toogleAllNodes(this.grid, false);
this.grid = [...this.grid]; // Update tree in HTML
}
对于问题:“这如何实现?” 在代码中...
public void reloadTree() {
assocRoot = new DefaultTreeNode();
assocRoot.setExpanded(true);
TreeNode currentAssocNode;
AbstractDocument parentAssoc = getParentDocAssociation();
if(parentAssoc !=null) {
TreeNode parentAssocNode = new DefaultTreeNode(parentAssoc);
parentAssocNode.setExpanded(true);
....