|
|
目录
1 Accordion（可折叠标签） 2
1.1 实例 2
1.2 参数 3
2 DateBox（日期框） 4
2.1 实例 4
2.2 参数 6
2.3 事件 6
2.4 方法 6
3 ComboBox(组合框) 7
3.1 实例 7
3.2 参数 9
3.3 事件 9
3.4 方法 9
4 Dialog（对话框） 10
4.1 实例 10
4.2 参数 12
4.3 事件 12
4.4 方法 12
5 Messager（提示框） 12
5.1 实例 12
5.2 方法 15
5.3 扩展 16
6 NumberBox（数字框） 16
6.1 实例 16
6.2 参数 17
7 ValidateBox（验证框） 18
7.1 实例 18
7.2 参数 20
7.3 方法 20
7.4 扩展 20
8 Pagination（分页） 20
8.1 实例 20
8.2 参数 22
8.3 事件 23
9 Window（窗口） 23
9.1 实例 23
9.2 参数 25
9.3 事件 26
9.4 方法 26
10 Panel（面板） 26
10.1 实例 26
10.2 参数 28
10.3 事件 29
10.4 方法 29
11 Tabs（标签） 30
11.1 实例 30
11.2 参数 32
11.3 事件 32
11.4 方法 33
11.5 标签面板属性 33
12 Tree（树） 33
12.1 实例 33
12.2 参数 36
12.3 事件 37
12.4 方法 37
13 Layout（布局） 38
13.1 实例 38
13.2 参数 39
13.3 方法 39
14 Datagrid（数据表） 39
14.1 实例 39
14.2 参数 43
14.3 Column参数 44
14.4 事件 45
14.5 方法 46
Accordion（可折叠标签）
实例
代码
jQueryEasyUI
$(function(){
$(''#aa'').accordion({
width:400,
height:200,
fit:false
});
});
AccordionforjQuery
AccordionisapartofeasyuiframeworkforjQuery.Itletsyoudefineyouraccordioncomponentonwebpagemoreeasily.
style="padding:10px;">content2
content3
效果图
1.1.3扩展
实例html代码中
此行也可写成
，并且将js代码全部去掉，效果图是一样的。
参数
容器参数
参数名称 参数类型 描述 默认值 width 数字 可折叠标签的宽度。 auto height 数字 可折叠标签的高度。 auto fit 布尔 是否使可折叠标签自动缩放以适应父容器的大小，当为true时width和height参数将失效。 false border 布尔 是否显示边界线。 true 面板参数
可折叠标签面板继承自面板（panel）,许多属性定义在标签里，下面的属性就是如此：
参数名称 参数类型 描述 默认值 selected 布尔 设置可折叠标签中默认展开的标签页 false
DateBox（日期框）
实例
代码
jQueryEasyUI
href="../themes/default/easyui.css">
DateBox
disable();
>disable
enable();
>enable
效果图
参数
属性名 类型 描述 默认值 currentText 字符串 为当前日期按钮显示的文本 Today closeText 字符串 关闭按钮显示的文本 Close disabled 布尔 如果为true则禁用输入框 false required 布尔 定义输入框是否为必添 false missingMessage 字符串 当输入框为空时提示的文本Thisfileisrequest formatter function 格式化日期的函数，这个函数以’date’为参数，并且返回一个字符串 —— parser function 分析字符串的函数，这个函数以’date’为参数并返回一个日期 —— 事件
事件名 参数 描述 onSelect date 当选择一个日期时触发 方法
方法名 参数 描述 destroy none 销毁组件 disable none 禁用输入框. enable none 启用输入框
ComboBox(组合框)
实例
代码
jQueryEasyUI
href="../themes/default/easyui.css">
ComboBox
loadData
setValue
onclick="getValue()">getValuedisable
enable
Options:
==请选择==
苹果
香蕉
鸭梨
西瓜
芒果
combobox_data.json内容：
[{
"id":1,
"text":"text1"
},{
"id":2,
"text":"text2"
},{
"id":3,
"text":"text3",
"selected":true
},{
"id":4,
"text":"text4"
},{
"id":5,
"text":"text5"
}]
效果图
参数
属性名 类型 描述 默认值 width 数字 组件的宽度 auto listWidth 数字 下拉列表的宽度 null listHeight 数字 下拉列表的高度 null valueField 字符串 基础数据值名称绑定到这个组合框 value textField 字符串 基础数据的字段的名称绑定到这个组合框 text editable 布尔 定义是否可以直接到文本域中键入文本 true url 字符串 加载列表数据的远程URL null 事件
事件名 参数 描述 onLoadSuccess none 当远程数据成功加载时触发 onLoadError none 当远程数据加载失败时触发 onSelect record 当用户选择了一个列表项时触发 onChange newValue,oldValue 当文本域字段的值改变时触发 方法
方法名 参数 描述 select value 选择下拉列表中的一项 setValue param 设定指定值到文本域，参数可以是一个字符串，也可以是一个Javascript对象，如果是对象，必须包含两个属性各对应valueField和TextField属性。 getValue none 获取字段值 reload url 请求远程列表数据.
Dialog（对话框）
实例
代码
jQueryEasyUI
href="../themes/default/easyui.css">
Dialog
open1
close1
style="padding:5px;width:400px;height:200px;">
dialogcontent.
dialogcontent.
dialogcontent.
dialogcontent.
dialogcontent.
dialogcontent.
dialogcontent.
dialogcontent.
效果图
参数
属性名 类型 描述 默认值 title 字符串 对话框的标题文本 NewDialog collapsible 布尔 定义是否显示可折叠按钮 false minimizable 布尔 定义是否显示最小化按钮 false maximizable 布尔 定义是否显示最大化按钮 false resizable 布尔 定义对话框是否可编辑大小 false toolbar 数组 对话框上的工具条，每个工具条包括: text,
iconCls,
disabled,
handler
etc.
null buttons 数组 对话框底部的按钮，每个按钮包括: text,
iconCls,
handler
etc.
null 事件
Dialog的事件和窗口(Window)的事件相同Dialog的函数方法和窗口(Window)的相同Messager（提示框）
实例
代码
jQueryEasyUI
href="../themes/default/easyui.css">
Messager
show|
href="#"onclick="show2()">slide|fade
|
alert|
onclick="alert2()">alert(error)|alert(info)
|alert(question)|
onclick="alert5()">alert(warning)
效果图
方法
方法名参数描述$.messager.show options 在屏幕的右下角显示一个消息窗口。这些选项的参数可以是一下的一个配置对象：showType：定义如何将显示消息窗口。可用的值是：null,slide,fade,show。默认值是slide。showSpeed：定义消息窗口完成的时间（以毫秒为单位），默认值600。width：定义消息窗口的宽度。默认值250。height：定义消息窗口的高度。默认值100。msg：定义显示的消息文本。title：定义显示在标题面板显示的标题文本。timeout：如果定义为0，消息窗口将不会关闭，除非用户关闭它。如果定义为非0值，当超时后消息窗口将自动关闭。$.messager.alert title,msg,icon,fn 显示一个警告窗口。参数如下：title：显示在标题面板的标题文本。msg：提示框显示的消息文本。icon：提示框显示的图标。可用的值是：error,question,info,warning.fn：当窗口关闭时触发的回调函数。$.messager.confirm title,msg,fn 显示一个含有确定和取消按钮的确认消息窗口。参数如下：title：显示在标题面板的标题文本。msg：确认消息窗口显示的消息文本。fn(b)：当用户点击按钮后触发的回调函数，如果点击OK则给回调函数传true,如果点击cancel则传false。$.messager.prompt title,msg,fn 显示一个确定和取消按钮的信息提示窗口，提示用户输入一些文本。参数如下：title：显示在标题面板的标题文本。msg：提示窗口显示的消息文本。fn(val)：用户点击按钮后的回调函，参数是用户输入的内容。$.messager.defaults方法自定义alert框的ok按钮和cancel按钮上显示的文字。
名字 类型 描述 默认值 ok 字符串 Ok 按钮上的文本 Ok cancel 字符串 Cancel 按钮上的文本 Cancel
NumberBox（数字框）
实例
代码
jQueryEasyUI
href="../themes/default/easyui.css">
NumberBox
TheBoxcanonlyinputnumber.
disable
enable
效果图
参数
选项名 类型 描述 默认值 min 数字 文本框中可允许的最小值 null max 数字 文本框中可允许的最大值 null precision 数字 最高可精确到小数点后几位 0
ValidateBox（验证框）
实例
代码
jQueryEasyUI
href="../themes/default/easyui.css">
input,textarea{
width:200px;
border:1pxsolid#ccc;
padding:2px;
}
ValidateBoxEmailisValid
Name: |
validType="length[1,3]"> |
Email: |
invalidMessage="email格式错误"validType="email"> |
URL: |
validType="url"> |
testr: |
invalidMessage="至少5个字符"> |
Note: |
missingMessage="必填"style="height:100px;"> |
效果图
参数
属性名 类型 描述 默认值 required 布尔 定义文本域是否为必填项 false validType 字符串 定义字段的验证类型 url（匹配电子邮件正则表达式规则email（匹配URL正则表达式规则length[0,100]（允许字符串长度的范围当然也可以自定义验证规则，重写$.fn.validatebox.defaults.rules可以定义一个校验器的功能和无效的显示消息。例如，要定义一个minLength有效的类型：
$.extend($.fn.validatebox.defaults.rules,{
minLength:{
validator:function(value,param){
returnvalue.length>=param[0];
},
message:''Pleaseenteratleast{0}characters.''
}
});定义好以后我们就可以使用了，下面的代码表示输入的最小长度是5个字符：
Pagination（分页）
实例
代码
jQueryEasyUI
href="../themes/default/easyui.css">
Pagination
onclick="javascript:$(''#pp'').pagination({loading:false})">loaded
href="#"onclick="javascript:$(''#pp'').pagination({loading:true})">loading
style="width:500px;background:#efefef;border:1pxsolid#ccc;">
效果图
参数
属性名 类型 描述 默认值 total 数字 当分页建立时设置记录的总数量 1 pageSize 数字 每一页显示的数量 10 pageNumber 数字 当分页建立时，显示的页数 1 pageList 数组 用户可以修改每一页的大小，pageList属性定义了多少种大小可以改变. [10,20,30,50] loading 布尔 定义数据是否正在加载 false buttons 数组 定义自定义按钮，每个按钮包含两个属性：iconCls: 显示背景图像的CSS类
handler: 当一个按钮被点击时的处理函数 null showPageList 布尔 定义是否显示页面列表 true showRefresh 布尔 定义是否显示刷新按钮 true beforePageText 字符串 在输入框组件前显示的标签 Page afterPageText 字符串 在输入框组件后显示的标签 Of{pages} displayMsg 字符串 显示一个页面的信息。 Displaying{from}{to} of {total} items 事件
事件名 参数 描述 onSelectPage pageNumber,pageSize 当用户选择一个新页时触发，回调函数包含两个参数：pageNumber:新页面的页数pageSize:新页面的大小 onBeforeRefresh ageNumber,pageSize 刷刷
"http://www.w3.org/TR/html4/loose.dtd">
Inserttitlehere
href="../themes/default/easyui.css">
Window
resize
href="javascript:void(0)"onclick="open1()">open
href="javascript:void(0)"onclick="close1()">close
style="width:500px;height:200px;padding:5px;background:#fafafa;">
style="padding:10px;background:#fff;border:1pxsolid#ccc;">
jQueryEasyUIframeworkhelpyoubuildyourwebpageeasily.
clickheretopopupanotherwindow.
style="text-align:right;height:30px;line-height:30px;">
class="easyui-linkbutton"icon="icon-ok"href="javascript:void(0)"
onclick="resize()">Ok
icon="icon-cancel"href="javascript:void(0)"onclick="resize()">Cancel
title="TestWindow"style="width:300px;height:100px;">
| | |
