你的位置:首页 > 软件开发 > Java > jquery easyui菜单树显示

jquery easyui菜单树显示

发布时间:2016-01-30 19:00:04
目前做了一个easyui项目需要显示多级菜单,菜单配置到数据库中,因此每级菜单都需要到数据库中取,用了jQuery EasyUI方便多了。效果体验:http://hovertree.com/texiao/jeasyui/2/下载:http://hovertree.com/h/bj ...

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

效果体验:http://hovertree.com/texiao/jeasyui/2/下载:http://hovertree.com/h/bjaf/kbtdmn5u.htm参考:http://hovertree.com/jeasyui/demo/tree/checkbox.htmlhttp://hovertree.com/jeasyui/demo/tree/dnd.htmlHTML代码:

 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='/images/loading.gif' data-original="http://hovertree.com/ziyuan/jquery/jquery-1.12.0.min.js"></script>10   <script type="text/javascript" src='/images/loading.gif' data-original="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>

原标题:jquery easyui菜单树显示

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录