Primefaces树：选择Mode='checkbox'时，单击节点标签上的事件

Question

我正在使用primefaces[3.4]showcase，其中包含树和复选框选择：

http://www.primefaces.org/showcase-labs/ui/treeSelectionCheckbox.jsf

是否可以为点击节点标签附加一个p:ajax事件？？

当用户单击树的节点标签时，我需要用子对象更新面板，而不一定是在用户选择它们时（单击复选框）。

提前感谢。

Answer 1

p:tree元素能够处理4个事件：

+----------+----------------------------------------+----------------------------+
| Event    | Listener Parameter                     | Fired                      |
+----------+----------------------------------------+----------------------------+
| expand   | org.primefaces.event.NodeExpandEvent   | When a node is expanded.   |
| collapse | org.primefaces.event.NodeCollapseEvent | When a node is collapsed.  |
| select   | org.primefaces.event.NodeSelectEvent   | When a node is selected.   |
| unselect | org.primefaces.event.NodeUnselectEvent | When a node is unselected. |
+----------+----------------------------------------+----------------------------+

select事件就是您想要的。

编辑：当使用树中的复选框时，这将不起作用。

Answer 2

我就是这样解决这个问题的，只需在treeNode模板中添加一个复选框，并将selectionMode更改为single。

<p:tree value="#{treeBean.root}" var="node" dynamic="true" cache="false"  
            selectionMode="single"  selection="#{treeBean.selectedNode}" id="tree">  

        <p:ajax event="select" update=":form:messages" listener="#{treeBean.onNodeSelect}" />  

        <p:treeNode>  
            <p:selectBooleanCheckbox  id="treeCheck" value="#{node.selected}"/> 
            <h:outputText value="#{node.name}" />  
        </p:treeNode>  
    </p:tree>  

考虑到您必须手动编写逻辑以在应该检查/取消检查父/子节点时检查/取消检查父/子节点。

谢谢

Answer 3

你永远不需要调用服务器来做一些简单的事情，比如在页面上显示/隐藏其他元素。Primefaces应该在这方面做得更好。同时，考虑一下这个javascript代码。。。

<p:treeNode type="parent" styleClass="parent">
    <h:outputText value="#{myLabel}"/>
</p:treeNode>

...

<script>
jQuery(".parent > .ui-tree-selectable > .ui-treenode-label").each(function(){
    var label = jQuery(this);

    label.click(function(){
        label.siblings(".ui-tree-toggler").click();
    });
});
</script>