文档章节

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

ooad
 ooad
发布于 2015/03/24 11:29
字数 1432
阅读 864
收藏 1

一、引言

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属性定义是否显示树线条。默认不显示。

示例如下:

… //此处省略代码,见笔记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代码如下:

$(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同目录下:

[{
              "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完整的代码

<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>


© 著作权归作者所有

共有 人打赏支持
ooad
粉丝 93
博文 24
码字总数 17510
作品 0
广州
加载中

评论(6)

lvyingxin
lvyingxin

引用来自“TinGa”的评论

老师,我想问一下json调用产生的中文乱码问题怎么解决,我在网上找不到解决方法。。

我知道啊,你看看是不是没有把json文件保存时把Encoding 选择为UTF-8!
五月_Jelly
五月_Jelly
同上,调用JSON时产生了中文乱码,左边树结构本来显示中文的,却显示中文乱码
TinGa
TinGa
老师,我想问一下json调用产生的中文乱码问题怎么解决,我在网上找不到解决方法。。
TinGa
TinGa
ooad
ooad

引用来自“楷书”的评论

老师,最后那段完整代码的<body>少了class="easyui-layout"吧?
是的,谢谢,回头在电脑上补
楷书
楷书
老师,最后那段完整代码的<body>少了class="easyui-layout"吧?
jQuery EasyUI使用教程之创建可折叠面板

<jQuery EasyUI最新版下载> 在本教程中,你将学习到有关于easyui折叠面板的知识。折叠面板包含了一系列的面板,其中所有的面板标题都是可见的,但只有一个面板的主体内容在某个时间是可见的。...

Miss_Hello_World
2015/11/13
0
0
python递归实现Easyui combotree树

原文链接:http://www.huangdc.com/43 自动化发布系统在选择文件时,使用jQuery EasyUI 创建页面 树形菜单(Tree) 及 后端python 递归实现Easyui combotree 树。这里主要分享2点: 1、linux 中...

dchuang
2014/11/19
0
0
EasyUI的功能树之异步树

最近几个项目都用到了EasyUI这个Jquery框架,目前感觉起来还是很好使的,展示效果很好,帮助文档什么的资料很多,而且互联网上Easy粉很多,大多数拥护和喜爱EasyUI的粉丝们都愿意在网络平台互...

易水寒丶开源
2015/11/17
0
1
easyui 框架Layout插件

1:引入的css: <link rel="stylesheet" href="${rc.contextPath}/static/easyui/themes/custom/easyui.css"> <link rel="stylesheet" href="${rc.contextPath}/static/easyui/themes/icon.css......

赵作文
2015/11/16
0
0
easyui tree异步加载

easyui tree的异步加载实现很简单,easyui的中文API文档中有实例(http://api.btboys.com/easyui/)——创建异步树形菜单,就是在tree node 元素中要有一个id属性,同时还需要state的属性(s...

菠萝啊哈哈
2013/04/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

函数调用约定 (cdecl stdcall)

函数调用约定 (cdecl stdcall) 在 C 语言里,我们通过阅读函数声明,就知道怎么携带参数去调用函数,也能在函数体定义内使用这些参数。但是 CPU 并不直接完成函数调用的传参操作,这需要人为...

傅易
2分钟前
0
0
Python 核心编程 (全)

浅拷贝和深拷贝 1.浅拷贝:是对于一个对象的顶层拷贝,通俗的理解是:拷贝了引用,并没有拷贝内容。相当于把变量里面指向的一个地址给了另一个变量就是浅拷贝,而没有创建一个新的对象,如a=b...

代码打碟手
4分钟前
0
0
mysql5.7 修改datadir

mysql 的默认存储路径为 /var/lib/mysql ,修改后为 /data/mysql 关闭服务 service mysql stop 复制mysql 数据文件到新的目录 cp -rp /var/lib/mysql /data 查看原目录的权限,如果新目...

hotsmile
21分钟前
0
0
证书安装指引之Tomcat 证书部署

Tomcat 证书部署 0 申请证书 1 获取证书 如果申请证书时有填写私钥密码,下载可获得Tomcat文件夹,其中有密钥库 www.domain.com.jks; 如果没有填写私钥密码,证书下载包的Tomcat文件夹中包括...

吴伟祥
25分钟前
0
0
ConcurrentHashMap1.7和1.8的底层不同实现

1.Hashmap和HashTable在线程安全方面的优劣? Hashmap多线程会导致HashMap的Entry链表形成环形数据结构,一旦形成环形数据结构,Entry的next节点永远不为空,就会产生死循环获取Entry。 Hash...

刘祖鹏
41分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部