EasyUI ：基于jQuery的UI插件集合

一、在页面中使用easyui必须引入相应的js和css样式文件，文件的引入顺序如下:

创建一个简单的对话框（Dialog）:
1、javascript方式创建：

2、直接在html代码中声明：

二、Easyui还提供了easyloader加载的方式来加载样式表和脚本文件
在以下情况下推荐使用easyloader:
1)、一次性导入 easyui 的核心 min js 和 css 太大
2)、只用到 easyui 的其中几个组件
3)、想使用其中的一个组件，但是又不知道这个组件依赖了那些组件。

easyloader 用来自动加载所需的脚本文件和样式文件，只需要在页面中引用 jquery 脚本 和 easyloader 脚本，easyloader 就会分析模块的依赖关系，先加载依赖项。模块加载好了会调用parse模块来解析页面。把class是easyui开头的标签都转化成 easyui的控件。parse模块是easyloader 第一个加载的模块，他的主要作用就是扫描页面上easyui开头的class标签，然后初始化成easyui控件
easyUI布局（layout）
easyUI布局容器包括东、西、南、北、中五个区域，其中中心面板是必须的，而东、西、南、北这四个面板是可选的，如果布局里面不需要东、西、南、北这四个面板，那么可以把相应的p删掉，另外，如果需要创建复杂的easyUI布局，那么可以通过嵌套东、西、南、北、中五个面板来实现。

*、通过p创建easyui布局

1.使用 data-options 来初始化属性。
data-options是jQuery Easyui 的一个特殊属性。通过这个属性，我们可以将easyui组件的实例化写入到html中，属性，事件都可以写入。例如：

1、Combobox（下拉框）的使用：
 1.1、常用属性：
    panelHeight:auto(或者是一个数值如100px )，
    url:返回JSON数组作为数据源的Servlet路径
    valueField:JSON数组中的对象，作为值的属性
    textField:JSON数组中的对象，作为显示文本的属性
    editable: true/false，表示这个combox中能否从键盘输入值
 1.2、常用方法：
    调用的方式是$(“#<控件id>”).combobox(“<方法名>”)
?   getValue: 获取当前选中项的值
?   getText: 获取当前选中项的文本
?   clear: 清除列表
?   enable/disable: 设置列表的状态为enable/disable
1.3、常用事件：
?   onSelect: 当选中某项的时候触发事件
    onSelect:function(){doSomething();}
?   onBeforeLoad:自定义从URL加载列表的时候，需要传入Servlet的参数名和参数值
    onBeforeLoad:function(param){param.user_id= $(“user”).combobox(“getValue”);}
2、Datagrid（数据网格）的使用：
  2.1、常用属性：
    columns: 数据条目的列，其中：
    field: 数据包含对象的属性名，和具体的值
    title: 列名
    width:列宽
    align:该列的对齐方式
    hidden:true/false –该列是否隐藏
    styler: 该条目的某个值，返回一个css样式，如：
    styler:function(value,row,index){return “color:red”;}
    formatter: 对某列的值进行处理后返回新的值
    formatter:function(value,row,index){return Math.round(value/1024/1024)+’M’;}
    singleSelect:true–表示数据表中的行只允许单选
    fitColumns:true–表示在总宽度允许的条件下，数据表的列宽会根据数据的实际长度自动调整
    nowrap: false –表示当数据条目的某列数据的显示长度大于了该列的列宽，将自动换行避免显示的截断
    url:该数据表的JSON数据来源的Servlet路径
    ?对于分页的datagrid，返回的JSON数据采用JSON map，其中total参数代表数据        的总条数，rows参数代表当前页的数据对象列表
    ?对于需要自定义传入参数的，使用属性：
        queryParams:{param1:param1_value,param2:param2_value}
    ?   pagination:true/false –是否开启分页，显示分页工具条
        pageSize: –默认每页显示的条数
        pageList: –可供选择的每页显示条数的数组，默认为[10,20,30,40,50]
        pageNumber: –设置当前页的页码
        pagePosition:’both’/’top’/’bottom’ –显示分页工具条的位置：同时/顶部/底部
        toolbar:’#tb’ –把id为tb的p作为toolbar
        rownumbers:true–行号显示为一列
 2.2、常用方法：
    调用的方式是$(“#<控件id>”).datagrid(“<方法名>”)
    getSelected–获取第一个选中的行
    getSelections–获取所有选中的行
    reload –重新加载JSON数据
    loadData–加载动态数据，后面跟一个JSON格式的数据{total:,rows:[]}
    Loading/loaded –显示/隐藏loading状态
2.3常用事件：
    onSelect(rowIndex, rowData)
    onLoadSuccess
    onClickRow(rowIndex, rowData)
    onClickCell(rowIndex, rowData)
3、Tree（树）的使用：
    3.1、常用属性:
        id:  Node的ID
        text: Node的显示文本
        state: Node的显示状态，有”open” 或者“closed”
        url: 生成树的JSON数据的来源Servlet路径
        animate: 展开/收起的时候是否有动态效果
        checkbox: 是否显示Checkbox
  3.2、常用方法:
        调用的方式是$(“#<控件id>”).tree(“<方法名>”)
        getSeleted
        expand/collapse/toggle
        reload
        getRoot
        getRoots
        getChildren
  3.3、常用事件:
        onSelect(node)
        onClick(node)
        onDblClick(node)
        onCollapse
        onExpand
        onBeforeLoad(node,param) –设定load数据的时候，传入的参数和参数值
4、几种inputbox的使用：
  4.1、Validatebox：自带验证功能的输入框
    通过设置data-options里的属性来实现验证和提示的功能
    validType:’email‘自动验证数据格式是否符合email地址的格式，验证失败会提示     invalidMessage
    required:true–必填项，如果没有输入，会提示missingMessage
    missingMessage和invalidMessage消息的内容可以自定义不带边框效果
4.2、numberspinner：带上下箭头的数字输入框
    通过设置data-options的min和max属性，可以限制数字的范围
    Value属性可以设置当前的值自带边框效果
    常用事件：
    ?onSpinUp
    ?onSponDown
    ?onChange、
4.3、datebox：日期输入框
    通过包含easyui-lang-zh_CN.js本地化文件来使控件中的文字和日期格式等以中文的方式显示
    事件：
    ?onSelect
Ui控件 accordion，combobox，menu，dialog，tabs，validatebox，datagrid，window，tree