使用EasyUI開發銀行業績統計系統[11]-EasyUI樹形控制元件tr

樹形控制元件還是經常使用的，比如選單、部門管理等涉及到有歸屬關係的功能經常在前端頁面採用樹形結構表示。

EasyUI對樹形控制元件的封裝非常的Nice，尤其是對核取方塊的支援簡直是漂亮異常。本篇就最常用的選單數為例演示EasyUI中tree的使用。

先看示意圖：

具體程式碼如下，注意文字描述部分說明：

  




        
注意json資料中的關鍵鍵名id/text/children/state，分別表示樹節點的id值，顯示文字、子節點組、節點狀態（是否展開）
        
data-options引數url表示資料來源，animate表示是否採用展開和關閉節點時的動畫效果，lines表示節點間是否採用節點線(更加美觀)
        

        
    
    

        
注意checkbox:true啟用後，功能非常強大
        
1,可以選擇多個選項，並可以獲取所有選中項資訊
        
2,在父節點選中後，子節點會自動全選
        
3,子節點選中1個以上後，父節點會自動變為部分選中狀態，子節點全部選中後，父節點變為選中狀態
        

        
        
    
    

最後，要理解tree_data.json檔案中的層級關係，在MyEclipse中編輯json檔案時，可以使用右鍵-【format text】功能自動給json格式化，這樣會好看很多。

[
    {
        "id":1,
        "text":"所有功能",
        "children":[
            {
                "id":11,
                "text":"人員管理",
                "children":[
                    {
                        "id":111,
                        "text":"新增人員"
                    },
                    {
                        "id":112,
                        "text":"刪除人員"
                    },
                    {
                        "id":113,
                        "text":"修改人員資訊"
                    }
                ]
            },
            {
                "id":12,
                "text":"部門管理",
                "state":"closed",
                "children":[
                    {
                        "id":121,
                        "text":"新增部門"
                    },
                    {
                        "id":122,
                        "text":"刪除部門"
                    },
                    {
                        "id":123,
                        "text":"Microsoft Office"
                    },
                    {
                        "id":124,
                        "text":"Games",
                        "checked":true
                    }
                ]
            },
            {
                "id":13,
                "text":"許可權管理"
            },
            {
                "id":14,
                "text":"角色管理"
            },
            {
                "id":15,
                "text":"選單管理"
            }
        ]
    }
]