EasyUI学习每天一章之第一章 --EasyUI入门
EasyUI入门
EasyUI的特点
-
基于jQuery用户界面插件的集合
-
为一些当前用于交互的js应用提供必要的功能
-
EasyUI支持两种渲染方式分别为JavaScript方式（如：$('#p').panel({...})）和html标记方式（如:class="easyui-panel"）
-
支持HTML5（通过data-options属性）
-
开发产品时可节省时间和资源
-
简单，但很强大
-
支持扩展，可根据自己的需求扩展控件
-
目前各项不足正以版本递增的方式不断完善
-
EasyUI目录结构图说明表
|
名称 |
说明 |
|
demo |
提供使用 Ext JS技术实现的实例 |
|
docs |
API 帮助文档 |
|
extension |
扩展内容 |
|
locale |
本地化JavaScript文件 |
|
plugins |
插件 |
|
src |
EasyUI源码 |
|
themes |
主题 |
|
jquery.easyui.min.js |
EasyUI的javascript文件 |
|
jquery.min.js |
Jquery的javascript文件 |
- 第三列是locale目录下内容，里面是本地化js文件，有常见的各个语言js，你的界面需要什么样的语言，就导入相应的js文件，比如是中文界面，就需要简体中文是easyui-lang-zh_CN.js。
- 第二列显示的是themes目录下内容，每一个目录都是一个主题，在easyui1.3下只有两个主题，default主题、gray主题。我们可以选择不同的主题，选择不同的主题后，所使用的EasyUI组件都会换一组新的外观。
- EasyUI应用需要在页面中引人EasyUI 的样式及 EasyUI库文件，样式文件为easyui.css，在themes目录下有很多子目录，这些目录下都有easyui.css，你只要导入其中一个就可以了，导入不同目录下的easyui.css,这时界面上的所有EasyUI组件都会换一种主题显示。
- 需要导入icon.css,这个CSS文件中指定了图标样式，常见的图标设置都在这个文件中，如果需要增加新的图标样式也最好在这个文件中设置。EasyUI 的JS库文件主要包含jquery.easyui.min.js。在导入这个文件之前必须导入jquery.min.js，因为Easyui是jQuery的插件。
- 需要导入locale/easyui-lang-zh_CN.js，这个JS文件是中文本地化JS文件。
任务三 第一个easyui
效果:
代码地址: http://jsrun.net/eeqKp/edit
EasyUI创建控件的两种方式
第一种:通过标签创建
任务四：标签创建panel (本案例中使用panel组件进行举例，window组件、tab组件、layout组件、datagrid组件的创建方式同panel组件)
效果图
代码地址: http://jsrun.net/zeqKp/edit
任务4-2：表达训练，请表述任务3代码的含义。
参考说法：创建一个div，设置其class为easyui-panel（EasyUI组件的class格式通常设置为easyui-xxxx），在页面加载时，会创建一个类型为panel的easyUI对象，并根据data-options中属性的值来设置该easyUI对象。
创建一个div 设置id名为dd 里面写上内容 然后 在页面加载时创建类型为dialog的easyUI对象 并设置属性 标题为hello 宽度为400 高度为200 不可以关闭
设置其内内容为 <h1>hello my first jquery</h1>
属性值表格:
|
属性名 |
属性值类型 |
描述 |
|
iconCls |
字符串 |
设置一个16x16图标的CSS类ID显示在面板左上角，这个id在icon.css文件中指定了 |
|
closable |
布尔型 |
定义是否显示关闭按钮 |
|
collapsible |
布尔型 |
定义是否显示可折叠按钮 |
|
minimizable |
布尔型 |
定义是否显示最小化按钮 |
|
maximizable |
布尔型 |
定义是否显示最大化按钮 |
任务4-3 通过标签和easyui代码创建组件
效果图:
代码地址: http://jsrun.net/PeqKp/edit
表单控件
文本框控件
需要在普通的input文本框上加class="easyui-textbox"
<input class="easyui-textbox" required="true" type="text" name="ename" id="ename"></input>
任务5：EasyUI中form表单控件与文本框控件实例
显示效果
代码地址为 ： http://jsrun.net/deqKp/edit
任务6：输入员工编号、工资、奖金，要求数据类型为数值型。
输入中文也可以 不知道是插件的毛病还是写的代码不对
代码地址： http://jsrun.net/FeqKp/edit
numberbox常用到的属性表：
|
属性名 |
属性值类型 |
描述 |
默认值 |
|
min |
number |
允许的最小值 |
null |
|
max |
number |
允许的最大值 |
null |
|
precision |
number |
在十进制分隔符之后显示的最大精度。（即小数点后的显示精度） |
0 |
|
groupSeparator |
string |
使用哪一种字符分割整数组，以显示成千上万的数据。(比如：99,999,999.00中的','就是该分隔符设置。) |
|
|
decimalSeparator |
string |
使用哪一种十进制字符分隔数字的整数和小数部分 |
|
|
prefix |
string |
前缀字符 |
|
|
required |
boolean |
字段是否必填 |
false |
任务7：练习使用日期选择框，并能读出日期框中的内容:
效果图:
代码地址：http://jsrun.net/xeqKp/edit
任务7-1：下拉列表框控件 使用select标签创建combobox
效果图:
代码地址：http://jsrun.net/GeqKp/edit
任务7-2：使用input标签创建combobox
效果图
代码地址： http://jsrun.net/reqKp/edit
任务7-3：使用input和easyui代码创建combobox
效果图:
代码地址: http://jsrun.net/AeqKp/edit
任务7-4：加载指定的json数据创建combobox，并且选中指定的值
效果图:
代码地址:http://jsrun.net/jeqKp/edit
任务8： FileBox(文件框)组件在表单当中表示一个文件上传的字段。它扩展自 textbox (文本框)，大部分的属性、事件和方法都继承自文本框
效果图:
代码地址:http://jsrun.net/BeqKp/edit
验证框控件:
验证框属性:
|
属性名 |
属性值类型 |
描述 |
默认值 |
|
required |
Boolean |
必填字段 |
false |
|
validType |
String,array |
定义字段验证类型，默认支持：email, url,length等，支持自定义。 |
null |
|
missingMessage |
String |
当文本框未填写时出现的提示信息 |
This field is required |
|
invalidMessage |
String |
当文本框的内容被验证为无效时出现的提示 |
null |
|
tipPosition |
String |
定义当文本框内容无效的时候提示消息显示的位置，有效的值有：'left','right' |
right |
|
novalidate |
Boolean |
为true时关闭验证功能 |
false |
任务9：测试验证框的使用
效果图:
代码地址:http://jsrun.net/ueqKp/edit
说明：
- validType指定验证规则，已经定义好的验证规则有：email、url、length等
- email：匹配E-Mail的正则表达式规则。
- length[0,100]：允许在x到x之间个字符。
form 表单控件
form（表单控件）的属性 ：
| 属性名 |
属性值类型 |
描述 |
默认值 |
|
novalidate |
boolean |
是否验证表单的字段 |
false |
|
ajax |
boolean |
是否使用ajax提交表单 |
true |
|
queryParams |
object |
当表单被提交到服务器的时候增加的额外参数列表 |
{} |
|
url |
string |
提交表单动作的URL地址 |
null |
form（表单控件）的方法：
|
方法名 |
参数 |
描述 |
|
submit |
options |
执行提交操作，该选项的参数是一个对象，它包含以下属性： |
|
load |
data |
读取记录填充到表单中。数据参数可以是一个字符串或一个对象类型，如果是字符串则作为远程URL，否则作为本地记录。 |
|
clear |
none |
清除表单数据 |
|
reset |
none |
重置表单数据 |
|
validate |
none |
做表单字段验证，当所有字段都有效的时候返回true。该方法使用validatebox(验证框)插件 |
|
enableValidation |
none |
启用验证 |
|
disableValidation |
none |
禁用验证 |
任务10：利用easyUI控件，完成如下图所示的功能
代码地址：http://jsrun.net/MeqKp/edit
任务11：用所学知识写一个用户新增功能。使用EasyUI控件构建前端：用户名（文本框）、密码（文本框）、Email（文本框）、手机号（数值框）、受雇日期（日期框）、语言（下拉列表框）、备注（文本框）、上传文件（文件框），并用验证控件（validate）验证提交表单；调用我们的数据接口，并根据数据接口的反馈进行 提示。
运行效果如下图
代码地址：http://jsrun.net/SeqKp/edit （数据库密钥请自行更换）
xmind总结地址：
https://github.com/mysBanana/easyui/blob/master/easyui%E5%AD%A6%E4%B9%A0/%E7%AC%AC%E4%B8%80%E7%AB%A0/EasyUI%E5%85%A5%E9%97%A8.xmind
