0.效果圖

　1. 一個id為mytree的無序列表

    <h2>easy UI Tree</h2>
    <ul id="mytree"></ul>

2. script語句

        $(function(){
            $(‘#mytree‘).tree({
                url:‘server/demo6_data.json‘,        //遠程加載tree數據的url路徑
                animate:true,                 //是否開啟動畫效果
                checkbox:true
 
,                 //是否顯示復選框
                cascadeCheck:false,         //是否開啟級聯選中，checkbox屬性為true時才生效
                onlyLeafCheck:true,         //是否只在葉節點前顯示復選框，checkbox屬性為true時才生效
                dnd:true,                     //是否啟用拖拽功能
                onDblClick:function(node){     //鼠標雙擊事件
                    $(this
 
).tree("toggle",node.target); //改變當前節點狀態
                }
            });
        });

3. demo6_data.json 內的代碼

[{
    "id":1,
    "text":"功能菜單",
    "children":[{
        "id":11,
        "text":"投票管理",
        "children":[{
            "id":111,
            "text":"所有投票",
            "attributes":{
                "url":"findAll"
            },
            "iconCls":"icon-search"
        },{
            "id":112,
            "text":"發起投票",
            "iconCls":"icon-add"
        }]
    },
    {
        "id":12,
        "text":"用戶管理",
        "state":"open",
        "children":[{
            "id":121,
            "text":"個人信息"
        },{
            "id":122,
            "text":"參與投票記錄",
            "iconCls":"icon-search"
        },{
            "id":123,
            "text":"發起投票記錄",
            "iconCls":"icon-search"
        }]
    },{
        "id":13,
        "text":"系統管理",
        "state":"open",
        "children":[{
            "id":131,
            "text":"系統日誌"
        },{
            "id":132,
            "text":"數據字典"
        }]
    }]
}]
 

4. 功能

可以將checkbox綁定相應的url,這樣可以通過控制器如@Controller的類或者Struts2的Action類 來執行特定的方法.

此外,這些復選框可以拖拽,不知道拖拽後其層級隸屬關系是否會變動.

[easyUI] 樹形菜單 tree