jQuery EasyUI学习一

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

1. jQuery EasyUI介绍

1. 创建组件的方式和原理（掌握）
2. 组件三要素（掌握）
3. Panel、LinkButton、上下文菜单;（掌握）

简介

2.1. jQuery EasyUI

是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的JavaScript，也不需要对css样式有深入的了解，开发者只有需要了解一些简单的html标签。

2.2. 官方网站

http://www.jeasyui.com/

中国人开发;
个人免费
商业收费 $449

2.3. 运行案例

解压apache-tomcat-easyui.zip

双击apache-tomcat-easyui\bin\stratup.bat

浏览器地址：http://localhost:8888/index.php

(别关心这个后缀，这并不是php,这里是直接下载的easyui的官方网站)。

2.4. EasyUI框架项目结构

2.4.1. 目录截图

2.4.2. 子目录说明

demo :web案例

demo-mobile:移动端案例

locale:本地化（汉化包）

plugins:easyui所有插件

src:插件的源码，如果买了商业授权就有全部源码

themes：主题（皮肤），存放css,img

changlog.txt:升级日志

easyloader.js:内部实现了一个js加载器，根据应用的需求加载js文件，而不是一次性加载所有文件；

jquery.easyui.min.js:所有插件集的压缩文件

jquery.min.js : easyui当前版本兼容的jquery库

搭建easyui环境

3.1. web项目加入easyui的项目文件夹

建议创建webapp的项目文件名，同maven标准命名

最好不要携带easyui的版本号，升级的时候修改就不是很方便了

3.2. 新建一个公共网页common.jsp

引入easyui需要的js和css；可参考jQuery EasyUI 1.5 版 API 中文版.exe/文档说明。

3.3. 把创建的easyui web项目跑起来

去掉这个原来pss的勾

修改tomcat/conf/server.xml，指向easyui1的webapp目录

在启动之前再次确认pss的勾是否取消掉。

创建组件

Easyui可以通过HTML或JavaScript创建组件;

4.1. HTML创建组件的方式

<标签 class=”easyui-组件名”

组件配置title=“xxx”

data-options=”title:’xxx’”></标签>

<!--

使用html创建easyui组件(最简单方式)

class = "easyui-panel" 作用: 告诉easyui需要把div转化为easyui组件.

style 作用: 设置组件宽高和其他样式.

title,iconCls,collapsible 组件属性: 告诉easyui如何创建这个组件.

-->

<div id="p1" class="easyui-panel"

style="width: 400px; height: 400px; padding: 10px; color: red; font-weight: bold; font-size: 18px;" title="我的面板"

iconCls="icon-ok" collapsible="true">

<h1>内容xxxx</h1>

</div>

4.2. panel最终生成的html代码分成3个div

4.3. Js代码创建组件

$(function() {

//获取p2标签,把他变成easyui面板组件.

$("#p2").panel({

//面板属性

title : "你的面板",

iconCls : "icon-no"

});

</script>

</div>

EasyUI创建组件的原理(html创建的方式)

最终还是调用js的方式来创建，$(“#p”).panel({json参数});

5.1. $.parser.parse()

页面加载完毕后

如果$.parser.auto=true;会自动调用$.parser.parse()方法,进行解析

easyui\src\jquery.parser.js

5.2. 支持创建组件的所有名称

1.3.6版本

1.5版本

5.3. 通过选择器获取相关元素对象,然后调用对应的组件方法

5.4. 使用

5.5. DIY简易版本linkbutton

<title>EasyUI 创建组件的原理</title>

/* easyui插件定义 */

$.fn.linkbutton = function(){

//添加类样式

this.addClass("l-btn");

//获取文本

var text = this.text();

//获取iconCls的值

var iconCls = this.attr("iconCls");

this.html('<span class="l-btn-left">'+

'<span class="l-btn-text '+iconCls+' l-btn-icon-left">'+text+'</span>'+

'</span>');

};

$(function(){

//easyui通过html代码创建组建的原理:

1.页面加载完毕

2.获取页面中是以.easyui-{组件名}的选择器元素. {组件名} : easyui中所有组件,比如:panel,linkbutton,tree

3.判断是否有获取到的元素.

4.调用对应的组件方法. (组件 : panel() , linkbutton() )

//var els = $(".easyui-linkbutton");

//els.linkbutton();

$("#mya").linkbutton();

});

</script>

</head>

<body>

<!--

easyui中class有两个用途:

1.用于样式设置.

2.告诉easyui它是一个组件.easyui会通过js对这个div进行包装和添加一些样式

-->

<a id="mya" iconCls="icon-ok">我是一个按钮</a>

</body>

5.6. 是否自动解析EasyUI组件。默认为true;

//页面加载的时候,获取页面中以.easyui-{组件名}的元素,然后调用对应组件方法.

$.parser.auto=false;

</script>

</head>

<body>

<a class="easyui-linkbutton" iconCls="icon-ok">我是一个按钮</a>

</body>

LinkButton组件

Linkbutton组件需要通过<a>进行创建；

$(function(){

$("#editBtn").on("click",function(){

console.debug("编辑...");

});

$("#cutBtn").on("click",function(){

//组件的disabled禁用属性,无法控制事件.

if(!$(this).hasClass("l-btn-disabled")){//判断按钮是否有禁用样式.

console.debug("剪切...");

}

});

</script>

<body>

<!--

linkbutton组件:

属性:

iconCls:图标;

disabled:是否禁用;

plain:true时显示简洁效果,其实就是没有背景;

iconAlign:按钮图标位置;可以选值为left,right;默认为:left;

toggle: 是否可以选中效果.

group : 分组,一般与toggle配合使用,达到单选效果;

-->

<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 1</a>

<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g1'">Button 2</a>

<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2'">Button 3</a>

<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2'">Button 4</a>

<a href="#" class="easyui-linkbutton" data-options="toggle:true,group:'g2'">Button 5</a>

</div>

</body>

Panel组件

7.1. panel组件需要通过<div>进行创建

面板作为承载其它内容的容器。这是构建其他组件的基础（比如：layout,tabs,accordion等）。它还提供了折叠、关闭、最大化、最小化和自定义行为。面板可以很容易地嵌入到web页面的任何位置。

<!--

panel面板使用div创建

class="easyui-panel"

panel属性:

title:面板的标题;

style:面板的样式;

iconCls:面板标题的图标;

collapsible:定义是否显示可折叠按钮。

minimizable:定义是否显示最小化按钮。

maximizable:定义是否显示最大化按钮。

closable:定义是否显示关闭按钮。

tools : 自定义工具按钮. 参数是一个选择器,代表选择器获取元素中的内容就是工具按钮.

fit:设置为true的时候面板大小"将自适应父容器"; 简单理解: 父容器多大,我就多大. 使用了该属性后,我们设置宽高将失效.

href: 从URL读取远程数据并且显示到面板; 一般用于加载动态的内容比较有用. (只加载body里面内容) 一旦设置,那么面板标签中内容会被覆盖掉.

closed : 设置面板是否显示.

loadingMessage:加载远程数据的时候在面板内显示一条消息。

-->

<div id="p" class="easyui-panel" title="面板1"

style="width: 300px; height: 200px; padding: 10px;"

iconCls="icon-save"

collapsible="true"

minimizable="false"

maximizable="true"

closable="true"

tools="#tt"

fit="false"

loadingMessage="加载中..."

href="/panel_content.txt"

</div>

</div>

7.2. Panel组件标签html结构

7.2.1. panel面板的组成

面板头<div class="panel-header"> 和面板的内容<div class=”panel-body”>

7.2.2. 组件

</div>

panel组件被创建后:

<div class="panel mypanel"

style="display: block; left: 500px; width: 200px;">

</div>

<div style="width: 198px; height: 171px;" title="" cls="mypanel"

id="p1" class="panel-body">你好吗???</div>

</div>

7.3. 理解：Panel面板并不是每个属性都可以直接使用

.mypanel {

position: absolute;

}

</style>

$(function() {

$("#p1").panel({//创建一个easyui的组件

content : "你好吗???",

left : "500px",

cls : 'mypanel'

});

//以下操作都是错误的,因为控件(a,div)一旦变成了一个easyui组件,我们就不能使用"元素对象"操作方式去操作这个组件,我们应该按照easyui组件操作方式.

//$("#p1").width("800px");//只能操作body

//$("#p1").hide();//只能操作body

//$("#p1").attr("title","呵呵");//只能操作body

});

</script>

</head>

<body>

</body>

组件三要素

Easyui组件都具有属性、方法、事件；

8.1. 属性

8.1.1. 定义：属性描述了组件的更多信息

我们通过配置这些属性，可以让easyui提供不同的显示效果或功能，比如面板组件有title属性，iconCls属性，collapsed属性。

8.1.2. 组件默认属性的值

所有的属性都定义在jQuery.fn.{plugin}.defaults里面。例如，对话框属性定义在jQuery.fn.dialog.defaults里面。

$.fn.{pluginName}.defaults , 作用:如果创建组件的时候,我们没有设置组件的属性,那么就使用默认属性.

//panel面板的默认属性

//console.debug($.fn.panel.defaults);

//修改组件的默认属性

//$.fn.panel.defaults.closable = true;

8.1.3. 属性的作用范围

属性只能在创建（初始化）组件有效，组件创建完毕后，如果对某个属性进行了修改无效；

//以下代码修改只是body的属性而已,并不是面板的属性.

$("#p1").attr("title","你的面板");无效

$("#p1").attr("closed","true");无效

属性编写方式，属性可以写在上面地方

8.2. 使用html定义属性的3种方式

8.2.1. 直接作为标签的自定义属性

<div class="easyui-panel" title="面板标题" closed="true"></div> title,closed都是自定义属性;

8.2.2. 使用html5中规范data属性. data-options

8.2.3. 以上两种混合使用

8.2.4. 以上两种混合的区别

自定义属性的值只能是一个普通的字符串,不能写事件函数名和json数组.

<div id="p1" class="easyui-panel" title="我的面板" closed="false" tools="[

{

iconCls:'icon-add',

handler:function(){alert('add')}

},{

iconCls:'icon-edit',

handler:function(){alert('edit')}

}]">

</div>

data-options属性的值可以写函数名和json数组.

<div id="p1" class="easyui-panel" title="我的面板" closed="false" data-options="tools:[

{

iconCls:'icon-add',

handler:function(){alert('add')}

},{

iconCls:'icon-edit',

handler:function(){alert('edit')}

}]">

</div>

8.2.5. 使用js来创建

使用js创建的时候通过json对象传入

$("#p1").panel({

title:"标题",

closed:false

});

<body>

<a class="easyui-linkbutton" id="changeTitle">修改面板标题</a>

</body>

8.3. 方法

8.3.1. 创建组件的语法

$('selector').plugin(); //没有传递参数

$('selector').plugin({}); //传递json参数

8.3.2. 调用方法的语法

$('selector').plugin('method', [parameter]);

selector 是jQuery对象选择器。

plugin 是插件的名称。

method 是相应插件现有的方法。

parameter 是参数对象，可以是一个对象、字符串等。

8.3.3. 总结

如果写了easyui组件之后传入的第一个参数是字符串,那么就代表执行组件上面某一个方法,

如果不是一个字符串那么就是创建组件，传入的参数是json字符串；如果没有传入参数还是创建组件.

8.3.4. 定义：方法其实就是组件中的某个功能

我们可以调用组件中方法，从而达到我们要求。比如：现在我想隐藏页面中的某个面板。 $(“#mypanel”).panel(“close”);

$("#openBtn").on("click",function(){

//获取要操作面板

var p1 = $("#p1");

//一旦一个元素变成一个组件,请使用组件方法来操作它.

p1.panel("open"); // 调用panel组件的open方法. 千万别乱搞,p1.open();

});

$("#closeBtn").on("click",function(){

$("#p1").panel("close");

});

$("#loadBtn").on("click",function(){

//刷新面板来装载远程数据。如果'href'属性有了新配置，它将重写旧的'href'属性。

$("#p1").panel("refresh","panel_content.txt?hehe=xxx&xxx=aaaa");

});

</script>

<body>

<a id="loadBtn" class="easyui-linkbutton" href="javascript:;">加载远程内容</a>

p1111111111111111

</div>

p2222222222222

</div>

//不能使用一个非组件的对象,调用组件方法.

$("#p2").panel("open");

</script>

$("#p2").panel(); //或者 $("#p2").panel({}); 都代表创建组件,或者就是调用方法.

$("#p2").panel("open");

</script>

8.3.5. 注意点

如果尝试调用一个非组件的组件方法那么直接报错；

创建组件和调用方法的区别

以上代码调用方法

8.4. 事件

8.4.1. 定义：如果组件发生了什么事情

那么它就会通过事件反应给我们。比如：我们点击tree组件的某个节点，那么就会触发onClick事件。

所有的事件（回调函数）也都定义在jQuery.fn.{plugin}.defaults里面。

注意：注册事件不能采用dom传统方式注册，需要通过组件注册；

8.4.2. 树状菜单

$(function() {

//组件注册事件的写法与属性一模一样.

$('#tree').tree({

//属性和事件

animate:true,

onClick: function(node){

alert(node.text); // 在用户点击的时候提示

}

});

</script>

<body>

</body>

8.4.3. 树需要的Json数据的格式

[

{

"id": 1,

"text": "组织机构",

"iconCls": "icon-save",

"children": [{

"id": 11,

"text": "部门管理",

"iconCls": "icon-ok",

"url": "department.action"

},{

"id": 12,

"text": "员工管理",

"iconCls": "icon-ok",

"url": "employee.action"

}]

{

"id": 2,

"text": "系统管理",

"iconCls": "icon-save",

"children": [{

"id": 13,

"text": "权限管理",

"iconCls": "icon-ok",

"url": "permission.action"

},{

"id": 14,

"text": "角色管理",

"iconCls": "icon-ok",

"url": "role.action"

}]

}

]

8.4.4. 因为tree这个树的json格式必须要有输出text的

8.4.5. ssh输出指定text名称的json

@JSON("name=text")

public String getName(){

return name;

}

8.4.6. ssm输出指定名称的json

添加一个兼容代码

public String getText(){//给树或者下拉列表

return name;

}

public String getName(){//显示datagrid

return name;

}

右键菜单(上下文菜单)

$(function() {

//contextmenu : 右键菜单(上下文菜单)

$(document).on('contextmenu', function(event) {

//event 事件对象: 描述了事件发生时所有的信息,包含事件名,事件源,触发事件的坐标.

event.preventDefault();//阻止浏览器默认事件

$("#mm").menu("show", {

left : event.pageX,

top : event.pageY

});

</script>

</head>

<body>

<!--

创建了一个被隐藏的菜单. 菜单需要我们通过js调用显示.

-->

<div>

<div>

</div>

<div data-options="iconCls:'icon-print',disabled:true">Print</div>

</div>

</body>

课程总结

10.1. 重点

怎样使用easyui，LinkButton,Panel,Tree
Tree返回的json数据的格式

10.2. 难点

Html的方式创建组件的原理：本质还是js的方式，理解，面试
区分怎样是创建组件，调用方法
常见异常
TypeError: $.data(...) is undefined

尝试调用一个非组件的组件方法那么直接报错；

<div id="p" 普通的div

style="width: 500px; height: 200px; padding: 10px;" title="My Panel"

iconCls="icon-save" collapsible="true">The panel content</div>

$("#p").panel("close");

课后练习
自学easyui的datagrid

步骤1：把easyui目录拷贝到pss的webapp下面，把今天写的common.jsp里面拷贝里面的内容到datagrid.jsp

步骤2：把pss打一个勾

步骤3：修改tomcat/config/server.xml指向pss/src/main/webapp

步骤4：下面的第一步

案例web路径

http://localhost:8888/demo/main/index.php?plugin=Application&theme=metro&dir=ltr&pitem=

面试题
扩展知识或课外阅读推荐

14.1. 扩展知识

14.2. 课外阅读

怎样才能学会easyui

先看官方案例

http://localhost:8888/demo/main/index.php

正文

1. jQuery EasyUI介绍

相关阅读

从零开始学习C语言二级，c语言二级要学多久

C语言软件学习推荐ipad，c语言必备软件

学习go语言的方法，自学go语言

go语言章节学习，go语言基础

系统学习python爬虫，爬虫python课程

从零开始学习C语言二级，二级c语言课程

redis学习书，redis相关书籍

成都html5学习，成都web前端工程师招聘

目录[+]