EasyUI学习笔记3：导航菜单_ accordion和tree插件

摘要 利用accordion和tree插件构建导航菜单，介绍使用js代码创建插件的方法

easyui tree accordion

目录[-]

• 一、引言
• 二、创建导航菜单
• 1. 使用accordion创建折叠面板
• 2．使用tree插件创建树形菜单
• 三、使用JavaScript创建Tree菜单

一、引言

EasyUI提供了easyui-accordion插件能让我们简单实现非常炫酷的折叠面板效果。此外，EasyUI的tree插件可以用来构建多级菜单。我们可以将accordion和tree插件组合起来构建实用的导航菜单。

二、创建导航菜单

1. 使用accordion创建折叠面板

创建折叠面板需指定元素class="easyui-accordion"。accordion容器有几个重要的属性：

(1) fit属性，值为true/false, 使折叠面板容器的尺寸适应它的父容器

(2) border属性，值为true/false，定义是否有边框

(3) animate属性，值为true/false，定义当展开或折叠面板（panel）时是否显示动画效果

用div创建折叠面板（Panel）。面板重要属性：

(1) title定义面板名称

(2) selected属性设置为 true 就展开面板（panel）

(3) collapsible属性设置是否显示可折叠按钮，默认为true

2．使用tree插件创建树形菜单

树（tree）定义在 <ul> 元素中。该标记可定义叶节点和子节点。

在网页中编写语句。

<ul id="tree" class="easyui-tree" data-options="lines:true">

其中，lines属性定义是否显示树线条。默认不显示。

示例如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

… //此处省略代码，见笔记2 < div  id = "nav"  data-options = "region:'west',split:true"  style = "width:200px"  title = "导航" >    < div  id = "navMenu"  class = "easyui-accordion"  data-options = "fit:true,border:false" >      < div  title = "系统管理"  data-options = "iconCls:'icon-save'"  style = "overflow:auto;padding:10px;" >      </ div >     < div  title = "基础数据"  data-options = "iconCls:'icon-reload',selected:true"  style = "padding:10px;" >        < ul  id = "tree"  class = "easyui-tree"  data-options = "lines:true" >       < li >< span >产品管理</ span >          < ul >          < li >< a  href = "#" >产品类别</ a ></ li >          < li >< a  href = "#" >产品</ a ></ li >          </ ul >       </ li >           < li >< a  href = "#" >客户</ a ></ li >         </ ul >        </ div >          </ div > </ div > … //此处省略代码，见笔记2

运行tomcat，在浏览器中输入localhost:8080/easyui/index.html。显示如下界面：

三、使用JavaScript创建Tree菜单

Easyui的很多插件多可以使用两种方法创建。第1种方式是使用页面标签创建，通过标签来定义各种属性。第2种方式是通过javaccript来创建。此外，我们也可以结合两种方式来使用。

上节我们使用第1种方式创建tree菜单，接下来使用第2种方式。

依旧需要在网页中留下一句语句：

<ul id="tree" class="easyui-tree" data-options="lines:true"></ul>

注意，此处<ul></ul>之间是没有内容的。tree节点值是通过js代码来加载的。

接下来我们要在<script type="text/javascript"></script>编写js代码。通常建议把该段代码放在网页最后面，当然也可以把它单独写入**.js文件中，然后引入该js文件。Js代码如下：

?

1 2 3 4 5 6 7

$( function  () {           /*树形菜单点击处理*/           $( "#tree" ).tree({                url :  'treeData.json' ,                lines :  true           }); });

照例进行解释：

$(function ()}); ：jquery内置入口函数，表示网页加载完毕后要执行的意思。$表示JQuery对象。

注意$("#tree")中的“tree”必须与网页标签中的id相同，即<ul id="tree" data-options="lines:true">。

.tree({}); 中可定义各种属性和事件。

tree插件有一个url属性用来获取远程数据的 URL。该url可以为php网页的路径，也可以是J2EE体系的action路径。也可以设为本地的json文件。如果是action，也必须是返回json格式的数据。因此，开发时就需要将对象或集合转换为json数据。那什么是json呢？问下度娘：

“JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript的一个子集…….. JSON 数据的书写格式是：名称/值对。”

以下是本笔记需要构建菜单treedata.json文件的内容，该文件放在index.html同目录下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

[{                "id" :1,                "text" : "产品管理" ,                "state" : "closed" ,                "children" :[{                       "id" :11,                       "text" : "产品类别" ,                       "attributes" :{                       "url" : ""                       }                },{                       "id" :12,                       "text" : "产品" ,                       "attributes" :{                       "url" : ""                       }                }]         },{                "id" :2,                "text" : "客户" ,                "attributes" :{                "url" : ""         } }]

也许你要问，为什么要排成这样的格式。答案是：tree要求的，排成这样我才认得：）

至于json的具体属性值如state、attributes等在下篇笔记中再解释。

Java对象或集合转换成json需要fastjson等工具，如何使用则在更后面的笔记介绍。

运行tomcat，在浏览器中输入localhost:8080/easyui/index.html。得到上节同样的界面。

也许你还会问，既然是一样的，那为什么这么麻烦用js呢。相信你肯定会发现，这些菜单点击了是没有反应，是因为暂时还没有为菜单加上事件，用js代码就可以很方便加上各种事件。下篇将介绍点击菜单打开一个tab窗口页。

反正代码也不长，为了便于查看，最后附上index.html完整的代码

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

< html > < head >       < meta  charset = "UTF-8" >       < title >easyui学习笔记</ title >       < link  id = "easyuiTheme"  rel = "stylesheet"  type = "text/css"  href = "jslib/easyui1.3.5/themes/default/easyui.css" />       < link  rel = "stylesheet"  type = "text/css"  href = "jslib/easyui1.3.5/themes/icon.css" />       < script  type = "text/javascript"  src = "jslib/easyui1.3.5/jquery.min.js" ></ script >       < script  type = "text/javascript"  src = "jslib/easyui1.3.5/jquery.easyui.min.js" ></ script >       < script  type = "text/javascript"  src = "jslib/easyui1.3.5/locale/easyui-lang-zh_CN.js"  charset = "utf-8" ></ script >       < script  type = "text/javascript" >       $(function () {           /*树形菜单点击处理*/           $("#tree").tree({                url : 'treeData.json',                lines : true           });      }); </ script > </ head > < body >       < div  id = "head"  data-options = "region:'north'"  style = "height:60px;" >           < div  style = "height:30px;font-size:30px" >MISP</ div >       </ div >       < div  id = "foot"  data-options = "region:'south'"  style = "height:30px;text-align: center;background: #D2E0F2" >CopyRight:SCAU</ div >       < div  id = "nav"  data-options = "region:'west',split:true"  style = "width:200px"  title = "导航" >                < div  id = "navMenu"  data-options = "fit:true,border:false" >                     < div  title = "系统管理"  data-options = "iconCls:'icon-save'"  style = "overflow:auto;padding:10px;" >                     </ div >                     < div  title = "基础数据"  data-options = "iconCls:'icon-reload',selected:true"  style = "padding:10px;" >                     < ul  id = "tree"  data-options = "lines:true" ></ ul >                         </ div >                    </ div >       </ div >       < div  id = "mainPanle"  data-options = "region:'center'" >           < div  id = "tabs"  data-options = "fit:true, border: false"  >               < div  title = "About"  data-options = "iconCls:'icon-tip'" >                   < iframe  src = "about.html"  style = "border: 0; width: 100%; height: 98%;"  frameBorder = "0" ></ iframe >               </ div >           </ div >           </ div > </ body > </ html >

转自：http://my.oschina.net/ooad/blog/390734