檢票 - 樹+ jquery-treeview

Question

我是一個新手在檢票和jquery，我想要一個簡單的樹在我的檢票頁，鏈接到jquery-treeview。 （「簡單」，我的意思是一個根，有些孩子可能是一些孩子，...）。

每個節點都包含一個標籤及其名稱和一些鏈接或按鈕。

我發現的一切看起來很難.... 我喜歡'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>

<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); 
} 

有沒有更好的解決方案？

Answer 1

我們使用所提供的Treegrid package通過Wicketstuff extensions