[easyUI] 樹形菜單 tree
阿新 • • 發佈:2018-06-24
struts 路徑 開啟 圖片 狀態 mat 用戶管理 eas add
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":"數據字典" }] }] }]View Code
4. 功能
可以將checkbox綁定相應的url,這樣可以通過控制器如@Controller的類或者Struts2的Action類 來執行特定的方法.
此外,這些復選框可以拖拽,不知道拖拽後其層級隸屬關系是否會變動.
[easyUI] 樹形菜單 tree