EaeyUI

基础　　定义　　一个轻量级的JavaScript框架

　　　　基本用法　　$(function(){代码})　　相当于window.load()（当窗口加载完毕后触发）

　　　　　　　　　　选择器是jQuery的根基　　通过选择器选中元素之后再操作

　　　　　　　　　　　　　　　　　　　　　　 调用方法要使用 function(){方法的代码}

选择器　　基本选择器　　id选择器　　$(“#id”)

　　　　　　　　　　　　　　　　　　根据id匹配一个元素，返回单个元素组成的集合

　　　　　　　　　　　　标签选择器　　$(“标签”)

　　　　　　　　　　　　　　　　　　根据标签名匹配元素，返回匹配该标签的元素的集合

　　　　　　　　　　　　类选择器　　$(“.类名”)

　　　　　　　　　　　　　　　　　　根据class匹配元素，返回匹配该class的元素的集合

　　　　　层次选择器　　根据元素之间的层次关系获取相关的元素

　　　　　　　　　　　　子元素

　　　　　　　　　　　　相邻元素

　　　　　　　　　　　　兄弟元素

　　　　　　　　　　　　后代元素

　　　　　过滤选择器　　基本过滤器　　：first　　首个元素

　　　　　　　　　　　　　　　　　　　：last　　最后一个元素

　　　　　　　　　　　　　　　　　　　：even　　索引是偶数的元素

　　　　　　　　　　　　　　　　　　　：odd　　索引是奇数的元素

　　　　　　　　　　　　内容过滤器　　通过子元素和文本内容过滤

　　　　　　　　　　　　可见性过滤器　　根据元素的可见和不可见状态过滤

　　　　　　　　　　　　属性过滤器　　通过元素的属性过滤

　　　　　　　　　　　　子元素过滤器

 

　　　　　　　　　　　　表单过滤器

　　　　　　　　　　　　表单对象属性过滤器

对象转换　　Dom对象转成jQuery对象　　$(Dom对象)

　　　　　　jQuery对象转成Dom对象　　jQuery对象是数组对象　　jQuery对象[索引]

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　jQuery对象.get[索引]

配置　　jQuery的js包　　<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script>

　　　　主css文件　　<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css">   

　　　　图标css文件　　<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css">

　　　　easyui的js包　　<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script> 

　　　　本地语言的js包　　<script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>

消息框　　弹出　　$.messager.alert(“aaa”，“bbb”，“error”，function(){代码} )　　警告消息框显示警告窗口　　

　　　　　　　　　　　参数：title：在头部面板显示的标题文本。

　　　　　　　　　　　　　　msg：显示的消息文本。

　　　　　　　　　　　　　　icon：显示的图标图像。可用值有：error（错误）,question（问题）,info（信息）,warning（警告）。

　　　　　　　　　　　　　　fn: 在窗口关闭的时候触发该回调函数。　　function(){代码}

　　　　　确认　　$.messager.confirm　　确定返回true，取消返回false

　　　　　　　　　参数：标题

　　　　　　　　　　　　内容

　　　　　　　　　　　　回调函数function（r）{if（r）{确定之后执行的代码}}

　　　　　输入框　　$.messager.prompt　　确定返回输入的内容，取消无任何返回

　　　　　　　　　　参数：标题

　　　　　　　　　　　　　内容

　　　　　　　　　　　　　回调函数function（val）{if（val）{输入不为空执行的代码}}

　　　　　消息框　　$.messager.show

　　　　　　　　　　参数：showType：定义将如何显示该消息。可用值有：null,slide,fade,show。默认：slide。

　　　　　　　　　　showSpeed：定义窗口显示的过度时间。默认：600毫秒。　　

　　　　　　　　　　width：定义消息窗口的宽度。默认：250px。

　　　　　　　　　　height：定义消息窗口的高度。默认：100px。

　　　　　　　　　　title：在头部面板显示的标题文本。

　　　　　　　　　　msg：显示的消息文本。

　　　　　　　　　　style：定义消息窗体的自定义样式。

　　　　　　　　　　timeout：消息窗体将在超时后自动关闭。定义为0，不自动关闭。默认：4000毫秒。  　　　　

　　　　　进度条　　$.messager.progress

　　　　　　　　　　options参数：title：在头部面板显示的标题文本。默认：空。

　　　　　　　　　　　　　　　　　msg：显示的消息文本。默认：空。 

　　　　　　　　　　　　　　　　　text：在进度条上显示的文本。默认：undefined。

　　　　　　　　　　　　　　　　　interval：每次进度更新的间隔时间。默认：300毫秒。

　　　　　　　　　　method参数：bar：获取工具条

　　　　　　　　　　　　　　　　　close：关闭工具条

窗口框 window　　必须有<div id="xx"></div>

　　　创建　　标签方式　　class=“easyui-window”

　　　　　　　　　　　　　title=“标题”

　　　　　　　　　　　　　style=“样式名：样式值；……”

　　　　　　　　　　　　　data-options=“属性名：属性值，……”

　　　　　　　js方式　　$(“#id”).window({属性名：属性值，……})

　　　调用　　$(“#id”).window(“方法名”)

　　　　　　　$(“#id”).window(“方法名”，参数)

对话框窗口 dialog

　　　依赖于　　window  

　　　　　　　　linkbutton　　<a id="ID" href=“#”></a>

　　　　　　　　　　　　　　　text=“按钮文字”

　　　　　　　　　　　　　　　iconCls=“图标”　　

　　　属性　　toolber　　[{text：“按钮文本”，iconCls：“图标”，handler：function(){点击发生的动作}}]

　　　　　　　buttons　　同toolber

布局　　panel　　承载其他内容的容器，构建其他组件的基础

　　　　　　　　  title=“标题”

　　　　　　　　  iconCls=“图标”

　　　　　　　　  fit=“true”　　true是自适应容器，默认是false

　　　　　　　　  closed=“true”　　初始化时是否关闭

　　　　　　　　  href=“url”　　从url读取远程数据并显示

　　　　　　　　  方法　　open　　打开

　　　　　　　　　　　　  close　　关闭

　　　　　　　　　　　　  refresh　　刷新

　　　　layout　　布局方式　　局部　　<div

　　　　　　　　　　　　　　　整体

　　　　　　　　　　　　　　　嵌套

　　　　　　　　　属性（区域面板）　　region　　定义布局面板位置，可用的值有：north, south, east, west, center

　　　　　　　　　　　　　　　　　　　split　　为true时用户可以通过分割栏改变面板大小

　　　　　　　　　　　　　　　　　　　href　　用于读取远程站点数据的URL链接

　　　　accordion　　定义方式　　<div class=“easyui-accordion”><div></div></div>

　　　　　　　　　　　容器属性　　fit=“true/false”　　是否自适应

　　　　　　　　　　　　　　　　　selected=初始时默认展开的索引

　　　　　　　　　　　面板属性　　selected=“true”　　当前面板是否展开，会覆盖容器的展开属性

　　　　　　　　　　　方法　　add　　添加面板

　　　　　　　　　　　　　　　remove　　移除面板

　　　　tabs　　定义方式　　<div class=“easyui-accordion”><div></div></div>

　　　　　　　　容器属性　　fit=“true/false”　　是否自适应

　　　　　　　　　　　　　　selected=初始时默认展开的索引

　　　　　　　　面板属性　　selected=“true”　　当前面板是否展开，会覆盖容器的展开属性

　　　　　　　　　　　　　　closable=“true”　　是否显示关闭按钮

　　　　　　　　方法　　add　　添加面板

　　　　　　　　　　　　remove　　移除面板

　　　　　　　　　　　　exists　　判断是否存在标签

表单　　validatebox　　基础的验证组件

　　　　　　　　　　　　属性　　required=“true/false”　　是否必填

　　　　　　　　　　　　　　　　validType　　字段验证类型，可同时设置多个类型

　　　　textbos　　文本框

　　　　　　　　　　属性　　prompt=“框内提示”

　　　　　　　　　　　　　　type=“text/password”　　显示的类型，只有文本和密码两种

　　　　　　　　　　　　　　editable=“true/false”　　是否可以直接编辑

　　　　　　　　　　　　　　readonly=“true/false”　　是否只读

　　　　　　　　　　　　　　buttonText=“按钮文本”

　　　　numberbox　　属性　　min=“最小值”

　　　　　　　　　　　　　　　　max=“最大值”

　　　　　　　　　　　　　　　　precision=“小数点后精度”　　默认是精确到个位，自动四舍五入

　　　　datebox　　属性　　readonly=“true”　　不能更改日历

　　　　　　　　　　　　　　editable=“false”　　不能手动编辑日期，只能点击日历更改

　　　　datetimebox　　日期和时间框

　　　　　　　　　　　　属性　　showSeconds=“true/false”　　是否显示秒数

　　　　combobox　　下拉列表框

　　　　　　　　　　　属性　　url=“远程加载数据的地址”

　　　　　　　　　　　　　　　valueField=“基础数据值名称”

　　　　　　　　　　　　　　　textField=“基础数据显示名称”

　　　　　　　　　　　　　　　editable=“true/false”　　默认允许编辑

　　　　　　　　　　　方法　　clear　　清除显示内容

　　　　　　　　　　　　　　　reload　　重新加载列表项，可以用新的url重写原始的

　　　　　　　　　　　事件　　onSelect　　选中时触发

　　　　form　　方法　　submit　　url　　提交的地址

　　　　　　　　　　　　　　　　　　onSelect　　提交前触发的回调函数，如果返回false阻止表单提交

　　　　　　　　　　　　　　　　　　siccess　　成功提交后的回调函数，接收响应数据。是典型的json相应数据格式

　　　　　　　　　　　　　　　　　　　　　　　 {‘success’：true，‘message’：‘相应内容’}　　使用eval(“（”+json+“）”) 解析json数据

　　　　　　　　　　　　validate　　返回表单内的验证组件验证是否通过

表格　　datagrid　　准备　　<table id=""></table>　　

　　　　　　　　　　　　　　属性　　datagrid　　columns　　列的定义的数组

　　　　　　　　　　　　　　　　　　　　　　　　url　　访问远程数据的地址{“total”：总记录条数，row：[{行对象}]}

　　　　　　　　　　　　　　　　　　　　　　　　toolbar　　工具栏

　　　　　　　　　　　　　　　　　　　　　　　　pagination=“true/false”　　是否显示分页栏

　　　　　　　　　　　　　　　　　　列　　field　　列对应的属性名

　　　　　　　　　　　　　　　　　　　　　title　　表头标题

　　　　　　　　　　　　　　　　　　　　　checkbox=“true/false”　　是否是复选框列，必须同时设置field