目前做了一个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. SQL SERVER 2016 AlwaysOn 无域集群+负载均衡搭建与简测

    之前和很多群友聊天发现对2016的无域和负载均衡满心期待,毕竟可以简单搭建而且可以不适用第三方负载均衡器,SQL自己可以负载了.windows2016已经可以下载使用了,那么这回终于可以揭开令人憧憬向 ...

  2. ABP理论学习之授权（Authorization）

    返回总目录 本篇目录 介绍 定义权限 检查权限 使用AbpAuthorize特性 使用IPermissionChecker Razor视图 客户端(Javascript) 权限管理者 介绍 几乎所有的 ...

  3. io.js入门（一）—— 初识io.js

    io.js可以说是彻底从NodeJS里分离出来的一条分支,其事情始末可以查看这篇报道,此处便也不赘言.既然是分支,io.js便也基本兼容NodeJS的各种API,连执行指令也依旧兼容Node的 nod ...

  4. 【安装PHP】如何在openSUSE42.1下编译安装PHP7

    首先推荐一篇文章PHP 7 Release Date Arrived: Will Developers Adopt PHP 7? - PHP Classes blog. 里面说到是否会去使用PHP7, ...

  5. 【腾讯Bugly干货分享】Redex初探与Interdex：Andorid冷启动优化

    本文来自于腾讯bugly开发者社区,未经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/583b9e3ee8992c2c2df6e6ac 导语 早在去年10月份,face ...

  6. iOS开发系列--C语言之基础知识

    概览 当前移动开发的趋势已经势不可挡,这个系列希望浅谈一下个人对IOS开发的一些见解,这个IOS系列计划从几个角度去说IOS开发: C语言 OC基础 IOS开发(iphone/ipad) Swift ...

  7. [.net 面向对象程序设计深入]（0） 开篇

    [.net 面向对象程序设计深入](0)开篇        [.net 面向对象编程基础]和 [.net 面向对象程序设计进阶]在15年底写完了,群里也加进来不少热爱学习的小伙伴.让我深切感受到在这个 ...

  8. MySQL 存储过程和函数

    概述 一提到存储过程可能就会引出另一个话题就是存储过程的优缺点,这里也不做讨论,一般别人问我我就这样回答你觉得它好你就用它.因为mysql中存储过程和函数的语法非常接近所以就放在一起,主要区别就是函数 ...

  9. Can't use Subversion command line client: svn Probably the path to Subversion executable is wrong. Fix it.

    1.最近使用SVN工具时,Checkout出项目到本地后后,然后将其导入到Intellij idea中开发,在提交svn代码的时候,出现这样的错误:Can't use Subversion comma ...

  10. java中集合类中Collection接口中的List接口的常用方法熟悉

    1:集合类,在java语言中的java.util包提供了一些集合类,这些集合类又被称作容器. 2:区别集合类和数组.(1)数组的长度是固定的,集合的长度是可变的.(2)数组是用来存放基本数据类型的,集 ...