jquery easyui菜单树显示
2016-01-30 18:54
711 查看
目前做了一个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代码:
菜单项的json文件代码:
更多特效:/article/6453322.html
效果体验: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/ziyuan/jquery/jquery-1.12.0.min.js"></script> <script type="text/javascript" src="http://hovertree.com/jeasyui/jquery.easyui.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> <br /><br /> <a href="http://hovertree.com/">首页</a> <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>" } ] } ]
更多特效:/article/6453322.html
相关文章推荐
- jQuery 遍历数组
- jsp中的jquery失效以及引入js失败的问题
- 使用Ajax以及Jquery.form异步上传图片
- $.ajax简写
- jquery easyui datagrid使用参考
- jQuery选择器和选取方法
- jquery手册
- jQuery如何设置checkbox选中状态
- 【jQuery入门】jQuery基础课程
- jquery 动态添加表格行
- JQUEry查找父元素和子元素
- JQuery:视频+实战总结
- jquery获取input、textarea值之后的处理问题
- 关于jquery中resize用法
- jquery 展开折叠菜单
- [jQuery] Cannot read property ‘msie’ of undefined错误的解决方法
- jquery 停止animate动画,并且回复最初状态
- jquery获取触发方法的对象
- 深入探秘jquery瀑布流的实现
- 前端福利!超过1000个超实用的高品质JQUERY插件免费使用