1.EasyUI简介
1.1.jQuery EasyUI
easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。这里介绍jQuery 版本的
(1)是一组基于jQuery的UI(用户界面)插件集合;
(2)Easyui是属于前端框架
1.2.官方网站
学习网站：
http://www.jeasyui.com/ 英文网
http://www.jeasyui.net/ 中文网
1.3.EasyUI框架项目结构
1.3.1.目录截图
1.3.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库
2.搭建easyui环境
2.1.web项目加入easyui的项目文件夹
建议创建webapp的项目文件名，同maven标准命名
最好不要携带easyui的版本号，升级的时候修改就不是很方便了
2.2.新建一个公共网页common.jsp
引入easyui需要的js和css；可参考jQuery EasyUI 1.5 版 API 中文版.exe/文档说明。
<!-- easyui的样式主题文件 -->
<link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
<!-- easyui的系统图标-->
<link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
<!-- easyui依赖的jquery库(jquery依赖包,必须放在插件库和汉化包的前面)-->
<script type="text/javascript" src="/easyui/jquery.min.js"></script>
<!-- easyui的插件库-->
<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
<!-- easyui的汉化包 -->
<script type="text/javascript" src="/easyui/locale/easyui-lang-zh_CN.js"></script>
3.创建组件
Easyui可以通过HTML或JavaScript创建组件;
3.1.方式一:HTML创建组件的方式
<标签 class=”easyui-组件名”
组件配置title=“xxx”
data-options=”title:’xxx’”></标签>
引用数据类型:Object
<!--
使用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>
引用数据类型:Object
3.2.方式二:Js代码创建组件
引用数据类型:Object
<script type="text/javascript">
$(function() {
//获取p2标签,把他变成easyui面板组件.
$("#p2").panel({
//面板属性
title : "你的面板",
iconCls : "icon-no"
});
});
</script>
<div id="p2" style="width: 400px; height: 400px; padding: 10px; color: red; font-weight: bold; font-size: 18px;">
<h1>是你面板</h1>
</div>
引用数据类型:Object
4.EasyUI创建组件的原理(html创建的方式)
平时写的class="easyui-panel" -最终还是调用js的方式来创建，$(“#p”).panel({json参数});
a)底层通过 $.parser.auto=ture
b)调用parse方法
c)循环页面的组件 找到对应 easyui-panel
d)找到之后，调用 panel({})创建组件
e)panel底层组装html
5.LinkButton组件:链式按钮
Linkbutton组件需要通过<a>进行创建；
<script type="text/javascript">
$(function(){
$("#editBtn").on("click",function(){
console.debug("编辑...");
});
$("#cutBtn").on("click",function(){
//组件的disabled禁用属性,无法控制事件.
if($(this).hasClass("l-btn-disabled")){//判断按钮是否有禁用样式.
console.debug("剪切...");
}
});
});
//$.parser.auto = false;//设置为fsalse后,将不会自动去解析为easyui组建
</script>
<body>
<!--
linkbutton组件:
属性:
iconCls:按钮图标
toggle：为true时允许用户切换其状态是被选中还是未选择,结合group来使用,在一组里面只能选中一个
group：分组
plain：简洁的效果,其实就是没有背景;
iconAlign：按钮图标位置;可以选值为left,right;默认为:left;
data-options：可以设置组件的属性
disabled：禁用样式
-->
<a href="#" class="easyui-linkbutton" iconCls='icon-remove' toggle="true" onclick="alert('删除....');">删除</a>
<a href="#" class="easyui-linkbutton" iconCls='icon-edit' plain="true" iconAlign="right" id="editBtn">编辑</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut',disabled:true" id="cutBtn">剪切</a>
<div style="padding:5px;border:1px solid #ddd;">
<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>
引用数据类型:Object
6.Panel组件:面板组建
6.1.需要通过
进行创建
面板作为承载其它内容的容器。这是构建其他组件的基础（比如：layout,tabs,accordion等）。它还提供了折叠、关闭、最大化、最小化和自定义行为。面板可以很容易地嵌入到web页面的任何位置。
知识点:
1.组件在定义的时候，就把属性设置好，不要加载完 再去修改属性,这个时候只能修改body
2.panel属性:
iconCls:面板标题的图标;
collapsible:定义是否显示可折叠按钮。
minimizable:定义是否显示最小化按钮。
maximizable:定义是否显示最大化按钮。
closable:定义是否显示关闭按钮。
tools : 自定义工具按钮. 参数是一个选择器,代表选择器获取元素中的内容就是工具按钮.
fit:设置为true的时候面板大小"将自适应父容器"; 简单理解: 父容器多大,我就多大. 使用了该属性后,我们设置宽高将失效.
href: 从URL读取远程数据并且显示到面板; 一般用于加载动态的内容比较有用. (只加载body里面内容) 一旦设置,那么面板标签中内容会被覆盖掉.
closed : 设置面板是否显示.
loadingMessage:加载远程数据的时候在面板内显示一条消息。
<script type="text/javascript">
$(function(){
$("#p").panel({ //无效
left:'100px',
cls:'mypanel'
});
//只能修改body的宽度
$("#p").css('width','800px');
//只能隐藏body
$("#p").hide();
//修改body
$("#p").attr('title','yyyyyyyy');
});
</script>
<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"
>
<a class="easyui-linkbutton" iconCls="icon-add">添加</a>
<a class="easyui-linkbutton" iconCls="icon-remove">删除</a>
</div>
<div id="tt">
<a href="javascript:void(0)" class="icon-add" onclick="javascript:alert('add')"></a>
<a href="javascript:void(0)" class="icon-ok" onclick="javascript:alert('ok')"></a>
</div>
6.2.panel面板的组成(标签html结构)
面板头<div class="panel-header"> 和 面板的内容<div class=”panel-body”>
<div id="p1" cls="mypanel" title="哈哈" style="width: 200px;height: 200px;">
</div>
panel组件被创建后:
<div class="panel mypanel"
style="display: block; left: 500px; width: 200px;">
<div class="panel-header" style="width: 188px;">
<div class="panel-title">哈哈</div>
<div class="panel-tool"></div>
</div>
<div style="width: 198px; height: 171px;" title="" cls="mypanel"
id="p1" class="panel-body">你好吗???</div>
</div>
6.3.理解：Panel面板并不是每个属性都可以直接使用
<style type="text/css">
.mypanel {
position: absolute;
}
</style>
<script type="text/javascript">
$(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>
<div id="p1" cls="mypanel" title="哈哈" style="width: 200px; height: 200px;"></div>
</body>
7.组件三要素
Easyui组件都具有属性、方法、事件；
7.1.属性
（一）组件的属性：
描述组件的信息 比如title width height..
（a） 每一个组件创建出来的时候，都有默认属性
$.fn.panel.defaults
console.log($.fn.panel.defaults);
//关闭按钮
$.fn.panel.defaults.closable = true;
一般不会修改组件的默认属性，如果要改，在组件里面自己定义组件的属性
(b) 属性在创建的时候，就应该定义好，不要在创建完才去修改属性
$("#p1").attr("title","你的面板");//无效
$("#p1").attr("closed","true");//无效
<script type="text/javascript">
$(function(){
//调用panel方法创建组件
$("#p2").panel({
title:'测试',
closable:true
});
$("#mybtn").click(function(){
//关闭panel
$("#p2").panel('close');
});
$("#mybtn1").click(function(){
//打开panel
$("#p2").panel('open');
});
$("#mybtn2").click(function(){
//刷新panel
$("#p2").panel('refresh','xxx.txt');
});
//调用非easyui组件 的组件的方法 -- 不OK $("#p3").panel('close');
});
</script>
<body>
</div>-->
<a href="#" id="mybtn" class="easyui-linkbutton" iconCls="icon-remove">关闭</a>
<a href="#" id="mybtn1" class="easyui-linkbutton" iconCls="icon-ok">打开</a>
<a href="#" id="mybtn2" class="easyui-linkbutton" iconCls="icon-reload">刷新</a>
<div id="p2">
sdfsdfsdf
</div>
<div id="p3">
....sdfsdfsdf
</div>
</body>
（二）使用html定义属性的3种方式
(1)直接作为标签的自定义属性
<div class="easyui-panel" title="面板标题" closed="true"></div> title,closed都是自定义属性;
(2) 使用html5中规范data属性. data-options
<div class="easyui-panel" data-options="title:'面板标题',closed:true"></div>
(3) 以上两种混合使用
<div class="easyui-panel" title="面板标题" data-options="closed:true"></div>
(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')}
}]">
p1
</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')}
}]">
p1
</div>
(5) 使用js来创建
使用js创建的时候通过json对象传入
$("#p1").panel({
title:"标题",
closed:false
});
<body>
<div id="p1" class="easyui-panel" title="我的面板" closed="false"> p1 </div>
<a class="easyui-linkbutton" id="changeTitle">修改面板标题</a>
</body>
7.2.方法
（一）创建组件的语法
$('selector').plugin(); //没有传递参数 比如 panel（）
$('selector').plugin({}); //传递json参数
（二）调用方法的语法
$('selector').plugin('method', [parameter]);
selector 是jQuery对象选择器。
plugin 是插件的名称。
method 是相应插件现有的方法。
parameter 是参数对象，可以是一个对象、字符串等。
（三）总结
如果写了easyui组件之后传入的第一个参数是字符串,那么就代表执行组件上面某一个方法,
如果不是一个字符串那么就是创建组件，传入的参数是json字符串；如果没有传入参数还是创建组件.
（四）定义：方法其实就是组件中的某个功能
我们可以调用组件中方法，从而达到我们要求。比如：现在我想隐藏页面中的某个面板。 $(“#mypanel”).panel(“close”);
<script type="text/javascript">$(function(){
$("#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="openBtn" class="easyui-linkbutton" href="javascript:;">打开面板</a>
<a id="closeBtn" class="easyui-linkbutton" href="javascript:;">隐藏面板</a>
<a id="loadBtn" class="easyui-linkbutton" href="javascript:;">加载远程内容</a>
<div id="p1" class="easyui-panel" href="panel_content.txt" title="我的面板" closed="true">
p1111111111111111
</div>
<div id="p2" title="我的面板">
p2222222222222
</div>
<script type="text/javascript">
//不能使用一个非组件的对象,调用组件方法.
$("#p2").panel("open");
</script>
<script type="text/javascript">
$("#p2").panel(); //或者 $("#p2").panel({}); 都代表创建组件,或者就是调用方法.
$("#p2").panel("open");
</script>
（五）注意点
如果尝试调用一个非组件的组件方法那么直接报错；
创建组件和调用方法的区别
以上代码调用方法
7.3.事件
（一）定义：
如果组件发生了什么事情那么它就会通过事件反应给我们。比如：我们点击tree组件的某个节点，那么就会触发onClick事件。
所有的事件（回调函数）也都定义在jQuery.fn.{plugin}.defaults里面。
注意：注册事件不能采用dom传统方式注册，需要通过组件注册；
（二）树状菜单
效果;
<script type="text/javascript">
$(function() {
$('#tt').tree({
method: 'get',
url: 'treedata.json',
onClick: function(node) {
console.log(node.target)
console.log(node.text);
},
//表示event 事件對象 node：节点
onContextMenu: function(e, node) {
e.preventDefault(); //阻止浏览器默认的右键弹出
// 显示快捷菜单
$('#mm').menu('show', {
left: e.pageX,
top: e.pageY
});
}
});
});
</script>
<body>
<ul id="tt" class="easyui-tree">
</ul>
<div id="mm" class="easyui-menu" style="width:120px;">
<div onclick="append()" data-options="iconCls:'icon-add'">追加</div>
<div onclick="remove()" data-options="iconCls:'icon-remove'">移除</div>
</div>
</body>
（三）树需要的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.右键菜单(上下文菜单)
效果: 
<script type="text/javascript">
$(function() {
$(document).on('contextmenu', function(event) {
//阻止浏览器默认的右键事件
event.preventDefault();
//弹出
$("#mm").menu('show', {
left: event.pageX,
top: event.pageY
})
})
});
</script>
<body>
<div id="mm" class="easyui-menu" style="width:120px;">
<div onclick="append()" data-options="iconCls:'icon-add'">追加</div>
<div onclick="remove()" data-options="iconCls:'icon-remove'">移除</div>
</div>
</body>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
