目前做了一个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. 如何设计一门语言（十）——正则表达式与领域特定语言（DSL）

    几个月前就一直有博友关心DSL的问题,于是我想一想,我在gac.codeplex.com里面也创建了一些DSL,于是今天就来说一说这个事情. 创建DSL恐怕是很多人第一次设计一门语言的经历,很少有人一 ...

  2. TODO：软件升级的那些事

    TODO:软件升级的那些事 软件升级,指软件从低版本向高版本的更新.由于高版本常常修复低版本的部分BUG,所以经历了软件升级,一般都会比原版本的性能更好,得到优化的效果,用户也能有更好的体验. 最近常 ...

  3. 《Entity Framework 6 Recipes》中文翻译系列 (21) -----第四章 ASP.NET MVC中使用实体框架之在页面中创建查询和使用ASP.NET URL路由过虑

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 4.2. 构建一个搜索查询 搜索数据是几乎所有应用的一个基本功能.它一般是动态的,因 ...

  4. Win8换成Win7系统问题小结（修改主板BIOS方法）

    问题描述: 笔记本电脑W8系统使用不习惯,想要换成W7系统,但不管是用光盘安装亦或是用U盘安装,在设置系统启动项的时候,选择从光盘启动或从U盘启动,但是回车点了之后没反应. 下面就说说问题的原因及解决 ...

  5. VS2012 VS2015 的项目配置模板及其目录

    建立的项目多了的时候 , 就希望能自己配置好一个项目模板,以后建立的项目自动使用这个模板就省事了,不用每次都要改, 每个项目都要改了! 经不懈努力, 终于 发现了 vs2015,vs2012 (我只用 ...

  6. MVC validate.js下使用 ajaxSubmit

    首页定义验证实体 using System.ComponentModel.DataAnnotations; using System.Web.Mvc; namespace MvcApplication ...

  7. SpringMVC常用的注解

    1. @Controller @Controller用于标识控制层主键,负责注册一个bean到spring上下文,bean的ID默认为首字母小写的类名称,用户也可以自定义. 例如: 方式一:  @Co ...

  8. BUG级别定义标准

    通过图片另存为 或者 放大浏览器倍率 查看.

  9. KnockoutJS 3.X API 第七章 其他技术(5) 使用其他事件处理程序

    在大多数情况下,数据绑定属性提供了一种干净和简洁的方式来绑定到视图模型. 然而,事件处理是一个常常会导致详细数据绑定属性的领域,因为匿名函数通常是传递参数的推荐技术. 例如: <a href=& ...

  10. 【原创】开源Math.NET基础数学类库使用(13)C#实现其他随机数生成器

                   本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新  开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...