總結一下在最近做統計學的一個專案中，用到的關於tree的知識點，前端使用的是miniUI,所以談到的基本都是miniUI框架中的tree。

如上圖所示，我來說一下這種樹的構造和實現。
（1）首先可以看到它是一顆多層的樹形
（2）不同的層級有不同的節點內容，我們把節點叫做node
（3）如何構造這棵樹？

<div size="250" maxSize="500" minSize="100" showCollapseButton="true" style="border-width:1px;overflow-x: hidden">
     <td style="width:100%;overflow-x: hidden"
 
 align="left">
         <ul id="leftTree" class="mini-tree"  style="width:100%;height:100%;"
  showArrow="true" showTreeIcon="false" textField="text" idField="id" parentField="pid" expandOnLoad="0" resultAsTree="true" >
                        </ul>
                    </td>
                </div
 
>

我們使用了mini自帶的class=”mini-tree”，他會將我們在後臺組織的樹的資料自動解析為樹並顯示，所以後臺只需要組織好資料就行.

showArrow:是否顯示樹前面的箭頭，true/false
showTreeIcon：顯示樹前面的圖示，預設是白板,true/false
resultAsTree：url資料是否列表 true/false

簡單說一下後臺的資料組織：
方式1：你可以每層的的內容進行查詢，將所有的內容全部放到你的實體就可以。
方式2：根據樹的形式，你可以直接利用SQL來組織好資料，最後在java程式碼裡面通過迴圈來處理子節點也是可以的。
特別宣告：
用miniUI的tree控制元件，那麼你的後臺實體應該如下宣告，否則資料將不能被miniUI框架識別和正確顯示資料：

public class TreeVo{
private String id;//代表樹的每個節點的id
private String text;//代表樹的每個節點的文字值
private List<TreeVo> children;//代表該節點的子節點集合
}

因為在開發中，有個同事寫了個children2，結果無論怎麼處理，樹的資料是對的，就是不能顯示正確的樹結構，最後經過檢視文件和分析，發現是因為框架不能識別children2這個屬性。

前面說了後臺如何構造樹的資料以及會使用mini-tree的控制元件，現在說一下前端如何觸發請求後臺，尋找資料：

mini.parse();//表示將控制元件等解析為miniUI框架的
var tree = mini.get("leftTree");//表示獲取到樹這個物件
tree.setUrl(url);//url是你請求後臺組織資料的地址

如上圖所示，假設，我的每層節點都有一個url地址，表示點選每個節點，在樹的右側會顯示一張資料表單，那麼如何給該節點加上url呢？而且不同層級的節點的url不同，同層級的節點的url相同，所傳引數的值不同，此時又改如何處理？
（1）大概思路
通過查閱官網API，我們可看到一些關於tree的事件，關於給每層節點新增url，我選用了drawnode事件，可以理解為在我初始化介面的時候，動態畫樹的每個節點的時候，我們就將相應的URL畫上去。
（2）具體實現

 tree.on("drawnode",function (e) {
       var node = e.node;
       //我們可以通過getLevel來獲取節點的層級，表示該節點屬於第幾層
       var level = tree.getLevel(node);
       //假設我們要給第二層新增url
       if(level === '2'){
            e.nodeHtml = '<a href="#" onclick=jumpTo(\''+node.id+'\')><img src="${ctxStatic}/images/li.png"></a>'+'<a href="#" onclick=showNewPage("${ctx}/xxxx/xx?id=' + node.id + '","1")>' + node.text + '</a>';
        }
        //我們可以通過如下方法獲取該節點的父節點,如果你想使用父節點的屬性，自己可以console.info(parentNode);然後看其中的屬性值
        var parenetNode = tree.getParentNode(node);

   });

總結一下：
（1）給節點加url可以通過drawnode事件在繪製樹的時候動態繪製
（2）不同的層級節點url不同，可以通過tree.getLevel(node);方法來獲取節點的層級
（3）獲取父節點，可通過tree.getParentNode(node);來實現

接著說關於點選節點，右側顯示錶單的問題，表單是放在一個iframe裡面的，具體實現如下：

<iframe src="" id="content-iframe2" frameborder="0" style="width:100%;height:100%;"></iframe>

如何讓iframe裡面顯示錶單的具體內容，需要進行如下的操作：

$('#content-iframe').attr("src",url);

最後要說的關於這棵樹的問題是，看上圖，大概可以看出他們是放在一個div裡,class=”mini-tabs”的控制元件中，裡面有兩個div，分別是主題和資料，需求還有一個是通過點選圖示跳轉到資料的樹，並且展開樹，右側顯示對應的表單資訊。
問題點：
（1）tab的切換
（2）找到對應的節點
（3）展開樹
具體實現如下：

var tabs = mini.get("listDiv");
       tabs.activeTab("tabs2");
       var list = tree1.getList();
       var url = "${ctx}/xxx/xxx?id="+id;
       for(var i=0;i<list.length;i++){
           if(list[i].id == id){
               tree1.expandPath(list[i]);
               $('#content-iframe2').attr("src",url);
           }
       }

這棵樹就總結到這裡，具體右側的表單操作以後有時間再說，因為是第一次接觸樹這種控制元件，所以才想抽時間總結一下，方便以後複習用。