效果體驗：http://hovertree.com/texiao/jeasyui/2/
下載：http://hovertree.com/h/bjaf/kbtdmn5u.htm
參考：http://hovertree.com/jeasyui/demo/tree/checkbox.html
http://hovertree.com/jeasyui/demo/tree/dnd.html
HTML代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>樹菜單操作 - jQuery EasyUI 范例</title><base target="_blank" />
<link rel="stylesheet" type="text/css" href="http://hovertree.com/jeasyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://hovertree.com/jeasyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://hovertree.com/jeasyui/demo/demo.css">
<script type="text/javascript" src="http://hovertree.com/jeasyui/jquery.min.js"></script>
<script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.12.0.min.js"></script>
<style>a{color:black;text-decoration:none;}</style>
</head>
<body>
<h2>樹菜單操作</h2>
<p>點擊下列按鈕體驗效果.</p>
<div style="margin:20px 0;">
<a href="javascript:;" class="easyui-linkbutton" onclick="collapseAll()" target="_self">全部收起</a>
<a href="javascript:;" class="easyui-linkbutton" onclick="expandAll()" target="_self">全部展開</a>
<a href="javascript:;" class="easyui-linkbutton" onclick="expandTo()" target="_self">展開選擇指定項</a>
<a href="javascript:;" class="easyui-linkbutton" onclick="getSelected()" target="_self">獲取選擇項值</a>
</div>
<div class="easyui-panel" style="padding:5px">
<ul id="tt" class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true"></ul>
</div>
<script type="text/javascript">
function collapseAll(){
$('#tt').tree('collapseAll');
}
function expandAll(){
$('#tt').tree('expandAll');
}
function expandTo(){
var node = $('#tt').tree('find',113);
$('#tt').tree('expandTo', node.target).tree('select', node.target);
}
function getSelected(){
var node = $('#tt').tree('getSelected');
if (node){
var s = node.text;
if (node.attributes){
s += ","+node.attributes.p1+","+node.attributes.p2;
}
alert(s);
}
}
</script>
</body>
</html>
json文件代碼：
[
{
"id": 1,
"text": "Tree菜單",
"children": [
{
"id": 11,
"text": "Photos",
"state": "closed",
"children": [
{
"id": 111,
"text": "<a href='http://hovertree.com'>何問起</a>"
},
{
"id": 112,
"text": "<a href='http://hovertree.com/jeasyui/'>EasyUI</a>"
},
{
"id": 113,
"text": "<a href='http://hovertree.com/menu/jquery/'>jQuery</a>"
}
]
},
{
"id": 12,
"text": "Program Files",
"children": [
{
"id": 121,
"text": "<a href='http://hovertree.com/h/bjaf/hoverclock.htm'>HoverClock</a>"
},
{
"id": 122,
"text": "<a href='http://hovertree.com/h/bjaf/easysector.htm'>畫餅圖</a>",
"attributes": {
"p1": "Custom Attribute1",
"p2": "Custom Attribute2"
}
},
{
"id": 123,
"text": "<a href='http://hovertree.com/h/bjaf/hovertreebatch.htm'>批量重命名</a>"
},
{
"id": 124,
"text": "<a href='http://tool.hovertree.com/a/base64/'>圖像轉碼</a>",
"checked": true
}
]
},
{
"id": 13,
"text": "<a href='http://hovertree.com/texiao/game/'>見縫插針</a>"
},
{
"id": 14,
"text": "<a href='http://hovertree.com/shortanswer/bjaf/j43wyyvr.htm'>選擇題</a>"
},
{
"id": 15,
"text": "<a href='http://hovertree.com/h/bjaf/css3icon.htm'>圖標</a>"
},
{
"id": 16,
"text": "<a href='http://hovertree.com/h/bjaf/treeaction.htm'>原文</a>"
}
]
}
]