2011-11-10 13 views
1

私はwicketとjqueryのnewbです。私はwicketページの単純なツリーをjquery-treeviewにリンクしたいと思います。 (「シンプルな」とは、1つのルート、いくつかの子供がいくつかの子供であるかもしれないということです...)。Wicket - Tree + jquery-treeview

すべてのノードには、名前といくつかのリンクまたはボタンのラベルが含まれています。

私が見つけたものはすべて本当に難しく見えます.... 私は 'RecursivePanel'の例が好きですが、jquery-treeviewで動作させることはできません。

あなたは以下の解決策についてどう思いますか?私は2つのコンポーネントに分割されている事実はあまり好きではありませんが、良い解決策は見つかりませんでした。

したがって、ツリーは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>

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

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

に作成され、<UL>がjquery-に連結されていますツリー表示。

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

    response.renderJavaScript(js, null); 
} 

もっと良い解決策はありますか?フラグメント(http://wicket.apache.org/learn/examples/usingfragments.html)ノードのために:

+0

が提供するTreegrid packageを使用しています。 –

答えて

0

私たちは、あなたが単一のコンポーネントを作成して、改札を使用しようとすることができWicketstuff extensions