如鹏网学习笔记（十三）EasyUI
一、EasyUI简介
是一组基于JQuery的UI插件集合
主要作用：为JQuery对象提供新的方法，实现新的功能
可以快速创建出简洁、友好、美观的页面，非常适合做网站后台管理页面（不够漂亮，不适合做前台页面）
官方文档：http://www.jeasyui.com/documentation/index.php
二、panel组件的创建
分两步：
1，引入需要的样式文件和js文件
<link rel="styleSheet" type="text/css" href="easyui的样式地址">
<link rel="styleSheet" type="text/css" href="easyui的图标样式地址">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
2，
方式一,通过设置元素的class属性创建EasyUI控件
示例代码：
<div class="easyui-panel" data-options="title:'面板组件',width:300,height:185">
<p>内容</p>
</div>
方式二，通过js代码创建EasyUI控件
//调用对象的panel属性，利用{key1:value1,key2:value2}键值对的形式进行添加
$(document).ready(function(){
$("#div01").panel({
width:300,
height:185,
title:'面板组件',
context:'内容'
});
});
三、panel的属性
EasyUI组件的属性用来指定组件的样式、结构、内容等
title: 指定panel的标题
width 指定panel的宽度
height 指定panel的高度
fit 设置panel的大小是否适应父容器，值是true或者false //注意是父容器
border 设置panel是都显示边框 值是true或者false
collapsible 设置是否显示可折叠按钮，值是true或者false
closeable 设置是否显示关闭按钮，值是true或者false
href 加载另一个页面的内容 注意：被加载页面的body之外的内容会被忽略！！
注意：很多组件属性的效果也可以使用HTML元素属性或者CSS样式属性的方式来实现
在标签内部写style属性，或者<style></style>写CSS代码
四、panel的事件属性
onBeforeCollapse panel折叠前触发，可以在事件处理函数中阻止折叠
onCollapse panel折叠后触发
注意：panel事件属于组件的属性，使用上也是以键值对的形式
示例代码：
onBeforeCollapse: function () {
var ss = confirm("是否真的要折叠");
if(ss){
}else{
return false;
}
}
五、panel的方法
setTitle 设置标题
open 打开
close 关闭
options 可以查看参数
组件的方法的调用格式：
jQuery对象.panel方法(方法名,参数列表);
示例代码：
$("#btn01").click(function () {
$("#input01").panel("setTitle","新标题")
});
$("#btn02").click(function () {
$("#input01").panel("close");
});
$("#btn03").click(function () {
$("#input01").panel("open");
});
六、EasyUI的图标
使用方法：data-options属性中指定iconCls:'图标名称'
示例代码：
iconCls:'icon-add'
七、链接按钮
EasyUI通常把一个超链接改造成一个按钮的样式使用，称之为linkbutton组件。
注意，是将一个超链接进行改动
特点：圆角、可添加图标、美观、可以添加事件
连接按钮属性：
disable 是否可以点击，值是true或者false，true为不可以被点击
iconCls 可以选择图标
示例代码：
<a class="easyui-linkbutton" data-options="disable:true,iconCls:icon-add">add</a>
注意：不要忘记导入easyui的文件（两个样式属性、jQuery和easyUI）
事件属性：
onClick
示例代码：
$(document).ready(function(){
$("a").linkbutton("disable",true);
});
八、表单控件
EasyUI封装了很多表单控件，主要是提供数据有效性校验功能
validatebox控件 属性：required、validType、invalidMessage、validateOnBlur
textbox控件
datebox控件 属性：formatter
datetimebox控件
form控件 属性：url、success、onSubmit 方法：submit、validate
九、window组件
window组件用来弹出一个子窗口，方便添加、修改等操作
窗口组件基于panel组件
常用属性：href、width、height
十、tabs标签页组件
tabs标签页可以看成由多个panel组成，但同一时间只显示一个panel的内容
tabs组件的主要操作有：创建新tab页、选择tab页
<div id="tt" class="easyui-tabs" data-options="width:600,height:371">
<div title="Tab1">
tab1 content
</div>
<div title="Tab2" data-options="closable:true">
tab2 content
</div>
</div>
属性：fit是否填充父元素
方法：add、exists、select
十一、tree组件
tree组件一般用来做系统导航栏
<ul class="easyui-tree">
<li>
<span>Folder1</span>
<ul>
<li><span>File1</span></li>
<li><span>File2</span></li>
</ul>
</li>
<li>
<span>Folder2</span>
<ul>
<li><span>File4</span></li>
<li><span>File5</span></li>
</ul>
</li>
</ul>
很多时候采用这种方式为节点添加点击动作：
<li>
<span>
<a href="#" onClick="xx()">File1</a>
</span>
</li>
十二、layout布局组件
EasyUI布局组件把页面分为上、下、左、右、中间5个区域，分别称为north、south、west、east、center，每个区域实际上是个panel组件
layout组件可以使用在<body>上也可以使用在<div>上
<body class="easyui-layout">
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
<div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>
<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
<div data-options="region:'center',title:'center title'" style="background:#eee;"></div>
</body>
十三、datagrid数据表格
属性：url、pagination、toolbar、loadFilter
方法：load、reload
<table class="easyui-datagrid"
data-options="title:'用户管理',pagination:true,width:600" >
<thead>
<tr>
<th data-options="field:'email',width:140">登录邮箱</th>
<th data-options="field:'name',width:120">真实姓名</th>
<th data-options="field:'phone',width:120">手机号码</th>
<th data-options="field:'school',width:120">毕业院校</th>
</tr>
</thead>
</table>
每次进行分有人操作，都会向url属性指定的路径发送请求，请求参数有page、rows
十四、结束语
EasyUI的主要内容就是主要组件的用法：panel、linkbutton、form、window、tabs、tree、layout、datagrid等
这些组件基本满足我们对于后台管理系统项目的布局、导航、列表、添加、修改、删除等功能
学习的时候只要学习这些组件就可以了，如果在以后的工作中使用到EasyUI的其他组件，可以参考官方文档
