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>

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

1 个答案: