目前做了一个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
(#换成@)。