目前做了一个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>"

}

]

}

]

更多特效：http://www.cnblogs.com/roucheng/p/texiao.html

jquery easyui菜单树显示的更多相关文章

  1. springmvc + jquery easyui实现分页显示

    如有不明确的地方,戏迎增加QQ群交流:66728073      推荐一本Java学习的书:深入理解Java7 一,下载并导入jquery easyui的导 <link rel="st ...

  2. jquery easyui鼠标右击显示自定义的菜单

    1.datagrid表格中,对某一行鼠标右击,显示出如下的自定义的菜单: 在html页面中写: <div id="menu" class="easyui-menu& ...

  3. 动态控制jQuery easyui datagrid工具栏显示隐藏

    //隐藏第一个按钮 $('div.datagrid-toolbar a').eq(0).hide(); //隐藏第一条分隔线 $('div.datagrid-toolbar div').eq(0).h ...

  4. easyui 菜单树搜索

    //树形菜单搜索方法    function searchTree(treeObj,parentNode,searchCon){        var children;        for(var ...

  5. jquery easyui datagraid 对象显示的方法与datagraid、分页、复选框多选的数据显示

    ========================jsp==============================<table id="dg" fit="true& ...

  6. jquery easyUI 时间格式

    今天用到了jquery easyUI datetime-box, 显示的是英文格式的,作为国人看着很不爽, 看了下度娘,原来引入个/locale/easyui-lang-zh_CN.js这个js 就o ...

  7. 蓝桥杯Web：【功能实现】菜单树检索

    [功能实现]菜单树检索 背景介绍 实际工作中很多前端攻城狮都会遇到这样一个需求:在多级菜单树中模糊搜索匹配的菜单项,并显示出来. 本题需要在已提供的基础项目中使用 Vue.js 知识,实现对已提供的二 ...

  8. 基于MVC4+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录

    最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...

  9. 第二百二十六节，jQuery EasyUI，Tree(树)组件

    jQuery EasyUI,Tree(树)组件 本节课重点了解 EasyUI 中 Tree(树)组件的使用方法,这个组件依赖于 Draggable(拖 动)和 Droppable(放置)组件. 一．加 ...

随机推荐

  1. .NET单元测试的艺术-3.测试代码

    开篇:上一篇我们学习单元测试和核心技术:存根.模拟对象和隔离框架,它们是我们进行高质量单元测试的技术基础.本篇会集中在管理和组织单元测试的技术,以及如何确保在真实项目中进行高质量的单元测试. 系列目录 ...

  2. 仅此一文让你明白ASP.NET MVC 之View的显示（仅此一文系列二）

    题外话 一周之前写的<仅此一文让你明白ASP.NET MVC原理>受到了广大学习ASP.NET MVC同学的欢迎,于是下定决心准备把它写成一个系列,以满足更多求知若渴的同学们.蒋金楠老师已 ...

  3. .NET 的 Debug 和 Release build 对执行速度的影响

    这篇文章发布于我的 github 博客:原文 在真正开始讨论之前先定义一下 Scope. 本文讨论的范围限于执行速度,内存占用什么的不在评估的范围之内. 本文不讨论算法:编译器带来的优化基本上属于底层 ...

  4. 【VC++技术杂谈006】截取电脑桌面并将其保存为bmp图片

    本文主要介绍如何截取电脑桌面并将其保存为bmp图片. 1. Bmp图像文件组成 Bmp是Windows操作系统中的标准图像文件格式. Bmp图像文件由四部分组成: (1)位图头文件数据结构,包含Bmp ...

  5. RxAndroid+Retrofit+MVVM（1）OKHttp

    1)Gradlecompile 'com.squareup.okhttp:okhttp:2.4.0'compile 'com.squareup.okio:okio:1.5.0' 2)Get //创建o ...

  6. 无法启用插件，因为它引起了一个致命错误（fatal error）。

    关于wordpress不能启用某插件引发的错误,php 中 出错,Cannot redeclare wpb_getImageBySize().这个问题也是在我wordpress版本从v4.1生成v4. ...

  7. Publication的 immediate_sync 属性

    Publication的属性 immediate_sync 控制 Snapshot 文件的创建,如果属性 immediate_sync设置为true,那么snapshot file在snapshot ...

  8. AngularJS之ng-class（十一）

    前言 本节我们来讲讲指令中的ng-class,通过添加ng-class来生成对应的样式,有时候得根据不同的条件来选择对应的样式,本节我们来看看ng-class的灵活性用法. ng-class使用字符串 ...

  9. Vagrant使用

    常用命令 命令 说明 vagrant up 运行vm vagrant status 查看当前虚拟机运行状态 vagrant suspend 暂停虚拟机 vagrant ssh ssh方式登录虚拟机 v ...

  10. NAS与SAN

    1. NAS(Network Attached Storage,网络附加存储服务器) 简单地说,NAS就是一台File Server,只要将NAS连接上网络,那么在网络上面的其他主机就能够访问NAS上 ...