單擊樹節點時如何打開新的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>

托管豆

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>