首页 > Web开发 > 详细

jquery easyui菜单树显示

时间:2016-01-30 22:23:52      阅读:235      评论:0      收藏:0      [点我收藏+]

目前做了一个easyui项目需要显示多级菜单,菜单配置到数据库中,因此每级菜单都需要到数据库中取,用了jQuery EasyUI方便多了。

效果体验: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代码:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>树菜单操作 - jQuery EasyUI 范例 - 何问起</title><base target="_blank" />
 6     <link rel="stylesheet" type="text/css" href="http://hovertree.com/jeasyui/themes/default/easyui.css">
 7     <link rel="stylesheet" type="text/css" href="http://hovertree.com/jeasyui/themes/icon.css">
 8     <link rel="stylesheet" type="text/css" href="http://hovertree.com/jeasyui/demo/demo.css">
 9     <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.12.0.min.js"></script>
10     <script type="text/javascript" src="http://hovertree.com/jeasyui/jquery.easyui.min.js"></script>
11     <style>a{color:black;text-decoration:none;}</style>
12 </head>
13 <body>
14     <h2>树菜单操作</h2>
15     <p>点击下列按钮体验效果.</p>
16     <div style="margin:20px 0;">
17         <a href="javascript:;" class="easyui-linkbutton" onclick="collapseAll()" target="_self">全部收起</a>
18         <a href="javascript:;" class="easyui-linkbutton" onclick="expandAll()" target="_self">全部展开</a>
19         <a href="javascript:;" class="easyui-linkbutton" onclick="expandTo()" target="_self">展开选择指定项</a>
20         <a href="javascript:;" class="easyui-linkbutton" onclick="getSelected()" target="_self">获取选择项值</a>
21     </div>
22     <div class="easyui-panel" style="padding:5px">
23         <ul id="tt" class="easyui-tree" data-options="url:‘tree_data1.json‘,method:‘get‘,animate:true"></ul>
24     </div>
25     <br /><br />
26     <a href="http://hovertree.com/">首页</a>
27     <script type="text/javascript">
28         function collapseAll(){
29             $(#tt).tree(collapseAll);
30         }
31         function expandAll(){
32             $(#tt).tree(expandAll);
33         }
34         function expandTo(){
35             var node = $(#tt).tree(find,113);
36             $(#tt).tree(expandTo, node.target).tree(select, node.target);
37         }
38         function getSelected(){
39             var node = $(#tt).tree(getSelected);
40             if (node){
41                 var s = node.text;
42                 if (node.attributes){
43                     s += ","+node.attributes.p1+","+node.attributes.p2;
44                 }
45                 alert(s);
46             }
47         }
48     </script>
49 </body>
50 </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>"
}
]
}
]

更多特效:http://www.cnblogs.com/roucheng/p/texiao.html

jquery easyui菜单树显示

原文:http://www.cnblogs.com/roucheng/p/shuxingcaidan.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!