展示樹的方法有很多，在DRP中用過最原始的遞迴的方法，接觸過ztree這次在公司使用的是比較熟悉的easyui，雖然easyui使用的比較多，但是從來沒有用過tree，這次是邊看幫助邊做總結一下其中自己認為的關鍵點。

首先從幫助文件上得知tree中的每個節點包括一下幾個屬性：

• id：節點ID，對載入遠端資料很重要。
• text：顯示節點文字。
• state：節點狀態，'open' 或 'closed'，預設：'open'。如果為'closed'的時候，將不自動展開該節點。
• checked：表示該節點是否被選中。
• attributes: 被新增到節點的自定義屬性。
• children: 一個節點陣列聲明瞭若干節點。
• iconCls：顯示的節點圖示CSS類ID。

       所以在使用的時候要先封住一個tree的類，以上的屬性也是要封裝在tree中的屬性，但是因為要做的樹是一層一層的，這樣就需要每個節點知道自己的父節點，所以在封裝的類中還有新增一個pid，最後封裝出的類是這樣的：

<span style="font-size:18px;">public classTree implements java.io.Serializable{
   public String id;
   public String text;
   public String state="closed";//預設為關閉，不展開子節點的
   public String checked;
   public Object attributes;
   public String iconCls;
   public String pid;
//因為子節點不僅一個，所以使用list
   public List<Tree> children =newArrayList<Tree>();
 
   //改建構函式在進行資料返回時需要用到
   public Tree(String id,Stringpid,String text,String icon,Object obj,boolean haveChild){
      this.id=id;
      this.pid=pid;
      this.text=text;
      this.attributes=obj;
      if(!haveChild){
         this.state="open";
      }
   }
   //每個屬性的get和set略
}</span>
 
 

<span style="font-size:18px;"><ulid="tree" class="easyui-tree"></ul></span>

       然後再js裡開始控制後臺資料在前臺的展示，程式碼如下：

<span style="font-size:18px;"><script type="text/javascript">
      $(function(){
         $("#tree").tree({
            method:"get",
            url:"test/tree",//這裡寫用來呼叫的後臺的方法           
            onBeforeExpand:function(node,param){
                url:"test/tree?pid="+node.id;
//在節點展開之前觸發,這裡將單擊節點的id傳到後臺，就可以查出所有該節點的子節點，然後展示
            }
         });
      });
   </script></span>
 

       以上的三個是展示一棵樹所必須的，其他的一些可以根據具體的樹展示的要求使用。前臺的程式碼寫完了之後就是後臺的程式碼，公司使用的是springMVC的框架，controller—>service—>dao，在controller和service層中沒有沒有寫過多的程式碼就是呼叫的關係，比較重要的程式碼是寫在dao層，在dao層整體的邏輯是這樣的：首席從資料庫中查出所有要顯示的資料得到的結果放在list中，這個list的資料想要返回前臺時能夠被以樹的形式展示直接返回list是不行的，因為資料庫中儲存的欄位名和tree的屬性是無法對應的，這時候就需要在分裝一個方法，將從資料庫中返回的結果一一的對應到tree中。

/<span style="font-size:18px;">/從資料庫中得到list
public List<Tree> getTrees() {
      List<Tree>trees=newArrayList<Tree>();
      ListresList=null;//將從資料庫中查到的結果放在改list中
      assembleTree(trees,list, true);
      return trees;
     
     
   }
 
 
//被呼叫的用來例項化tree的
   public voidassembleTree(List<Tree> trees,List<Map> list,boolean haveChild) {
      Stringicon="";//這裡是圖示的名稱，要和自己的css中一樣，前臺才能顯示
      for(Maprecord:list){
         record=lowerMap(record);
         //其中的id，pid，name都是資料庫中的欄位，在new的時候回撥用Tree中國的建構函式，然後將資料庫的資料對應到tree的屬性上，然後在前臺顯示
         Treetree=newTree((String)record.get("id"), (String)record.get("pid"), (String)record.get("name"), icon, record, haveChild)
         trees.add(tree);
      }
   }</span>

       最後返回資料，tree在做展示的時候機可以根據id和pid一層一層的進行展示。

小結

       這次樹的完成讓自己深深的感覺到後臺的程式碼相對好些一些，前臺的除錯比較麻煩，雖然是藉助了第三方份前臺框架有幫助文件單數如果沒有親身的實踐過第一次還是比較困難的，幫助文件中一些詞語的表達都不是特別的明白什麼意思。