easyUI之Tree（樹）
阿新 • • 發佈：2018-12-04
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Tree（樹）</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link> <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script> <script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script> </head> <body> <ul id="treeID" class="easyui-tree"> <li> <span>第一章</span> <ul> <li> <span>第一節</span> <ul> <li> <span>第一條</span> </li> <li> <span>第二條</span> </li> </ul> </li> <li> <span>第二節</span> </li> </ul> </li> <li> <span>第二章</span> </li> </ul> <script type="text/javascript"> $(function(){ //收起所有的選項 $("#treeID").tree("collapseAll"); }); </script> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Tree（樹）</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link> <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script> <script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script> </head> <body> <ul id="treeID"></ul> <script type="text/javascript"> $("#treeID").tree({ url : "/Demo/json/pro.json" }); </script> <script type="text/javascript"> </script> </body> </html>
[
{
"id":1,
"text":"廣東",
"state":"closed",
"children":[
{
"id":11,
"text":"廣州" ,
"state":"closed",
"children":[
{
"id":111,
"text":"天河"
},
{
"id":112,
"text":"越秀"
}
]
},
{
"id":12,
"text":"深圳"
}
]
},
{
"id":2,
"text":"湖南"
}
]