java - Wicket - 树 + jquery-treeview

Question

我是 wicket 和 jquery 的新手，我想在我的 wicket 页面中有一棵简单的树，链接到 jquery-treeview。 (“简单”，我的意思是一个根，一些 child 可能有一些 child ，......)。

每个节点都包含一个带有其名称的标签和一些链接或按钮。

我发现的一切看起来都很难...... 我喜欢“RecursivePanel”示例，但我无法使其与 jquery-treeview 一起使用。

您对下面的解决方案有何看法。我不太喜欢分成两个组件的事实，但我没有找到任何好的解决方案。

所以树由 2 个组件组成。

• NodePanel，包含节点名称和 NodeChildrenPanel 到
• 中。
• NodeChildrenPanel，如果它是叶子，则包含一个标签，或者每个子项又包含一个 NodePanel。

NodePanel.html

<wicket:panel>
  <li>
    <span wicket:id="name"></span>
    <span wicket:id="children"></span>
  </li>
</wicket:panel>

NodePanel.java

class NodePanel extends Panel {
    Node(String id, Node node) {
        super(id);

        setRenderBodyOnly(true);

        add(new Label("name", node.getName()));
        add(new NodeChildrenPanel("children", node));
    }
}

NodeChildrenPanel.html

<wicket:panel>
  <ul>
    <li wicket:id="children"></li>
  </ul>
</wicket:panel>

NodeChildrenPanel.java

class NodeChildrenPanel extends Panel {
    public NodeChildrenPanel(String id, Node node) {
        super(id);

        setRenderBodyOnly(true);

        if (node.isLeaf()){
            Label l = new Label("children");
            l.setVisible(false);
            add(l);
        } else {
            RepeatingView rv = new RepeatingView("children");

            for (Node child : node.getChildren()){
                if (child.isLeaf()){
                        rv.add(new Label(rv.newChildId(), child.getName()));
                } else {
                        rv.add(new NodePanel(rv.newChildId(), child));
                }
            }

            add(rv);
        }       
 }

}

在页面中，

根节点被创建成

 <ul id="my_tree_ul">
    <div wicket:id="my_tree"></div>
 </ul>

<小时/>

add(new NodePanel("my_tree", getSession().getMyRootNode());

并且

链接到 jquery-treeview。

public void renderHead(IHeaderResponse response) {
    String js = "$(document).ready(function(){ $(\"#my_tree_ul\")
                     .treeview({animated: \"fast\",       
                          });
                 });");

    response.renderJavaScript(js, null);
}

有没有更好的解决办法？

Answer 1

我们使用 Treegrid package由Wicketstuff extensions提供