1

私はこの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 を呼び出すために使用されるtag 属性を見つけました。多分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;
    }
4

1 に答える 1

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>
于 2012-11-10T15:35:00.373 に答える