单击树节点时如何打开新的div

Question

我有这个 Primefaces 树：

JSF 代码

<h:form id="form">  

    <p:tree id="tree" value="#{TreeViewController.root}" var="node" dynamic="true" cache="true" animate="true">  
        <p:treeNode>  
            <h:outputText value="#{node}"/>  
        </p:treeNode> 
    </p:tree>  

</h:form>

托管 Bean

private TreeNode root;  

    public TreeView() {  
        root = new DefaultTreeNode("Root", null);  
        TreeNode node0 = new DefaultTreeNode("Node 0", root);  
        TreeNode node1 = new DefaultTreeNode("Node 1", root);  
        TreeNode node2 = new DefaultTreeNode("Node 2", root);  

        TreeNode node00 = new DefaultTreeNode("Node 0.0", node0);  
        TreeNode node01 = new DefaultTreeNode("Node 0.1", node0);
        TreeNode node02 = new DefaultTreeNode("Node 0.2", node0);  
        TreeNode node03 = new DefaultTreeNode("Node 0.3", node0);
        TreeNode node04 = new DefaultTreeNode("Node 0.4", node0);  
        TreeNode node05 = new DefaultTreeNode("Node 0.5", node0);
        TreeNode node06 = new DefaultTreeNode("Node 0.6", node0);
        TreeNode node07 = new DefaultTreeNode("Node 0.7", node0);  
        TreeNode node08 = new DefaultTreeNode("Node 0.8", node0);  

        TreeNode node10 = new DefaultTreeNode("Node 1.0", node1);  
        TreeNode node11 = new DefaultTreeNode("Node 1.1", node1);  

        TreeNode node000 = new DefaultTreeNode("Node 0.0.0", node00);  
        TreeNode node001 = new DefaultTreeNode("Node 0.0.1", node00);  
        TreeNode node010 = new DefaultTreeNode("Node 0.1.0", node01);  

        TreeNode node100 = new DefaultTreeNode("Node 1.0.0", node10);  
    }  

    public TreeNode getRoot() {  
        return root;  
    }  

我很感兴趣如何打开一个包含节点附加信息的新 div。我想给用户浏览节点的机会。当他单击树右侧的节点以查看附加层中的附加信息时。我怎么能做到这一点？

我找到了标签属性onNodeClick，它用于在单击树节点时调用 JavaScript。也许用JS我可以打开一个新的div？

解决方案无效 我测试了这段代码，但它不起作用：

<h:form id="form">  

    <p:tree id="tree" value="#{TreeViewController.root}" var="node" dynamic="true" cache="true" animate="true">  
        <p:ajax event="select" listener="#{TreeViewController.onNodeSelect}" update="outputComponent" />
        <p:treeNode>                            
            <h:outputText value="#{node}"/>  
        </p:treeNode> 
    </p:tree>

    <p:outputPanel id="outputComponent">
        <h:outputText value="#{TreeViewController.onNodeSelect}" />
    </p:outputPanel>

</h:form>  

public String onNodeSelect(NodeSelectEvent event) {
        String node = event.getTreeNode().getData().toString();

        return node;
    }

Answer 1

一切都在文档中（下面的代码是它的摘录）。您可以使用 onNodeClick 调用自定义 JavaScript 方法来显示您的“div”，或者我建议您使用 ajax 事件。

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

然后就可以在服务端处理事件了：

public void onNodeSelect(NodeSelectEvent event) {
    String node = event.getTreeNode().getData().toString();
    // prepare data you want to show
}

然后有一个输出组件，例如：

<p:outputPanel id="outputComponent">
    <!-- reference the bean in which you put your informatnoi in the onNodeSelect listener-->
</p:outputPanel>