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代码：

 <!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>"

}

]

}

]

巴特西

jquery easyui菜单树显示

最新文章

热门文章