Question

我正在使用带有树和复选框选择的primefaces [3.4]展示：

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

是否可以附加p：ajax事件以单击节点的标签??

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

提前致谢。

Answer 1

您永远不必调用服务器来执行像显示/隐藏页面上其他元素这样简单的操作。 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>

Answer 2

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. |
+----------+----------------------------------------+----------------------------+

选择事件就是你想要的。

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

Answer 3

这就是我解决这个问题的方法，只需在treeNode模板中添加一个复选框，然后将selectionMode更改为单个。

<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>

考虑您必须手动编写逻辑以检查/取消选中父/子节点。

感谢。

Primefaces Tree：当selectionMode ='checkbox'时，点击节点标签上的事件

3 个答案: