你的位置:首页 > Java教程

[Java教程]jquery easyui菜单树显示


目前做了一个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