jquery easyui菜单树显示

目前做了一个easyui项目需要显示多级菜单,菜单配置到数据库中,因此每级菜单都需要到数据库中取,用了jQueryEasyUI方便多了。效果体验:http://hovertree.com/texi

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/120666.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号