目前做了一个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. ENode框架Conference案例分析系列之 - 复杂情况的读库更新设计

    问题背景 Conference案例,是一个关于在线创建会议(类似QCon这种全球开发者大会).在线管理会议位置信息.在线预订某个会议的位置的,这样一个系统.具体可以看微软的这个项目的主页:http:/ ...

  2. 完全使用一组 DSL 来操作 Grid 控件

    最近尝试了一下将 XtraGrid 的初始化工作封装成内部 DSL,例如一个普通的基础数据的增删改查操作的代码会像下面这样: public partial class UserForm : XtraF ...

  3. logistic回归

    logistic回归 回归就是对已知公式的未知参数进行估计.比如已知公式是$y = a*x + b$,未知参数是a和b,利用多真实的(x,y)训练数据对a和b的取值去自动估计.估计的方法是在给定训练样 ...

  4. 激活jws.mono的图像处理

    不得不说,jws.mono真的给我们带来了很大的便利,它免除了我们编译Linux.NET所带来的烦恼,节省了我们的时间.但是金无足赤人无完人,虽然jws.mono已经大致能够提供与我们自行编译相同的效 ...

  5. 优化MySchool数据库设计之【巅峰对决】

    优化MySchool数据库设计 之独孤九剑 船舶停靠在港湾是很安全的,但这不是造船的目的 By:北大青鸟五道口原玉明老师 1.学习方法: 01.找一本好书 初始阶段不适合,可以放到第二个阶段,看到知识 ...

  6. Module-Zero之版本管理

    返回<Module Zero学习目录> 概要介绍 版本实体 版本管理者 概要介绍 绝大多数的SaaS(多租户)应用都有多个具有不同特征的版本(包).因此,他们可以给租户(即客户)提供不同的 ...

  7. 页面静态化技术Freemarker技术的介绍及使用实例.

    一.FreeMarker简介 1.动态网页和静态网页差异 在进入主题之前我先介绍一下什么是动态网页,动态网页是指跟静态网页相对应的一种网页编程技术.静态网页,随着HTML代码的生成,页面的内容和显示效 ...

  8. 谈谈php里的DAO Model AR

    这次要谈的3个关键字:DAO.Model.AR,是我们在做web应用时常见的几个概念,也被称作设计模式(design pattern),先简单看看它们的全拼和中文: DAO:Data Access O ...

  9. jQuery第一篇 （帅哥）

      同学心目中的jQuery: 简单易用,功能强大,对移动端来说,体积稍大. 1.1 回顾前面学到的js我们遇到的一些痛点 window.onload 事件有个事件覆盖的问题,我们只能写一个 代码容错 ...

  10. Sql Server系列：数据表操作

    表是用来存储数据和操作数据的逻辑结构,用来组织和存储数据,关系数据库中的所有数据都表现为表的形式,数据表由行和列组成.SQL Server中的数据表分为临时表和永久表,临时表存储在tempdb系统数据 ...