EasyUI常用组件（基础）
---------------------------------------------------------------------------------------------------------------
[版权申明：本文系作者原创，转载请注明出处]
文章出处：http://blog.csdn.net/sdksdk0/article/details/51914553
作者：朱培 ID：sdksdk0
---------------------------------------------------------------------------------------------------------------
本文主要内容是介绍EasyUI的一些常用组件的使用，都是一些非常基础的知识，适合入门者学习，主要包括Base（基础）、Layout(布局）、菜单和按钮、表单、窗口、表格和树等的使用。要求完全掌握这些内容，学会查阅文档，了解开发基本思想。如果想进一步深入学习，可以直接去官网进行学习，查阅文档等http://www.jeasyui.com/。
一、简介
EasyUI是一种第三方组织开发的，开源的，功能强大的，基于jquery的插件库。 主要可以用于web的后台前端。jQuery EasyUI 提供易于使用的组件，它使 Web 开发人员能快速地在流行的 jQuery 核心和 HTML5 上建立程序页面。 这里介绍的都是一些基本组件，项目中需要将其装配起来，方可构建完整的web页面，EasyUI只是众多前端WEB组件之一。
作用：快速基于现成的组件创建自己的web页面。组件：指已经有第三方写好的，直接可以使用的功能界面，例如：form,layout,tree等。
二、开发步骤
2、在myeclipse中新建一个web工程
3、在WebRoot目录下创建js和themes目录，导入官方文件
4、新建一个helloword.html的网页，并引入下列文件：
文件引入的顺序不要错，那么到目前为止，开发的准备工作就已经完成了。
三、Base组件的使用
3.1 Pagination（分页）
使用$.fn.pagination.defaults重写默认值对象
.分页组件是一个比较常用的组件之一，我们可以有两种使用方式，一种是直接在标签上面添加相应的属性，另一种是通过js进行操作。静态方式创建如下：
四、Layout组件的使用
4.1 layout的使用
布局是最常用的组件了，官方提供的是拥有5个布局方向的：北、南、东、西、中.
基本的使用方式如下：
我们可以为其添加js的属性：
对于布局来说，当然也还是可以进行嵌套处理的，我们可以摘除掉我们不需要的部分，然后将需要的部分进行再次组装。
4.2 面板的使用
easyui入门
panel content.
panel content.
4.3 Accordion（分类）
使用$.fn.accordion.defaults重写默认值对象。
分类空间允许用户使用多面板，但在同一时间只会显示一个。每个面板都内建支持展开和折叠功能。点击一个面板的标题将会展开或折叠面板主体。面板内容可以通过指定的'href'属性使用ajax方式读取面板内容。用户可以定义一个被默认选中的面板，如果未指定，那么第一个面板就是默认的。
朝阳区
衡阳市
朝阳区
衡阳市
长沙市
4.4 Tabs（选项卡）
使用$.fn.tabs.defaults重写默认值对象。
选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。
五、Menu 和Button组件的使用
LinkButton（按钮）
使用$.fn.linkbutton.defaults重写默认值对象。
按钮组件使用超链接按钮创建。它使用一个普通的标签进行展示。它可以同时显示一个图标和文本,或只有图标或文字。按钮的宽度可以动态和折叠/展开以适应它的文本标签。
增加部门
查找部门
修改部门
删除部门
六、Form组件的使用
6.1 ValidateBox（验证框）
使用$.fn.validatebox.defaults重写默认值对象。
validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效。如果用户输入了无效的值，它将会更改输入框的背景颜色，并且显示警告图标和提示信息。该验证框可以结合form(表单)插件并防止表单重复提交。
姓名:
邮箱:
密码:
6.2 ComboBox（下拉列表框）
扩展自$.fn.combo.defaults。使用$.fn.combobox.defaults重写默认值对象。
下拉列表框显示一个可编辑文本框和下拉式列表，用户可以选择一个值或多个值。用户可以直接输入文本到列表顶部或选择一个或多个当前列表中的值。
静态方法创建：
动态方法创建：
6.3 DateBox（日期输入框）
扩展自$.fn.combo.defaults。使用$.fn.datebox.defaults重写默认值对象。
日期输入框结合了一个可编辑的文本框控件和允许用户选择日期的下拉日历面板控件。选择的日期会自动转变为一个有效的日期然后填充到文本框中。选定的日期也可以被格式化为预定格式。
日期：
6.4 Slider（滑动条）
使用$.fn.slider.defaults重写默认值对象。
滑动条允许用户从一个有限的范围内选择一个数值。当滑块控件沿着轨道移动的时候，将会显示一个提示来表示当前值。用户可以通过设置其属性自定义滑块。
学生成绩:
6.5 NumberSpinner（数字微调）
数字微调控件的创建是基于微调控件和数值输入框控件的。他可以转换输入的值，比如：数值、百分比、货币等。它也允许使用上/下微调按钮调整到用户的期望值。
商品数量：
你一共买了1件商品
七、窗口组件的使用
7.1 Window（窗口）
扩展自$.fn.panel.defaults。使用$.fn.window.defaults重写默认值对象。
窗口控件是一个浮动和可拖拽的面板可以用作应用程序窗口。默认情况下,窗口可以移动,调整大小和关闭。它的内容也可以被定义为静态html或要么通过ajax动态加载。
静态方法创建：
Window Content
7.2 Dialog（对话框窗口）
7.3 Messager（消息窗口）
八、表格和树组件的使用
使用$.fn.tree.defaults重写默认值对象。
树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。
-
第一章
-
第一节
-
第一条
-
第二条
-
第二节
-
第二章
我们还可以引入外部文件，使用json格式的文件来添加到这个tree中。
json格式为：
[
{
"id":1,
"text":"广东",
"state":"closed",
"children":[
{
"id":11,
"text":"广州" ,
"state":"closed",
"children":[
{
"id":111,
"text":"天河"
},
{
"id":112,
"text":"越秀"
}
]
},
{
"id":12,
"text":"深圳"
}
]
},
{
"id":2,
"text":"湖南"
}
] 
总结：任何一门技术的学习，还是要有学会查阅文档的基本能力，要学会举一反三，我前面分享的内容也都是非常简单的一些例子，有的是从官方文档中进行改装，加入了我的一些东西，虽然说着些东西都是非常简单的内容，但是我们还是需要提高警惕，知识面还是要到位的。我深深的知道，比我牛的人很多，比我菜的人也很多，在这个行业中，唯有保持不断学习的态度，不断的吸收知识，才能让自己成长，不要总是去鄙视别人，有些看上去简单的东西实际操作起来还是有一些困难的，人无完人，希望和大家一起成长，共同进步！
源码地址：https://github.com/sdksdk0/EasyUI