Primefaces Treenode使用复选框时如何仅选中父节点而不选中子节点?
Primefaces Tree组件复选框父子独立选中实现方案
Primefaces的Tree组件默认开启父子节点选中联动逻辑,你需要的独立选中效果可以通过以下两种方案实现:
方案1:原生属性配置(适配Primefaces 6.0及以上版本,推荐)
直接给<p:tree>组件添加propagateSelectionDown="false"属性即可关闭选中父节点时自动选中子节点的默认逻辑,如果你同时不需要选中子节点时自动选中父节点的话,可额外添加propagateSelectionUp="false"属性。
示例代码:
<p:tree value="#{productClassifyTreeBean.root}" var="classifyNode" selectionMode="checkbox" selection="#{productClassifyTreeBean.selectedClassifies}" <!-- 关闭选中向下联动 --> propagateSelectionDown="false" <!-- 可选:关闭选中向上联动 --> propagateSelectionUp="false" > <p:treeNode> <h:outputText value="#{classifyNode.classifyName}" /> </p:treeNode> </p:tree>
方案2:自定义事件逻辑(适配6.0以下旧版本)
如果使用的是不支持上述属性的低版本Primefaces,可以通过绑定选择事件手动覆盖默认联动逻辑:
前端代码:
<p:tree value="#{productClassifyTreeBean.root}" var="classifyNode" selectionMode="checkbox" selection="#{productClassifyTreeBean.selectedClassifies}" > <p:ajax event="select" listener="#{productClassifyTreeBean.onNodeSelect}" update="@this" /> <p:treeNode> <h:outputText value="#{classifyNode.classifyName}" /> </p:treeNode> </p:tree>
后端Java处理逻辑:
import org.primefaces.event.NodeSelectEvent; import org.primefaces.model.TreeNode; public class ProductClassifyTreeBean { private TreeNode root; private TreeNode[] selectedClassifies; public void onNodeSelect(NodeSelectEvent event) { // 清除当前选中节点所有子节点的选中状态 clearChildrenSelected(event.getTreeNode()); } private void clearChildrenSelected(TreeNode parentNode) { for (TreeNode child : parentNode.getChildren()) { child.setSelected(false); clearChildrenSelected(child); } } // 省略getter、setter等其他代码 }
两种方案都完全保留复选框交互形式,实现父节点选中时不会关联选中子节点,匹配需求。
内容的提问来源于stack exchange,提问作者Minh Nguyễn Nguyễn Đức
相关产品推荐
相关产品推荐

