jquery_easyui_cn文档
来源:互联网 发布:sketchuppro2018 mac 编辑:程序博客网 时间:2024/05/18 01:18
目 录
1Accordion(可折叠标签) 2
1.1实例 2
1.2参数 3
2DateBox(日期框) 4
2.1实例 4
2.2参数 6
2.3事件 6
2.4方法 6
3ComboBox(组合框) 7
3.1实例 7
3.2参数 9
3.3事件 9
3.4方法 9
4Dialog(对话框) 10
4.1实例 10
4.2参数 12
4.3事件 12
4.4方法 12
5Messager(提示框) 12
5.1实例 12
5.2方法 15
5.3扩展 16
6NumberBox(数字框) 16
6.1实例 16
6.2参数 17
7ValidateBox(验证框) 18
7.1实例 18
7.2参数 20
7.3方法 20
7.4扩展 20
8Pagination(分页) 20
8.1实例 20
8.2参数 22
8.3事件 23
9Window(窗口) 23
9.1实例 23
9.2参数 25
9.3事件 26
9.4方法 26
10Panel(面板) 26
10.1实例 26
10.2参数 28
10.3事件 29
10.4方法 29
11Tabs(标签) 30
11.1实例 30
11.2参数 32
11.3事件 32
11.4方法 33
11.5标签面板属性 33
12Tree(树) 33
12.1实例 33
12.2参数 36
12.3事件 37
12.4方法 37
13Layout(布局) 38
13.1实例 38
13.2参数 39
13.3方法 39
14Datagrid(数据表) 39
14.1实例 39
14.2参数 43
14.3Column参数 44
14.4事件 45
14.5方法 46
1 Accordion(可折叠标签)
1.1 实例
1.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript">
$( function() {
$('#aa').accordion( {
width : 400,
height : 200,
fit : false
});
});
</script>
</head>
<body>
<div id="aa" border="true" >
<div title="Title1" icon="icon-save" style="overflow: auto; padding: 10px;">
<h3 style="color: #0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Title2" icon="icon-reload" selected="true"
style="padding: 10px;">content2</div>
<div title="Title3">content3</div>
</div>
</body>
</html>
1.1.2 效果图
1.1.3 扩展
实例html代码中
<div id="aa" border="true" >
此行也可写成
<div id="aa"class="easyui-accordion"style="width:300px;height:200px;"fit="false"border="false">
,并且将js代码全部去掉,效果图是一样的。
1.2 参数
1.2.1 容器参数
参数名称
参数类型
描述
默认值
width
数字
可折叠标签的宽度。
auto
height
数字
可折叠标签的高度。
auto
fit
布尔
是否使可折叠标签自动缩放以适应父容器的大小,当为true时width和height参数将失效。
false
border
布尔
是否显示边界线。
true
1.2.2 面板参数
可折叠标签面板继承自面板(panel),许多属性定义在<div />标签里,下面的属性就是如此:
参数名称
参数类型
描述
默认值
selected
布尔
设置可折叠标签中默认展开的标签页
false
2 DateBox(日期框)
2.1 实例
2.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function disable() {
$('#dd').datebox('disable');
}
function enable() {
$('#dd').datebox('enable');
}
/*
将Date/String类型,解析为String类型.
传入String类型,则先解析为Date类型
不正确的Date,返回''
如果时间部分为0,则忽略,只返回日期部分.
*/
function formatDate(v) {
if (v instanceof Date) {
var y = v.getFullYear();
var m = v.getMonth() + 1;
var d = v.getDate();
var h = v.getHours();
var i = v.getMinutes();
var s = v.getSeconds();
var ms = v.getMilliseconds();
if (ms > 0)
return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s
+ '.' + ms;
if (h > 0 || i > 0 || s > 0)
return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;
return y + '-' + m + '-' + d;
}
return '';
}
$( function() {
$('#dd').datebox( {
currentText : '今天',
closeText : '关闭',
disabled : false,
required : true,
missingMessage : '必填',
formatter : formatDate
});
});
</script>
</head>
<body>
<h1>DateBox</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick=
disable();
>disable</a>
<a href="#" onclick=
enable();
>enable</a></div>
<input id="dd"></input>
</body>
</html>
2.1.2 效果图
2.2 参数
属性名
类型
描述
默认值
currentText
字符串
为当前日期按钮显示的文本
Today
closeText
字符串
关闭按钮显示的文本
Close
disabled
布尔
如果为true则禁用输入框
false
required
布尔
定义输入框是否为必添
false
missingMessage
字符串
当输入框为空时提示的文本
必填
formatter
function
格式化日期的函数,这个函数以’date’为参数,并且返回一个字符串
——
parser
function
分析字符串的函数,这个函数以’date’为参数并返回一个日期
——
2.3 事件
事件名
参数
描述
onSelect
date
当选择一个日期时触发
2.4 方法
方法名
参数
描述
destroy
none
销毁组件
disable
none
禁用输入框.
enable
none
启用输入框
3 ComboBox(组合框)
3.1 实例
3.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function loadData(){
$('#cc').combobox({
url:'combobox_data.json',//该文件内容在下面
valueField:'id',
textField:'text'
});
}
function setValue(){
$('#cc').combobox('setValue','2');
}
function getValue(){
var val = $('#cc').combobox('getValue');
alert(val);
}
function disable(){
$('#cc').combobox('disable');
}
function enable(){
$('#cc').combobox('enable');
}
$( function() {
$('#cc').combobox( {
width:150,
listWidth:150,
listHeight:100,
//valuefield:'value',
//textField:'text',
//url:'combobox_data.json',
editable:false
});
});
</script>
</head>
<body>
<h1>ComboBox</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="loadData()">loadData</a>
<a href="#" onclick="setValue()">setValue</a> <a href="#"
onclick="getValue()">getValue</a> <a href="#" onclick="disable()">disable</a>
<a href="#" onclick="enable()">enable</a></div>
<span>Options:</span>
<select id="cc" name="dept" required="true">
<option value="">==请选择==</option>
<option value="0">苹果</option>
<option value="1">香蕉</option>
<option value="2">鸭梨</option>
<option value="3">西瓜</option>
<option value="4">芒果</option>
</select>
</body>
</html>
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"
}]
3.1.2 效果图
3.2 参数
属性名
类型
描述
默认值
width
数字
组件的宽度
auto
listWidth
数字
下拉列表的宽度
null
listHeight
数字
下拉列表的高度
null
valueField
字符串
基础数据值名称绑定到这个组合框
value
textField
字符串
基础数据的字段的名称绑定到这个组合框
text
editable
布尔
定义是否可以直接到文本域中键入文本
true
url
字符串
加载列表数据的远程URL
null
3.3 事件
事件名
参数
描述
onLoadSuccess
none
当远程数据成功加载时触发
onLoadError
none
当远程数据加载失败时触发
onSelect
record
当用户选择了一个列表项时触发
onChange
newValue, oldValue
当文本域字段的值改变时触发
3.4 方法
方法名
参数
描述
select
value
选择下拉列表中的一项
setValue
param
设定指定值到文本域,参数可以是一个字符串,也可以是一个Javascript对象,如果是对象,必须包含两个属性各对应valueField和TextField属性。
getValue
none
获取字段值
reload
url
请求远程列表数据.
4 Dialog(对话框)
4.1 实例
4.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#dd').dialog({
title:'对话框',
collapsible:true,
minimizable:true,
maximizable:true,
resizable:true,
toolbar:[{
text:'Add',
iconCls:'icon-add',
handler:function(){
alert('add');
}
},'-',{
text:'Save',
iconCls:'icon-save',
handler:function(){
alert('save');
}
}],
buttons:[{
text:'Ok',
iconCls:'icon-ok',
handler:function(){
alert('ok');
}
},{
text:'Cancel',
handler:function(){
$('#dd').dialog('close');
}
}]
});
});
function open1(){
$('#dd').dialog('open');
}
function close1(){
$('#dd').dialog('close');
}
</script>
</head>
<body>
<h1>Dialog</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="open1()">open1</a>
<a href="#" onclick="close1()">close1</a></div>
<div id="dd" icon="icon-save"
style="padding: 5px; width: 400px; height: 200px;">
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
</div>
</body>
</html>
4.1.2 效果图
4.2 参数
属性名
类型
描述
默认值
title
字符串
对话框的标题文本
New Dialog
collapsible
布尔
定义是否显示可折叠按钮
false
minimizable
布尔
定义是否显示最小化按钮
false
maximizable
布尔
定义是否显示最大化按钮
false
resizable
布尔
定义对话框是否可编辑大小
false
toolbar
数组
对话框上的工具条,每个工具条包括:
text,
iconCls,
disabled,
handler
etc.
null
buttons
数组
对话框底部的按钮,每个按钮包括:
text,
iconCls,
handler
etc.
null
4.3 事件
Dialog的事件和窗口(Window)的事件相同。
4.4 方法
Dialog的函数方法和窗口(Window)的相同。
5 Messager(提示框)
5.1 实例
5.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function show1(){
$.messager.show({
title:'My Title',
msg:'Message will be closed after 4 seconds.',
showType:'show'
});
}
function show2(){
$.messager.show({
title:'My Title',
msg:'Message will be closed after 5 seconds.',
timeout:5000,
showType:'slide'
});
}
function show3(){
$.messager.show({
title:'My Title',
msg:'Message never be closed.',
timeout:0,
showType:'fade'
});
}
function alert1(){
$.messager.alert('My Title','Here is a message!');
}
function alert2(){
$.messager.alert('My Title','Here is a error message!','error');
}
function alert3(){
$.messager.alert('My Title','Here is a info message!','info');
}
function alert4(){
$.messager.alert('My Title','Here is a question message!','question');
}
function alert5(){
$.messager.alert('My Title','Here is a warning message!','warning');
}
function confirm1(){
$.messager.confirm('My Title','Are you confirm this?', function(r){
if (r){
alert('confirmed:'+r);
location.href = 'http://www.google.com';
}
});
}
function prompt1(){
$.messager.prompt('My Title', 'Please type something', function(r){
if (r){
alert('you type:'+r);
}
});
}
$(function(){
$.messager.defaults={ok:"确定",cancel:"取消"};
});
</script>
</head>
<body>
<h1>Messager</h1>
<div><a href="javascript:void(0)" onclick="show1()">show</a> |<a
href="#" onclick="show2()">slide</a> |<a href="#" onclick="show3()">fade</a>
|</div>
<div><a href="#" onclick="alert1()">alert</a> |<a href="#"
onclick="alert2()">alert(error)</a> |<a href="#" onclick="alert3()">alert(info)</a>
| <a href="#" onclick="alert4()">alert(question)</a> |<a href="#"
onclick="alert5()">alert(warning)</a></div>
<div><a href="#" onclick="confirm1();">confirm</a></div>
<div><a href="#" onclick="prompt1()">prompt</a></div>
<div style="height: 600px;"></div>
</body>
</html>
5.1.2 效果图
5.2 方法
方法名
参数
描述
$.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):用户点击按钮后的回调函,参数是用户输入的内容。
5.3 扩展
可以通过$.messager.defaults方法自定义alert框的ok按钮和cancel按钮上显示的文字。
名字
类型
描述
默认值
ok
字符串
Ok
按钮上的文本
Ok
cancel
字符串
Cancel
按钮上的文本
Cancel
6 NumberBox(数字框)
6.1 实例
6.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function disable(){
$('#nn').numberbox('disable');
}
function enable(){
$('#nn').numberbox('enable');
}
$(function(){
$('#nn').numberbox({min:5.5,max:20,precision:2});
});
</script>
</head>
<body>
<h1>NumberBox</h1>
<p>The Box can only input number.</p>
<div style="margin-bottom: 10px;"><a href="#" onclick="disable()">disable</a>
<a href="#" onclick="enable()">enable</a></div>
<input id="nn" required="true" />
</body>
</html>
6.1.2 效果图
6.2 参数
选项名
类型
描述
默认值
min
数字
文本框中可允许的最小值
null
max
数字
文本框中可允许的最大值
null
precision
数字
最高可精确到小数点后几位
0
7 ValidateBox(验证框)
7.1 实例
7.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<style type="text/css">
input,textarea {
width: 200px;
border: 1px solid #ccc;
padding: 2px;
}
</style>
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function valid(){
alert($('#dfe').validatebox('isValid'));
}
$(function(){
$.extend($.fn.validatebox.defaults.rules, {
minLength: {
validator: function(value, param){
return value.length >= param[0];
},
message: 'Please enter at least {0} characters.'
}
});
});
</script>
</head>
<body>
<h1>ValidateBox<a href="#0" onclick="valid();">EmailisValid</a></h1>
<div>
<table>
<tr>
<td>Name:</td>
<td><input class="easyui-validatebox" required="true"
validType="length[1,3]"></td>
</tr>
<tr>
<td>Email:</td>
<td><input id="dfe" class="easyui-validatebox"
invalidMessage="email格式错误" validType="email"></td>
</tr>
<tr>
<td>URL:</td>
<td><input class="easyui-validatebox" required="true"
validType="url"></td>
</tr>
<tr>
<td>testr:</td>
<td><input class="easyui-validatebox" validType="minLength[5]"
invalidMessage="至少5个字符"></td>
</tr>
<tr>
<td>Note:</td>
<td><textarea class="easyui-validatebox" required="true"
missingMessage="必填" style="height: 100px;"></textarea></td>
</tr>
</table>
</div>
</body>
</html>
7.1.2 效果图
7.2 参数
属性名
类型
描述
默认值
required
布尔
定义文本域是否为必填项
false
validType
字符串
定义字段的验证类型
url(匹配电子邮件正则表达式规则), email(匹配URL正则表达式规则),length[0,100](允许字符串长度的范围)etc.null
missingMessage
字符串
当文本框为空时提示的文本信息
This field is required.
invalidMessage
字符串
当文本框内容不合法时提示的文本信息
null
7.3 方法
方法名
参数
描述
destroy
none
删除并且销毁组件
validate
none
做验证以确定文本框的内容是否是有效的。
isValid
none
调用验证方法并返回验证结果,true或者false
7.4 扩展
当然也可以自定义验证规则,重写$.fn.validatebox.defaults.rules可以定义一个校验器的功能和无效的显示消息。例如,要定义一个minLength有效的类型:
$.extend($.fn.validatebox.defaults.rules, {
minLength: {
validator: function(value, param){
return value.length >= param[0];
},
message: 'Please enter at least {0} characters.'
}
});定义好以后我们就可以使用了,下面的代码表示输入的最小长度是5个字符:
<input class="easyui-validatebox" validType="minLength[5]">
8 Pagination(分页)
8.1 实例
8.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#pp').pagination({
total:114,
pageSize:15,
pageNumber:2,
pageList:[10,15,20,30,50,100],
loading:false,
showPageList:true,
showRefresh:true,
beforePageText:'第',
afterPageText:'页,共{pages}页',
displayMsg:'{from}-{to}/{total}',
buttons:[{
iconCls:'icon-add',
handler:function(){
alert('add');
}
},{
iconCls:'icon-cut',
handler:function(){
alert('cut');
}
},{
iconCls:'icon-save',
handler:function(){
alert('save');
}
}],
onSelectPage:function(pageNumber, pageSize){
$(this).pagination('loading');
alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
$(this).pagination('loaded');
}
});
});
</script>
</head>
<body>
<h1>Pagination</h1>
<div style="margin: 10px 0;"><a href="#"
onclick="javascript:$('#pp').pagination({loading:false})">loaded</a> <a
href="#" onclick="javascript:$('#pp').pagination({loading:true})">loading</a>
</div>
<div id="pp"
style="width: 500px; background: #efefef; border: 1px solid #ccc;"></div>
</body>
</html>
8.1.2 效果图
8.2 参数
属性名
类型
描述
默认值
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
8.3 事件
事件名
参数
描述
onSelectPage
pageNumber, pageSize
当用户选择一个新页时触发,回调函数包含两个参数:pageNumber: 新页面的页数pageSize:新页面的大小
onBeforeRefresh
ageNumber, pageSize
刷新按钮被点击之前触发,如果返回false则取消刷新操作
onRefresh
ageNumber, pageSize
刷新以后触发
onChangePageSize
ageSize
改变页面大小时触发
9 Window(窗口)
窗口的主要用法和面板(panel)用法差不多
9.1 实例
9.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html style="height:100%;width:100%;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function resize(){
$('#w').window({
title: 'yewen2',
width: 600,
collapsible:false,
minimizable:false,
maximizable:false,
closable:false,
closed: false,
height: 300,
draggable:false,
resizable:false,
shadow:false,
modal:true
});
}
function open1(){
$('#w').window('open');
}
function close1(){
$('#w').window('close');
}
function test(){
$('#test').window('open');
}
</script>
</head>
<body style="height: 100%; width: 100%; overflow: hidden; border: none;">
<h1>Window</h1>
<div><a href="javascript:void(0)" onclick="resize()">resize</a> <a
href="javascript:void(0)" onclick="open1()">open</a> <a
href="javascript:void(0)" onclick="close1()">close</a></div>
<div id="w" class="easyui-window" title="My Window" icon="icon-save"
style="width: 500px; height: 200px; padding: 5px; background: #fafafa;">
<div class="easyui-layout" fit="true">
<div region="center" border="false"
style="padding: 10px; background: #fff; border: 1px solid #ccc;">
jQuery EasyUI framework help you build your web page easily. <br />
<br />
click <a href="#" onclick="test()">here</a> topopup another window.</div>
<div region="south" border="false"
style="text- align: right; height: 30px; line-height: 30px;"><a
class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)"
onclick="resize()">Ok</a> <a class="easyui-linkbutton"
icon="icon-cancel" href="javascript:void(0)" onclick="resize()">Cancel</a>
</div>
</div>
</div>
<div id="test" class="easyui-window" closed="true" modal="true"
title="Test Window" style="width: 300px; height: 100px;"></div>
</body>
</html>
9.1.2 效果图
9.2 参数
大多数的属性和面板(panel)的属性是相同的,下面列出一些Window私有的属性:
属性名
类型
描述
默认值
zIndex
数字
窗口的z-index属性,可以通过这个属性来增加
9000
draggable
布尔
定义窗口是否可被拖动
true
resizable
布尔
定义窗口是否可以被改变大小
true
shadow
布尔
如果设置为true,窗口的阴影也将显示。
true
modal
布尔
定义窗口是否是一个模式窗口。
false
Window也重写了Panel里的一些属性
属性名
类型
描述
默认值
title
字符串
窗口的标题文本
New Window
collapsible
布尔
定义是否显示可折叠定义按钮
true
minimizable
布尔
定义是否显示最小化按钮
true
maximizable
布尔
定义是否显示最大化按钮
true
closable
布尔
定义是否显示关闭按钮
true
9.3 事件
Window的事件和面板(panel)的事件相同
9.4 方法
除了”header”和”body”以外,Window的函数方法和面板(panel)的相同
10 Panel(面板)
10.1 实例
10.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function open1(){
$('#p').panel('open');
}
function close1(){
$('#p').panel('close');
}
function load1(){
$('#p').panel({
href:'tabs_href_test.html'
});
$('#p').panel('open');
}
</script>
</head>
<body style="background: #fafafa;">
<h1>Panel</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="open1()">open</a>
<a href="#" onclick="close1()">close</a> <a href="#" onclick="load1()">load</a>
</div>
<div
style="width: 600px; height: 300px; border: 1px solid red; padding: 5px;">
<div id="p" class="easyui-panel" title="My Title" icon="icon-save"
collapsible="true" minimizable="true" maximizable=true closable="true"
style="width: 500px; height: 150px; padding: 10px; background: #fafafa;">
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
</div>
</div>
</body>
</html>
10.1.2 效果图
10.2 参数
名字
类型
描述
默认值
title
字符串
在面板头部显示的标题文本
null
iconCls
字符串
一个CSS类来显示在面板中的16x16图标
null
width
数字
设置面板的宽度
auto
height
数字
设置面板的高度
auto
left
数字
设置面板左侧位置
null
top
数字
设置面板的顶部位置
null
cls
字符串
给面板添加一个CSS类
null
headerCls
字符串
给面板头部添加一个CSS类
null
bodyCls
字符串
给面板主体添加一个CSS类
null
style
对象
给面板自定义样式
{}
fit
布尔
当设置为true,面板尺寸将适合它的父容器。
false
border
布尔
定义面板的边框
true
doSize
布尔
当设置为true,面板载创建的时候将被调整和重新布局
true
collapsible
布尔
定义是否显示可折叠定义按钮
false
minimizable
布尔
定义是否显示最小化按钮
false
maximizable
布尔
定义是否显示最大化按钮
false
closable
布尔
定义是否显示关闭按钮
false
tools
数组
自定义工具,每个工具可以包含两个属性:iconCls and handler
[]
collapsed
布尔
定义在初始化的时候折叠面板
false
minimized
布尔
定义在初始化的时候最小化面板
false
maximized
布尔
定义在初始化的时候最大化面板
false
closed
布尔
定义在初始化的时候关闭面板
false
href
字符串
一个远程的URL加载数据,然后显示在面板中
null
loadingMessage
字符串
当加载远程数据时,在面板中显示的信息
Loading…
10.3 事件
名字
参数
描述
onLoad
none
当远程数据加载时触发
onBeforeOpen
none
当面板打开之前触发
onOpen
none
当面板打开之后触发
onBeforeClose
none
当面板关闭之前触发
onClose
none
当面板关闭之后触发
onBeforeDestroy
none
当面板销毁之前触发
onDestroy
none
当面板关闭之后触发
onBeforeCollpase
none
当面板折叠之前触发
onCollapse
none
当面板折叠之后触发
onBeforeExpand
none
当面板展开之前触发
onExpand
none
当面板展开之后触发
onResize
width, height
当面板调整大小之后触发width: 新的宽度;height:新的高度
onMove
left,top
当面板移动之后触发left: 新的左侧位置top:新的顶部位置
onMaximize
none
当窗口最大化的时候被触发
onRestore
none
当窗口恢复到原来的大小时被触发
onMinimize
none
当窗口最小化的时候被触发
10.4 方法
名字
参数
描述
options
none
返回设置的属性值
panel
none
返回面板对象
header
none
返回面板头部对象
body
none
返回面板主体对象
setTitle
title
设置面板头部标题
open
forceOpen
当forceOpen设置为true,面板被打开的时候忽略onBeforeOpen回调函数
close
forceClose
当forceClose设置为true,面板被关闭的时候忽略onBeforeClose回调函数
destroy
forceDestroy
当forceDestroy设置为true,面板被销毁的时候忽略onBeforeDestroy回调函数
refresh
none
当设置了href值时,刷新面板来加载远程数据
resize
options
设置面板的大小和布局,这些选项包含以下的属性:width: 新面板的宽度; height:新面板的高度; left:新面板的左侧位置; top:新面板的顶部位置
move
options
移动面板到一个新的位置,这些选项包含以下属性: left: 新面板的左侧位置;top:新面板的顶部位置
11 Tabs(标签)
11.1 实例
11.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
var index = 0;
function addTab(){
index++;
$('#tt').tabs('add',{
title:'New Tab ' + index,
content:'Tab Body ' + index,
closable:true
});
}
</script>
</head>
<body>
<h1>Tabs</h1>
<div>
<a class="easyui-linkbutton" icon="icon-add" href="javascript:void(0)" onclick="addTab()">add tab</a>
</div>
<br/>
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;display:none;">
</div>
<div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;" cache="false" href="tabs_href_test.html"> This is Tab2 width close
button.</div>
<div title="Tab3" icon="icon-reload" closable="true" style="padding:20px;display:none;">
<table id="test" class="easyui-datagrid" fit="true">
<thead>
<tr>
<th field="f1" width="60">field1</th>
<th field="f2" width="60">field2</th>
<th field="f3" width="60">field3</th>
</tr>
</thead>
<tbody>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
</tr>
<tr>
<td>d11</td>
<td>d21</td>
<td>d31</td>
</tr>
</tbody>
</table>
</div>
<div title="Tab4 with iframe" closable="true" style="width:100%;height:100%;display:none;">
<iframe scrolling="yes" frameborder="0" src="http://www.google.com" style="width:100%;height:100%;"></iframe>
</div>
<div title="Tab5 with sub tabs" closable="true" icon="icon-cut" style="padding:10px;display:none;">
<div class="easyui-tabs" fit="true" plain="true" style="height:100px;width:300px;">
<div title="Title1">Content 1</div>
<div title="Title2">Content 2</div>
<div title="Title3">Content 3</div>
</div>
</div>
</div>
</body>
</html>
11.1.2 效果图
11.2 参数
参数名
参数
描述
默认值
width
数字
标签容器的宽度
auto
height
数字
标签容器的高度
auto
idSeed
数字
The base id seed to generate tab panel’s DOM id attribute.
0
plain
布尔
如果为ture标签没有背景图片
false
fit
布尔
如果为ture则设置标签的大小以适应它的容器的父容器
false
border
布尔
如果为true则显示标签容器的边框
true
scrollIncrement
数字
滚动按钮每次被按下时滚动的像素值
100
scrollDuration
数字
每次滚动持续的毫秒数
400
11.3 事件
事件名
参数
描述
onLoad
arguments
当一个AJAX标签加载远程数据完成时被触发,参数和jQuery.ajax成功返回的回调函数相同
onSelect
title
当用户选择一个标签面板时被触发
onClose
title
当用户关闭一个标签面板时被触发
11.4 方法
方法名
参数
描述
resize
none
调整标签容器的大小和布局
add
options
添加新标签面板,可选参数是一个配置对象,详细信息可以查看下面的标签面板属性
close
title
关闭一个标签面板,标题参数表明被关闭的面板
select
title
选择一个标签面板
exists
title
指示特定的标签是否存在
11.5 标签面板属性
属性名
类型
描述
默认值
id
字符串
标签面板的ID属性
null
title
字符串
标签面板的文本标题
content
字符串
标签面板的主体内容
href
字符串
填充标签内容的远程URL地址
null
cache
布尔
如果为true,当设置href时,对标签面板进行缓存
true
icon
字符串
标签面板上标题的图标CSS类
null
closable
布尔
如果为true,标签面板会显示出关闭按钮,点击可以关闭选项卡面板。
false
selected
布尔
如果为true,标签标签面板将被选中
false
width
数字
标签面板的宽度
auto
height
数字
标签面板的高度
auto
12 Tree(树)
12.1 实例
12.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
$('#tt1').tree({
animate:true,
onClick:function(node){
alert('you click '+node.text);
}
});
$('#tt2').tree({
checkbox: true,
url: 'tree_data.json',
onClick:function(node){
alert('you click '+node.text);
}
});
});
function reload(){
$('#tt2').tree('reload');
}
function getChecked(){
var nodes = $('#tt2').tree('getChecked');
var s = '';
for(var i=0; i<nodes.length; i++){
if (s != '') s += ',';
s += nodes[i].text;
}
alert(s);
}
function getSelected(){
var node = $('#tt2').tree('getSelected');
alert(node.text);
}
function collapse(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('collapse',node.target);
}
function expand(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('expand',node.target);
}
function append(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('append',{
parent: node.target,
data:[{
text:'new1'
},{
text:'new2',
state:'closed',
children:[{
text:'subnew1'
},{
text:'subnew2'
}]
}]
});
}
function remove(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('remove', node.target);
}
function isLeaf(){
var node = $('#tt2').tree('getSelected');
var b = $('#tt2').tree('isLeaf', node.target);
alert(b)
}
</script>
</head>
<body>
<h1>Tree</h1>
<p>Create from HTMLmarkup</p>
<ul id="tt1" class="easyui-tree">
<li><span>Folder</span>
<ul>
<li><span>Sub Folder 1</span>
<ul>
<li><span><a href="#">File 11</a></span></li>
<li><span>File 12</span></li>
<li><span>File 13</span></li>
</ul>
</li>
<li><span>File 2</span></li>
<li><span>File 3</span></li>
</ul>
</li>
<li><span>File21</span></li>
</ul>
<hr></hr>
<p>Create from JSON data</p>
<div style="margin: 10px;"><a href="#" onclick="reload()">reload</a>
<a href="#" onclick="getChecked()">getChecked</a> <a href="#"
onclick="getSelected()">getSelected</a> <a href="#"
onclick="collapse()">collapse</a> <a href="#" onclick="expand()">expand</a>
<a href="#" onclick="append()">append</a> <a href="#" onclick="remove()">remove</a>
<a href="#" onclick="isLeaf()">isLeaf</a></div>
<ul id="tt2"></ul>
</body>
</html>
12.1.2 效果图
12.2 参数
选项名
类型
描述
默认值
url
字符串
一个网址retrive远程数据。
null
animate
布尔
当节点展开或折叠是否显示动画效果。
false
checkbox
布尔
是否带复选框
False
12.3 事件
事件名
参数
描述
onClick
node
用户点击一个节点时触发。,该节点参数包含以下属性:
id:节点ID
text:节点的文本
attributes:节点自定义属性
target:点击DOM对象的目标
onDblClick
node
用户双击一个节点时触发,参数同onclick事件
onLoadSuccess
arguments
加载数据成功时触发,参数arguments类似jQuery.ajax.的success函数
onLoadError
arguments
加载数据成功时触发,参数arguments类似jQuery.ajax.的error函数
12.4 方法
方法名
参数
描述
options
none
返回树的所有参数对象
loadData
data
加载树的数据
reload
none
重新加载树的数据
getRoot
none
返回树的root节点
getRoots
none
返回树的所有root节点
getParent
target
返回某个节点的父节点
getChildren
target
返回某个节点的孩子节点
getChecked
none
获取被勾选的节点
getSelected
none
获取选中的节点,并返回它,如果没有节点选择返回null。
isLeaf
target
判断某个节点是否叶子节点
select
target
选择一个节点,目标参数表明该节点的DOM对象。
collapse
target
折叠节点,目标参数表明该节点的DOM对象。
expand
target
展开一个节点,目标参数表明该节点的DOM对象。
collapseAll
none
折叠所有节点
expandAll
none
展开所有节点
append
param
一些子节点追加到父节点。参数有两个属性:
parent: DOM对象,父节点追加。
data:数组,节点数据。
toggle
target
绑定某个节点的展开或者折叠状态,使之不能再改变。
remove
target
删除一个节点和它的子节点,目标参数表明该节点的DOM对象。
update
param
更新指定的节点,参数param包含如下属性:
Target:目标节点;
id,text,iconCls,checked,etc.
13 Layout(布局)
13.1 实例
此例最外层写在了body上,也可以写在某个div上。
13.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
var p = $('body').layout('panel','west').panel({
onCollapse:function(){
alert('collapse');
}
});
setTimeout(function(){
$('body').layout('collapse','east');
},0);
});
</script>
</head>
<body class="easyui-layout">
<div region="north" border="false" style="height:60px;background:#B3DFDA;">north region</div>
<div region="west" split="true" title="West" style="width:150px;padding:10px;">west content</div>
<div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div>
<div region="south" border="false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div region="center" title="Main Title">
</div>
</body>
</html>
13.1.2 效果图
13.2 参数
所有属性都必须定义在布局面板创建的<div/>标记上。
名称
类型
描述
默认值
title
字符串
布局面板的标题文本
null
region
字符串
定义布局面板的位置,该值是下列之一: north, south, east, west, center.
border
布尔
如果为ture则显示布局面板的边框
true
split
布尔
如果为ture则显示分隔栏,用户可以用它来改变布局面板的大小
false
icon
字符串
在面板头部显示图标的CSS
null
href
字符串
从远程地址加载数据的URL
null
13.3 方法
方法名
参数
描述
panel
region
返回某个方位的面板,参数region取值可以是:north,south,east,west,center
collapse
region
收缩某个方位的面板,参数region取值可以是:north,south,east,west
expand
region
展开某个方位的面板,参数region取值可以是:north,south,east,west
14 Datagrid(数据表)
14.1 实例
14.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#test').datagrid({
title:'My Title',
iconCls:'icon-save',
width:800,
height:450,
nowrap: true,
striped: true,
url:'datagrid_data.json',
sortName: 'code',
sortOrder: 'desc',
idField:'code',
frozenColumns:[[
{field:'ck',checkbox:true},
{title:'code',field:'code',width:80,sortable:true}
]],
columns:[[
{title:'Base Information',colspan:3},
{field:'opt',title:'Operation',width:100,align:'center', rowspan:2,
formatter:function(value,rec){
return '<span style="color:red">Edit Delete</span>';
}
}
],[
{field:'name',title:'Name',width:120},
{field:'addr',title:'Address',width:120,rowspan:2,sortable:true},
{field:'col4',title:'Col41',width:150,rowspan:2}
]],
pagination:true,
rownumbers:true,
singleSelect:true,
toolbar:[{
text:'Add',
iconCls:'icon-add',
handler:function(){
alert('add')
}
},{
text:'Cut',
iconCls:'icon-cut',
disabled:true,
handler:function(){
alert('cut')
}
},'-',{
text:'Save',
iconCls:'icon-save',
handler:function(){
alert('save')
}
}]
});
var p = $('#test').datagrid('getPager');
if (p){
$(p).pagination({
onBeforeRefresh:function(){
alert('before refresh');
}
});
}
});
function resize(){
$('#test').datagrid({
title: 'New Title',
striped: true,
width: 650,
queryParams:{
p:'param test',
name:'My Name'
}
});
}
function getSelected(){
var selected = $('#test').datagrid('getSelected');
alert(selected.code+":"+selected.name);
}
function getSelections(){
var ids = [];
var rows = $('#test').datagrid('getSelections');
for(var i=0;i<rows.length;i++){
ids.push(rows[i].code);
}
alert(ids.join(':'))
}
function clearSelections(){
$('#test').datagrid('clearSelections');
}
function selectRow(){
$('#test').datagrid('selectRow',2);
}
function selectRecord(){
$('#test').datagrid('selectRecord','002');
}
function unselectRow(){
$('#test').datagrid('unselectRow',2);
}
</script>
</head>
<body>
<h1>DataGrid</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="resize()">resize</a>
<a href="#" onclick="getSelected()">getSelected</a> <a href="#"
onclick="getSelections()">getSelections</a> <a href="#"
onclick="clearSelections()">clearSelections</a> <a href="#"
onclick="selectRow()">selectRow</a> <a href="#"
onclick="selectRecord()">selectRecord</a> <a href="#"
onclick="unselectRow()">unselectRow</a></div>
<table id="test"></table>
</body>
</html>
14.1.2 效果图
14.2 参数
Name
Type
Description
Default
title
字符串
标题文字
null
iconCls
字符串
一个css类,将提供一个背景图片作为标题图标
null
border
布尔
是否显示面板的边界。
true
width
数字
表格的宽度
auto
height
数字
表格的高度
auto
columns
数组
表格的列的配置对象,详见下面column属性介绍。
null
frozenColumns
数组
与columns属性相通,但这些列将固定在左侧,不得变动。
null
striped
布尔
是否显示斑马线
false
method
字符串
远程数据的获取类型,可取值为post或get
post
nowrap
布尔
是否在一行显示数据
true
idField
字符串
指定哪些字段时标识字段
null
url
字符串
从远程请求数据的地址
null
loadMsg
字符串
当远程加载数据时,现实的等待信息提示
Processing, please wait …
pagination
布尔
是否显示底部分页工具栏
false
rownumbers
布尔
是否显示行号列
false
singleSelect
布尔
是否允许只选择一行
false
fit
布尔
是否允许表格自动缩放,以适应父容器
false
pageNumber
数字
初始化页码
1
pageSize
数字
初始化页面大小
10
pageList
数组
初始化页面大小选择清单
[10,20,30,40,50]
queryParams
对象
当请求远程数据时,发送的额外的参数
{}
sortName
字符串
定义哪一列可以排序
null
sortOrder
字符串
定义列排序的方式,递增(asc)或递减(desc)
asc
editors
对象
定义当编辑某行数据时的编辑器
predefined editors
14.3 Column参数
Name
Type
Description
Default
title
字符串
列标题文字
undefined
field
字符串
列字段名称
undefined
width
数字
列宽度
undefined
rowspan
数字
该列占几行单元格
undefined
colspan
数字
该列占几列单元格
undefined
align
字符串
数据对其方式,可选值有left,right,center
undefined
sortable
布尔
是否允许该列排序
undefined
checkbox
布尔
是否显示选择框
undefined
formatter
函数
包含三个参数:
value: the field value.
rowData: the row record data
rowIndex: the row index.
undefined
editor
string,object
Indicate the edit type. When string indicates the edit type, when object contains two properties:
type: string, the edit type, possible type is: text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree.
options: object, the editor options corresponding to the edit type.
undefined
14.4 事件
Name
Parameters
Description
onLoadSuccess
data
远程数据加载成功时触发
onLoadError
none
远程数据加载失败时触发
onBeforeLoad
data
请求发出去,加载数据前触发。如果返回false,加载数据动作则退出
onClickRow
rowIndex, rowData
当用户点击某行时触发, the parameters contains:
rowIndex: the clicked row index, start with 0
rowData: the record corresponding to the clicked row
onDblClickRow
rowIndex, rowData
当用户双击某行时触发, the parameters contains:
rowIndex: the clicked row index, start with 0
rowData: the record corresponding to the clicked row
onSortColumn
sort, order
当用户排序某列时触发, the parameters contains:
sort: the sort column field name
order: the sort column order
onSelect
rowIndex, rowData
当用户选择某行时触发, the parameters contains:
rowIndex: the selected row index, start with 0
rowData: the record corresponding to the selected row
onUnselect
rowIndex, rowData
当用户取消选择某行时触发, the parameters contains:
rowIndex: the unselected row index, start with 0
rowData: the record corresponding to the unselected row
onBeforeEdit
rowIndex, rowData
当用户开始编辑某行时触发, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row
onAfterEdit
rowIndex, rowData, changes
当用户完成编辑某行时触发, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row
changes: the changed field/value pairs
onCancelEdit
rowIndex, rowData
当用户退出编辑某行时触发, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row
14.5 方法
Name
Parameter
Description
options
none
返回所有参数的对象
getPager
none
返回分页对象
resize
none
调整表格大小
reload
param
重新加载行
fixColumnSize
none
固定列的大小
loadData
param
加载本地数据,旧行将被删除
getData
none
返回已加载的数据
getRows
none
返回当前页的行数
getSelected
none
返回第一次选择的行记录
getSelections
none
返回所有选定行,如果没选择记录,则返回空数组
clearSelections
none
取消所有选择
selectAll
none
选择当前页所有行
selectRow
index
选择某行,行索引以0开始
selectRecord
idValue
通过id值选择一行
unselectRow
index
取消选择某行
beginEdit
index
开始编辑某行
endEdit
index
结束编辑某行
cancelEdit
index
退出编辑某行
refreshRow
index
刷新一行的数据
appendRow
row
添加新行
deleteRow
index
删除一行
getChanges
type
Get changed rows since the last commit. The type parameter indicate which type changed rows, possible value is: inserted,deleted,updated,etc. When the type parameter is not assigned, return all changed rows.
acceptChanges
none
Commits all the changes data since it was loaded or since the last time acceptChanges was called.
rejectChanges
none
Rolls back all the changes data since it was created, or since the last time acceptChanges was called.
目 录
1Accordion(可折叠标签) 2
1.1实例 2
1.2参数 3
2DateBox(日期框) 4
2.1实例 4
2.2参数 6
2.3事件 6
2.4方法 6
3ComboBox(组合框) 7
3.1实例 7
3.2参数 9
3.3事件 9
3.4方法 9
4Dialog(对话框) 10
4.1实例 10
4.2参数 12
4.3事件 12
4.4方法 12
5Messager(提示框) 12
5.1实例 12
5.2方法 15
5.3扩展 16
6NumberBox(数字框) 16
6.1实例 16
6.2参数 17
7ValidateBox(验证框) 18
7.1实例 18
7.2参数 20
7.3方法 20
7.4扩展 20
8Pagination(分页) 20
8.1实例 20
8.2参数 22
8.3事件 23
9Window(窗口) 23
9.1实例 23
9.2参数 25
9.3事件 26
9.4方法 26
10Panel(面板) 26
10.1实例 26
10.2参数 28
10.3事件 29
10.4方法 29
11Tabs(标签) 30
11.1实例 30
11.2参数 32
11.3事件 32
11.4方法 33
11.5标签面板属性 33
12Tree(树) 33
12.1实例 33
12.2参数 36
12.3事件 37
12.4方法 37
13Layout(布局) 38
13.1实例 38
13.2参数 39
13.3方法 39
14Datagrid(数据表) 39
14.1实例 39
14.2参数 43
14.3Column参数 44
14.4事件 45
14.5方法 46
1 Accordion(可折叠标签)
1.1 实例
1.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript">
$( function() {
$('#aa').accordion( {
width : 400,
height : 200,
fit : false
});
});
</script>
</head>
<body>
<div id="aa" border="true" >
<div title="Title1" icon="icon-save" style="overflow: auto; padding: 10px;">
<h3 style="color: #0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Title2" icon="icon-reload" selected="true"
style="padding: 10px;">content2</div>
<div title="Title3">content3</div>
</div>
</body>
</html>
1.1.2 效果图
1.1.3 扩展
实例html代码中
<div id="aa" border="true" >
此行也可写成
<div id="aa"class="easyui-accordion"style="width:300px;height:200px;"fit="false"border="false">
,并且将js代码全部去掉,效果图是一样的。
1.2 参数
1.2.1 容器参数
参数名称
参数类型
描述
默认值
width
数字
可折叠标签的宽度。
auto
height
数字
可折叠标签的高度。
auto
fit
布尔
是否使可折叠标签自动缩放以适应父容器的大小,当为true时width和height参数将失效。
false
border
布尔
是否显示边界线。
true
1.2.2 面板参数
可折叠标签面板继承自面板(panel),许多属性定义在<div />标签里,下面的属性就是如此:
参数名称
参数类型
描述
默认值
selected
布尔
设置可折叠标签中默认展开的标签页
false
2 DateBox(日期框)
2.1 实例
2.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function disable() {
$('#dd').datebox('disable');
}
function enable() {
$('#dd').datebox('enable');
}
/*
将Date/String类型,解析为String类型.
传入String类型,则先解析为Date类型
不正确的Date,返回''
如果时间部分为0,则忽略,只返回日期部分.
*/
function formatDate(v) {
if (v instanceof Date) {
var y = v.getFullYear();
var m = v.getMonth() + 1;
var d = v.getDate();
var h = v.getHours();
var i = v.getMinutes();
var s = v.getSeconds();
var ms = v.getMilliseconds();
if (ms > 0)
return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s
+ '.' + ms;
if (h > 0 || i > 0 || s > 0)
return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;
return y + '-' + m + '-' + d;
}
return '';
}
$( function() {
$('#dd').datebox( {
currentText : '今天',
closeText : '关闭',
disabled : false,
required : true,
missingMessage : '必填',
formatter : formatDate
});
});
</script>
</head>
<body>
<h1>DateBox</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick=
disable();
>disable</a>
<a href="#" onclick=
enable();
>enable</a></div>
<input id="dd"></input>
</body>
</html>
2.1.2 效果图
2.2 参数
属性名
类型
描述
默认值
currentText
字符串
为当前日期按钮显示的文本
Today
closeText
字符串
关闭按钮显示的文本
Close
disabled
布尔
如果为true则禁用输入框
false
required
布尔
定义输入框是否为必添
false
missingMessage
字符串
当输入框为空时提示的文本
必填
formatter
function
格式化日期的函数,这个函数以’date’为参数,并且返回一个字符串
——
parser
function
分析字符串的函数,这个函数以’date’为参数并返回一个日期
——
2.3 事件
事件名
参数
描述
onSelect
date
当选择一个日期时触发
2.4 方法
方法名
参数
描述
destroy
none
销毁组件
disable
none
禁用输入框.
enable
none
启用输入框
3 ComboBox(组合框)
3.1 实例
3.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function loadData(){
$('#cc').combobox({
url:'combobox_data.json',//该文件内容在下面
valueField:'id',
textField:'text'
});
}
function setValue(){
$('#cc').combobox('setValue','2');
}
function getValue(){
var val = $('#cc').combobox('getValue');
alert(val);
}
function disable(){
$('#cc').combobox('disable');
}
function enable(){
$('#cc').combobox('enable');
}
$( function() {
$('#cc').combobox( {
width:150,
listWidth:150,
listHeight:100,
//valuefield:'value',
//textField:'text',
//url:'combobox_data.json',
editable:false
});
});
</script>
</head>
<body>
<h1>ComboBox</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="loadData()">loadData</a>
<a href="#" onclick="setValue()">setValue</a> <a href="#"
onclick="getValue()">getValue</a> <a href="#" onclick="disable()">disable</a>
<a href="#" onclick="enable()">enable</a></div>
<span>Options:</span>
<select id="cc" name="dept" required="true">
<option value="">==请选择==</option>
<option value="0">苹果</option>
<option value="1">香蕉</option>
<option value="2">鸭梨</option>
<option value="3">西瓜</option>
<option value="4">芒果</option>
</select>
</body>
</html>
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"
}]
3.1.2 效果图
3.2 参数
属性名
类型
描述
默认值
width
数字
组件的宽度
auto
listWidth
数字
下拉列表的宽度
null
listHeight
数字
下拉列表的高度
null
valueField
字符串
基础数据值名称绑定到这个组合框
value
textField
字符串
基础数据的字段的名称绑定到这个组合框
text
editable
布尔
定义是否可以直接到文本域中键入文本
true
url
字符串
加载列表数据的远程URL
null
3.3 事件
事件名
参数
描述
onLoadSuccess
none
当远程数据成功加载时触发
onLoadError
none
当远程数据加载失败时触发
onSelect
record
当用户选择了一个列表项时触发
onChange
newValue, oldValue
当文本域字段的值改变时触发
3.4 方法
方法名
参数
描述
select
value
选择下拉列表中的一项
setValue
param
设定指定值到文本域,参数可以是一个字符串,也可以是一个Javascript对象,如果是对象,必须包含两个属性各对应valueField和TextField属性。
getValue
none
获取字段值
reload
url
请求远程列表数据.
4 Dialog(对话框)
4.1 实例
4.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#dd').dialog({
title:'对话框',
collapsible:true,
minimizable:true,
maximizable:true,
resizable:true,
toolbar:[{
text:'Add',
iconCls:'icon-add',
handler:function(){
alert('add');
}
},'-',{
text:'Save',
iconCls:'icon-save',
handler:function(){
alert('save');
}
}],
buttons:[{
text:'Ok',
iconCls:'icon-ok',
handler:function(){
alert('ok');
}
},{
text:'Cancel',
handler:function(){
$('#dd').dialog('close');
}
}]
});
});
function open1(){
$('#dd').dialog('open');
}
function close1(){
$('#dd').dialog('close');
}
</script>
</head>
<body>
<h1>Dialog</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="open1()">open1</a>
<a href="#" onclick="close1()">close1</a></div>
<div id="dd" icon="icon-save"
style="padding: 5px; width: 400px; height: 200px;">
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
</div>
</body>
</html>
4.1.2 效果图
4.2 参数
属性名
类型
描述
默认值
title
字符串
对话框的标题文本
New Dialog
collapsible
布尔
定义是否显示可折叠按钮
false
minimizable
布尔
定义是否显示最小化按钮
false
maximizable
布尔
定义是否显示最大化按钮
false
resizable
布尔
定义对话框是否可编辑大小
false
toolbar
数组
对话框上的工具条,每个工具条包括:
text,
iconCls,
disabled,
handler
etc.
null
buttons
数组
对话框底部的按钮,每个按钮包括:
text,
iconCls,
handler
etc.
null
4.3 事件
Dialog的事件和窗口(Window)的事件相同。
4.4 方法
Dialog的函数方法和窗口(Window)的相同。
5 Messager(提示框)
5.1 实例
5.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function show1(){
$.messager.show({
title:'My Title',
msg:'Message will be closed after 4 seconds.',
showType:'show'
});
}
function show2(){
$.messager.show({
title:'My Title',
msg:'Message will be closed after 5 seconds.',
timeout:5000,
showType:'slide'
});
}
function show3(){
$.messager.show({
title:'My Title',
msg:'Message never be closed.',
timeout:0,
showType:'fade'
});
}
function alert1(){
$.messager.alert('My Title','Here is a message!');
}
function alert2(){
$.messager.alert('My Title','Here is a error message!','error');
}
function alert3(){
$.messager.alert('My Title','Here is a info message!','info');
}
function alert4(){
$.messager.alert('My Title','Here is a question message!','question');
}
function alert5(){
$.messager.alert('My Title','Here is a warning message!','warning');
}
function confirm1(){
$.messager.confirm('My Title','Are you confirm this?', function(r){
if (r){
alert('confirmed:'+r);
location.href = 'http://www.google.com';
}
});
}
function prompt1(){
$.messager.prompt('My Title', 'Please type something', function(r){
if (r){
alert('you type:'+r);
}
});
}
$(function(){
$.messager.defaults={ok:"确定",cancel:"取消"};
});
</script>
</head>
<body>
<h1>Messager</h1>
<div><a href="javascript:void(0)" onclick="show1()">show</a> |<a
href="#" onclick="show2()">slide</a> |<a href="#" onclick="show3()">fade</a>
|</div>
<div><a href="#" onclick="alert1()">alert</a> |<a href="#"
onclick="alert2()">alert(error)</a> |<a href="#" onclick="alert3()">alert(info)</a>
| <a href="#" onclick="alert4()">alert(question)</a> |<a href="#"
onclick="alert5()">alert(warning)</a></div>
<div><a href="#" onclick="confirm1();">confirm</a></div>
<div><a href="#" onclick="prompt1()">prompt</a></div>
<div style="height: 600px;"></div>
</body>
</html>
5.1.2 效果图
5.2 方法
方法名
参数
描述
$.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):用户点击按钮后的回调函,参数是用户输入的内容。
5.3 扩展
可以通过$.messager.defaults方法自定义alert框的ok按钮和cancel按钮上显示的文字。
名字
类型
描述
默认值
ok
字符串
Ok
按钮上的文本
Ok
cancel
字符串
Cancel
按钮上的文本
Cancel
6 NumberBox(数字框)
6.1 实例
6.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function disable(){
$('#nn').numberbox('disable');
}
function enable(){
$('#nn').numberbox('enable');
}
$(function(){
$('#nn').numberbox({min:5.5,max:20,precision:2});
});
</script>
</head>
<body>
<h1>NumberBox</h1>
<p>The Box can only input number.</p>
<div style="margin-bottom: 10px;"><a href="#" onclick="disable()">disable</a>
<a href="#" onclick="enable()">enable</a></div>
<input id="nn" required="true" />
</body>
</html>
6.1.2 效果图
6.2 参数
选项名
类型
描述
默认值
min
数字
文本框中可允许的最小值
null
max
数字
文本框中可允许的最大值
null
precision
数字
最高可精确到小数点后几位
0
7 ValidateBox(验证框)
7.1 实例
7.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<style type="text/css">
input,textarea {
width: 200px;
border: 1px solid #ccc;
padding: 2px;
}
</style>
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function valid(){
alert($('#dfe').validatebox('isValid'));
}
$(function(){
$.extend($.fn.validatebox.defaults.rules, {
minLength: {
validator: function(value, param){
return value.length >= param[0];
},
message: 'Please enter at least {0} characters.'
}
});
});
</script>
</head>
<body>
<h1>ValidateBox<a href="#0" onclick="valid();">EmailisValid</a></h1>
<div>
<table>
<tr>
<td>Name:</td>
<td><input class="easyui-validatebox" required="true"
validType="length[1,3]"></td>
</tr>
<tr>
<td>Email:</td>
<td><input id="dfe" class="easyui-validatebox"
invalidMessage="email格式错误" validType="email"></td>
</tr>
<tr>
<td>URL:</td>
<td><input class="easyui-validatebox" required="true"
validType="url"></td>
</tr>
<tr>
<td>testr:</td>
<td><input class="easyui-validatebox" validType="minLength[5]"
invalidMessage="至少5个字符"></td>
</tr>
<tr>
<td>Note:</td>
<td><textarea class="easyui-validatebox" required="true"
missingMessage="必填" style="height: 100px;"></textarea></td>
</tr>
</table>
</div>
</body>
</html>
7.1.2 效果图
7.2 参数
属性名
类型
描述
默认值
required
布尔
定义文本域是否为必填项
false
validType
字符串
定义字段的验证类型
url(匹配电子邮件正则表达式规则), email(匹配URL正则表达式规则),length[0,100](允许字符串长度的范围)etc.null
missingMessage
字符串
当文本框为空时提示的文本信息
This field is required.
invalidMessage
字符串
当文本框内容不合法时提示的文本信息
null
7.3 方法
方法名
参数
描述
destroy
none
删除并且销毁组件
validate
none
做验证以确定文本框的内容是否是有效的。
isValid
none
调用验证方法并返回验证结果,true或者false
7.4 扩展
当然也可以自定义验证规则,重写$.fn.validatebox.defaults.rules可以定义一个校验器的功能和无效的显示消息。例如,要定义一个minLength有效的类型:
$.extend($.fn.validatebox.defaults.rules, {
minLength: {
validator: function(value, param){
return value.length >= param[0];
},
message: 'Please enter at least {0} characters.'
}
});定义好以后我们就可以使用了,下面的代码表示输入的最小长度是5个字符:
<input class="easyui-validatebox" validType="minLength[5]">
8 Pagination(分页)
8.1 实例
8.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#pp').pagination({
total:114,
pageSize:15,
pageNumber:2,
pageList:[10,15,20,30,50,100],
loading:false,
showPageList:true,
showRefresh:true,
beforePageText:'第',
afterPageText:'页,共{pages}页',
displayMsg:'{from}-{to}/{total}',
buttons:[{
iconCls:'icon-add',
handler:function(){
alert('add');
}
},{
iconCls:'icon-cut',
handler:function(){
alert('cut');
}
},{
iconCls:'icon-save',
handler:function(){
alert('save');
}
}],
onSelectPage:function(pageNumber, pageSize){
$(this).pagination('loading');
alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
$(this).pagination('loaded');
}
});
});
</script>
</head>
<body>
<h1>Pagination</h1>
<div style="margin: 10px 0;"><a href="#"
onclick="javascript:$('#pp').pagination({loading:false})">loaded</a> <a
href="#" onclick="javascript:$('#pp').pagination({loading:true})">loading</a>
</div>
<div id="pp"
style="width: 500px; background: #efefef; border: 1px solid #ccc;"></div>
</body>
</html>
8.1.2 效果图
8.2 参数
属性名
类型
描述
默认值
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
8.3 事件
事件名
参数
描述
onSelectPage
pageNumber, pageSize
当用户选择一个新页时触发,回调函数包含两个参数:pageNumber: 新页面的页数pageSize:新页面的大小
onBeforeRefresh
ageNumber, pageSize
刷新按钮被点击之前触发,如果返回false则取消刷新操作
onRefresh
ageNumber, pageSize
刷新以后触发
onChangePageSize
ageSize
改变页面大小时触发
9 Window(窗口)
窗口的主要用法和面板(panel)用法差不多
9.1 实例
9.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html style="height:100%;width:100%;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function resize(){
$('#w').window({
title: 'yewen2',
width: 600,
collapsible:false,
minimizable:false,
maximizable:false,
closable:false,
closed: false,
height: 300,
draggable:false,
resizable:false,
shadow:false,
modal:true
});
}
function open1(){
$('#w').window('open');
}
function close1(){
$('#w').window('close');
}
function test(){
$('#test').window('open');
}
</script>
</head>
<body style="height: 100%; width: 100%; overflow: hidden; border: none;">
<h1>Window</h1>
<div><a href="javascript:void(0)" onclick="resize()">resize</a> <a
href="javascript:void(0)" onclick="open1()">open</a> <a
href="javascript:void(0)" onclick="close1()">close</a></div>
<div id="w" class="easyui-window" title="My Window" icon="icon-save"
style="width: 500px; height: 200px; padding: 5px; background: #fafafa;">
<div class="easyui-layout" fit="true">
<div region="center" border="false"
style="padding: 10px; background: #fff; border: 1px solid #ccc;">
jQuery EasyUI framework help you build your web page easily. <br />
<br />
click <a href="#" onclick="test()">here</a> topopup another window.</div>
<div region="south" border="false"
style="text- align: right; height: 30px; line-height: 30px;"><a
class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)"
onclick="resize()">Ok</a> <a class="easyui-linkbutton"
icon="icon-cancel" href="javascript:void(0)" onclick="resize()">Cancel</a>
</div>
</div>
</div>
<div id="test" class="easyui-window" closed="true" modal="true"
title="Test Window" style="width: 300px; height: 100px;"></div>
</body>
</html>
9.1.2 效果图
9.2 参数
大多数的属性和面板(panel)的属性是相同的,下面列出一些Window私有的属性:
属性名
类型
描述
默认值
zIndex
数字
窗口的z-index属性,可以通过这个属性来增加
9000
draggable
布尔
定义窗口是否可被拖动
true
resizable
布尔
定义窗口是否可以被改变大小
true
shadow
布尔
如果设置为true,窗口的阴影也将显示。
true
modal
布尔
定义窗口是否是一个模式窗口。
false
Window也重写了Panel里的一些属性
属性名
类型
描述
默认值
title
字符串
窗口的标题文本
New Window
collapsible
布尔
定义是否显示可折叠定义按钮
true
minimizable
布尔
定义是否显示最小化按钮
true
maximizable
布尔
定义是否显示最大化按钮
true
closable
布尔
定义是否显示关闭按钮
true
9.3 事件
Window的事件和面板(panel)的事件相同
9.4 方法
除了”header”和”body”以外,Window的函数方法和面板(panel)的相同
10 Panel(面板)
10.1 实例
10.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function open1(){
$('#p').panel('open');
}
function close1(){
$('#p').panel('close');
}
function load1(){
$('#p').panel({
href:'tabs_href_test.html'
});
$('#p').panel('open');
}
</script>
</head>
<body style="background: #fafafa;">
<h1>Panel</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="open1()">open</a>
<a href="#" onclick="close1()">close</a> <a href="#" onclick="load1()">load</a>
</div>
<div
style="width: 600px; height: 300px; border: 1px solid red; padding: 5px;">
<div id="p" class="easyui-panel" title="My Title" icon="icon-save"
collapsible="true" minimizable="true" maximizable=true closable="true"
style="width: 500px; height: 150px; padding: 10px; background: #fafafa;">
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
</div>
</div>
</body>
</html>
10.1.2 效果图
10.2 参数
名字
类型
描述
默认值
title
字符串
在面板头部显示的标题文本
null
iconCls
字符串
一个CSS类来显示在面板中的16x16图标
null
width
数字
设置面板的宽度
auto
height
数字
设置面板的高度
auto
left
数字
设置面板左侧位置
null
top
数字
设置面板的顶部位置
null
cls
字符串
给面板添加一个CSS类
null
headerCls
字符串
给面板头部添加一个CSS类
null
bodyCls
字符串
给面板主体添加一个CSS类
null
style
对象
给面板自定义样式
{}
fit
布尔
当设置为true,面板尺寸将适合它的父容器。
false
border
布尔
定义面板的边框
true
doSize
布尔
当设置为true,面板载创建的时候将被调整和重新布局
true
collapsible
布尔
定义是否显示可折叠定义按钮
false
minimizable
布尔
定义是否显示最小化按钮
false
maximizable
布尔
定义是否显示最大化按钮
false
closable
布尔
定义是否显示关闭按钮
false
tools
数组
自定义工具,每个工具可以包含两个属性:iconCls and handler
[]
collapsed
布尔
定义在初始化的时候折叠面板
false
minimized
布尔
定义在初始化的时候最小化面板
false
maximized
布尔
定义在初始化的时候最大化面板
false
closed
布尔
定义在初始化的时候关闭面板
false
href
字符串
一个远程的URL加载数据,然后显示在面板中
null
loadingMessage
字符串
当加载远程数据时,在面板中显示的信息
Loading…
10.3 事件
名字
参数
描述
onLoad
none
当远程数据加载时触发
onBeforeOpen
none
当面板打开之前触发
onOpen
none
当面板打开之后触发
onBeforeClose
none
当面板关闭之前触发
onClose
none
当面板关闭之后触发
onBeforeDestroy
none
当面板销毁之前触发
onDestroy
none
当面板关闭之后触发
onBeforeCollpase
none
当面板折叠之前触发
onCollapse
none
当面板折叠之后触发
onBeforeExpand
none
当面板展开之前触发
onExpand
none
当面板展开之后触发
onResize
width, height
当面板调整大小之后触发width: 新的宽度;height:新的高度
onMove
left,top
当面板移动之后触发left: 新的左侧位置top:新的顶部位置
onMaximize
none
当窗口最大化的时候被触发
onRestore
none
当窗口恢复到原来的大小时被触发
onMinimize
none
当窗口最小化的时候被触发
10.4 方法
名字
参数
描述
options
none
返回设置的属性值
panel
none
返回面板对象
header
none
返回面板头部对象
body
none
返回面板主体对象
setTitle
title
设置面板头部标题
open
forceOpen
当forceOpen设置为true,面板被打开的时候忽略onBeforeOpen回调函数
close
forceClose
当forceClose设置为true,面板被关闭的时候忽略onBeforeClose回调函数
destroy
forceDestroy
当forceDestroy设置为true,面板被销毁的时候忽略onBeforeDestroy回调函数
refresh
none
当设置了href值时,刷新面板来加载远程数据
resize
options
设置面板的大小和布局,这些选项包含以下的属性:width: 新面板的宽度; height:新面板的高度; left:新面板的左侧位置; top:新面板的顶部位置
move
options
移动面板到一个新的位置,这些选项包含以下属性: left: 新面板的左侧位置;top:新面板的顶部位置
11 Tabs(标签)
11.1 实例
11.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
var index = 0;
function addTab(){
index++;
$('#tt').tabs('add',{
title:'New Tab ' + index,
content:'Tab Body ' + index,
closable:true
});
}
</script>
</head>
<body>
<h1>Tabs</h1>
<div>
<a class="easyui-linkbutton" icon="icon-add" href="javascript:void(0)" onclick="addTab()">add tab</a>
</div>
<br/>
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;display:none;">
</div>
<div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;" cache="false" href="tabs_href_test.html"> This is Tab2 width close
button.</div>
<div title="Tab3" icon="icon-reload" closable="true" style="padding:20px;display:none;">
<table id="test" class="easyui-datagrid" fit="true">
<thead>
<tr>
<th field="f1" width="60">field1</th>
<th field="f2" width="60">field2</th>
<th field="f3" width="60">field3</th>
</tr>
</thead>
<tbody>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
</tr>
<tr>
<td>d11</td>
<td>d21</td>
<td>d31</td>
</tr>
</tbody>
</table>
</div>
<div title="Tab4 with iframe" closable="true" style="width:100%;height:100%;display:none;">
<iframe scrolling="yes" frameborder="0" src="http://www.google.com" style="width:100%;height:100%;"></iframe>
</div>
<div title="Tab5 with sub tabs" closable="true" icon="icon-cut" style="padding:10px;display:none;">
<div class="easyui-tabs" fit="true" plain="true" style="height:100px;width:300px;">
<div title="Title1">Content 1</div>
<div title="Title2">Content 2</div>
<div title="Title3">Content 3</div>
</div>
</div>
</div>
</body>
</html>
11.1.2 效果图
11.2 参数
参数名
参数
描述
默认值
width
数字
标签容器的宽度
auto
height
数字
标签容器的高度
auto
idSeed
数字
The base id seed to generate tab panel’s DOM id attribute.
0
plain
布尔
如果为ture标签没有背景图片
false
fit
布尔
如果为ture则设置标签的大小以适应它的容器的父容器
false
border
布尔
如果为true则显示标签容器的边框
true
scrollIncrement
数字
滚动按钮每次被按下时滚动的像素值
100
scrollDuration
数字
每次滚动持续的毫秒数
400
11.3 事件
事件名
参数
描述
onLoad
arguments
当一个AJAX标签加载远程数据完成时被触发,参数和jQuery.ajax成功返回的回调函数相同
onSelect
title
当用户选择一个标签面板时被触发
onClose
title
当用户关闭一个标签面板时被触发
11.4 方法
方法名
参数
描述
resize
none
调整标签容器的大小和布局
add
options
添加新标签面板,可选参数是一个配置对象,详细信息可以查看下面的标签面板属性
close
title
关闭一个标签面板,标题参数表明被关闭的面板
select
title
选择一个标签面板
exists
title
指示特定的标签是否存在
11.5 标签面板属性
属性名
类型
描述
默认值
id
字符串
标签面板的ID属性
null
title
字符串
标签面板的文本标题
content
字符串
标签面板的主体内容
href
字符串
填充标签内容的远程URL地址
null
cache
布尔
如果为true,当设置href时,对标签面板进行缓存
true
icon
字符串
标签面板上标题的图标CSS类
null
closable
布尔
如果为true,标签面板会显示出关闭按钮,点击可以关闭选项卡面板。
false
selected
布尔
如果为true,标签标签面板将被选中
false
width
数字
标签面板的宽度
auto
height
数字
标签面板的高度
auto
12 Tree(树)
12.1 实例
12.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
$('#tt1').tree({
animate:true,
onClick:function(node){
alert('you click '+node.text);
}
});
$('#tt2').tree({
checkbox: true,
url: 'tree_data.json',
onClick:function(node){
alert('you click '+node.text);
}
});
});
function reload(){
$('#tt2').tree('reload');
}
function getChecked(){
var nodes = $('#tt2').tree('getChecked');
var s = '';
for(var i=0; i<nodes.length; i++){
if (s != '') s += ',';
s += nodes[i].text;
}
alert(s);
}
function getSelected(){
var node = $('#tt2').tree('getSelected');
alert(node.text);
}
function collapse(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('collapse',node.target);
}
function expand(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('expand',node.target);
}
function append(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('append',{
parent: node.target,
data:[{
text:'new1'
},{
text:'new2',
state:'closed',
children:[{
text:'subnew1'
},{
text:'subnew2'
}]
}]
});
}
function remove(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('remove', node.target);
}
function isLeaf(){
var node = $('#tt2').tree('getSelected');
var b = $('#tt2').tree('isLeaf', node.target);
alert(b)
}
</script>
</head>
<body>
<h1>Tree</h1>
<p>Create from HTMLmarkup</p>
<ul id="tt1" class="easyui-tree">
<li><span>Folder</span>
<ul>
<li><span>Sub Folder 1</span>
<ul>
<li><span><a href="#">File 11</a></span></li>
<li><span>File 12</span></li>
<li><span>File 13</span></li>
</ul>
</li>
<li><span>File 2</span></li>
<li><span>File 3</span></li>
</ul>
</li>
<li><span>File21</span></li>
</ul>
<hr></hr>
<p>Create from JSON data</p>
<div style="margin: 10px;"><a href="#" onclick="reload()">reload</a>
<a href="#" onclick="getChecked()">getChecked</a> <a href="#"
onclick="getSelected()">getSelected</a> <a href="#"
onclick="collapse()">collapse</a> <a href="#" onclick="expand()">expand</a>
<a href="#" onclick="append()">append</a> <a href="#" onclick="remove()">remove</a>
<a href="#" onclick="isLeaf()">isLeaf</a></div>
<ul id="tt2"></ul>
</body>
</html>
12.1.2 效果图
12.2 参数
选项名
类型
描述
默认值
url
字符串
一个网址retrive远程数据。
null
animate
布尔
当节点展开或折叠是否显示动画效果。
false
checkbox
布尔
是否带复选框
False
12.3 事件
事件名
参数
描述
onClick
node
用户点击一个节点时触发。,该节点参数包含以下属性:
id:节点ID
text:节点的文本
attributes:节点自定义属性
target:点击DOM对象的目标
onDblClick
node
用户双击一个节点时触发,参数同onclick事件
onLoadSuccess
arguments
加载数据成功时触发,参数arguments类似jQuery.ajax.的success函数
onLoadError
arguments
加载数据成功时触发,参数arguments类似jQuery.ajax.的error函数
12.4 方法
方法名
参数
描述
options
none
返回树的所有参数对象
loadData
data
加载树的数据
reload
none
重新加载树的数据
getRoot
none
返回树的root节点
getRoots
none
返回树的所有root节点
getParent
target
返回某个节点的父节点
getChildren
target
返回某个节点的孩子节点
getChecked
none
获取被勾选的节点
getSelected
none
获取选中的节点,并返回它,如果没有节点选择返回null。
isLeaf
target
判断某个节点是否叶子节点
select
target
选择一个节点,目标参数表明该节点的DOM对象。
collapse
target
折叠节点,目标参数表明该节点的DOM对象。
expand
target
展开一个节点,目标参数表明该节点的DOM对象。
collapseAll
none
折叠所有节点
expandAll
none
展开所有节点
append
param
一些子节点追加到父节点。参数有两个属性:
parent: DOM对象,父节点追加。
data:数组,节点数据。
toggle
target
绑定某个节点的展开或者折叠状态,使之不能再改变。
remove
target
删除一个节点和它的子节点,目标参数表明该节点的DOM对象。
update
param
更新指定的节点,参数param包含如下属性:
Target:目标节点;
id,text,iconCls,checked,etc.
13 Layout(布局)
13.1 实例
此例最外层写在了body上,也可以写在某个div上。
13.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
var p = $('body').layout('panel','west').panel({
onCollapse:function(){
alert('collapse');
}
});
setTimeout(function(){
$('body').layout('collapse','east');
},0);
});
</script>
</head>
<body class="easyui-layout">
<div region="north" border="false" style="height:60px;background:#B3DFDA;">north region</div>
<div region="west" split="true" title="West" style="width:150px;padding:10px;">west content</div>
<div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div>
<div region="south" border="false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div region="center" title="Main Title">
</div>
</body>
</html>
13.1.2 效果图
13.2 参数
所有属性都必须定义在布局面板创建的<div/>标记上。
名称
类型
描述
默认值
title
字符串
布局面板的标题文本
null
region
字符串
定义布局面板的位置,该值是下列之一: north, south, east, west, center.
border
布尔
如果为ture则显示布局面板的边框
true
split
布尔
如果为ture则显示分隔栏,用户可以用它来改变布局面板的大小
false
icon
字符串
在面板头部显示图标的CSS
null
href
字符串
从远程地址加载数据的URL
null
13.3 方法
方法名
参数
描述
panel
region
返回某个方位的面板,参数region取值可以是:north,south,east,west,center
collapse
region
收缩某个方位的面板,参数region取值可以是:north,south,east,west
expand
region
展开某个方位的面板,参数region取值可以是:north,south,east,west
14 Datagrid(数据表)
14.1 实例
14.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#test').datagrid({
title:'My Title',
iconCls:'icon-save',
width:800,
height:450,
nowrap: true,
striped: true,
url:'datagrid_data.json',
sortName: 'code',
sortOrder: 'desc',
idField:'code',
frozenColumns:[[
{field:'ck',checkbox:true},
{title:'code',field:'code',width:80,sortable:true}
]],
columns:[[
{title:'Base Information',colspan:3},
{field:'opt',title:'Operation',width:100,align:'center', rowspan:2,
formatter:function(value,rec){
return '<span style="color:red">Edit Delete</span>';
}
}
],[
{field:'name',title:'Name',width:120},
{field:'addr',title:'Address',width:120,rowspan:2,sortable:true},
{field:'col4',title:'Col41',width:150,rowspan:2}
]],
pagination:true,
rownumbers:true,
singleSelect:true,
toolbar:[{
text:'Add',
iconCls:'icon-add',
handler:function(){
alert('add')
}
},{
text:'Cut',
iconCls:'icon-cut',
disabled:true,
handler:function(){
alert('cut')
}
},'-',{
text:'Save',
iconCls:'icon-save',
handler:function(){
alert('save')
}
}]
});
var p = $('#test').datagrid('getPager');
if (p){
$(p).pagination({
onBeforeRefresh:function(){
alert('before refresh');
}
});
}
});
function resize(){
$('#test').datagrid({
title: 'New Title',
striped: true,
width: 650,
queryParams:{
p:'param test',
name:'My Name'
}
});
}
function getSelected(){
var selected = $('#test').datagrid('getSelected');
alert(selected.code+":"+selected.name);
}
function getSelections(){
var ids = [];
var rows = $('#test').datagrid('getSelections');
for(var i=0;i<rows.length;i++){
ids.push(rows[i].code);
}
alert(ids.join(':'))
}
function clearSelections(){
$('#test').datagrid('clearSelections');
}
function selectRow(){
$('#test').datagrid('selectRow',2);
}
function selectRecord(){
$('#test').datagrid('selectRecord','002');
}
function unselectRow(){
$('#test').datagrid('unselectRow',2);
}
</script>
</head>
<body>
<h1>DataGrid</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="resize()">resize</a>
<a href="#" onclick="getSelected()">getSelected</a> <a href="#"
onclick="getSelections()">getSelections</a> <a href="#"
onclick="clearSelections()">clearSelections</a> <a href="#"
onclick="selectRow()">selectRow</a> <a href="#"
onclick="selectRecord()">selectRecord</a> <a href="#"
onclick="unselectRow()">unselectRow</a></div>
<table id="test"></table>
</body>
</html>
14.1.2 效果图
14.2 参数
Name
Type
Description
Default
title
字符串
标题文字
null
iconCls
字符串
一个css类,将提供一个背景图片作为标题图标
null
border
布尔
是否显示面板的边界。
true
width
数字
表格的宽度
auto
height
数字
表格的高度
auto
columns
数组
表格的列的配置对象,详见下面column属性介绍。
null
frozenColumns
数组
与columns属性相通,但这些列将固定在左侧,不得变动。
null
striped
布尔
是否显示斑马线
false
method
字符串
远程数据的获取类型,可取值为post或get
post
nowrap
布尔
是否在一行显示数据
true
idField
字符串
指定哪些字段时标识字段
null
url
字符串
从远程请求数据的地址
null
loadMsg
字符串
当远程加载数据时,现实的等待信息提示
Processing, please wait …
pagination
布尔
是否显示底部分页工具栏
false
rownumbers
布尔
是否显示行号列
false
singleSelect
布尔
是否允许只选择一行
false
fit
布尔
是否允许表格自动缩放,以适应父容器
false
pageNumber
数字
初始化页码
1
pageSize
数字
初始化页面大小
10
pageList
数组
初始化页面大小选择清单
[10,20,30,40,50]
queryParams
对象
当请求远程数据时,发送的额外的参数
{}
sortName
字符串
定义哪一列可以排序
null
sortOrder
字符串
定义列排序的方式,递增(asc)或递减(desc)
asc
editors
对象
定义当编辑某行数据时的编辑器
predefined editors
14.3 Column参数
Name
Type
Description
Default
title
字符串
列标题文字
undefined
field
字符串
列字段名称
undefined
width
数字
列宽度
undefined
rowspan
数字
该列占几行单元格
undefined
colspan
数字
该列占几列单元格
undefined
align
字符串
数据对其方式,可选值有left,right,center
undefined
sortable
布尔
是否允许该列排序
undefined
checkbox
布尔
是否显示选择框
undefined
formatter
函数
包含三个参数:
value: the field value.
rowData: the row record data
rowIndex: the row index.
undefined
editor
string,object
Indicate the edit type. When string indicates the edit type, when object contains two properties:
type: string, the edit type, possible type is: text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree.
options: object, the editor options corresponding to the edit type.
undefined
14.4 事件
Name
Parameters
Description
onLoadSuccess
data
远程数据加载成功时触发
onLoadError
none
远程数据加载失败时触发
onBeforeLoad
data
请求发出去,加载数据前触发。如果返回false,加载数据动作则退出
onClickRow
rowIndex, rowData
当用户点击某行时触发, the parameters contains:
rowIndex: the clicked row index, start with 0
rowData: the record corresponding to the clicked row
onDblClickRow
rowIndex, rowData
当用户双击某行时触发, the parameters contains:
rowIndex: the clicked row index, start with 0
rowData: the record corresponding to the clicked row
onSortColumn
sort, order
当用户排序某列时触发, the parameters contains:
sort: the sort column field name
order: the sort column order
onSelect
rowIndex, rowData
当用户选择某行时触发, the parameters contains:
rowIndex: the selected row index, start with 0
rowData: the record corresponding to the selected row
onUnselect
rowIndex, rowData
当用户取消选择某行时触发, the parameters contains:
rowIndex: the unselected row index, start with 0
rowData: the record corresponding to the unselected row
onBeforeEdit
rowIndex, rowData
当用户开始编辑某行时触发, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row
onAfterEdit
rowIndex, rowData, changes
当用户完成编辑某行时触发, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row
changes: the changed field/value pairs
onCancelEdit
rowIndex, rowData
当用户退出编辑某行时触发, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row
14.5 方法
Name
Parameter
Description
options
none
返回所有参数的对象
getPager
none
返回分页对象
resize
none
调整表格大小
reload
param
重新加载行
fixColumnSize
none
固定列的大小
loadData
param
加载本地数据,旧行将被删除
getData
none
返回已加载的数据
getRows
none
返回当前页的行数
getSelected
none
返回第一次选择的行记录
getSelections
none
返回所有选定行,如果没选择记录,则返回空数组
clearSelections
none
取消所有选择
selectAll
none
选择当前页所有行
selectRow
index
选择某行,行索引以0开始
selectRecord
idValue
通过id值选择一行
unselectRow
index
取消选择某行
beginEdit
index
开始编辑某行
endEdit
index
结束编辑某行
cancelEdit
index
退出编辑某行
refreshRow
index
刷新一行的数据
appendRow
row
添加新行
deleteRow
index
删除一行
getChanges
type
Get changed rows since the last commit. The type parameter indicate which type changed rows, possible value is: inserted,deleted,updated,etc. When the type parameter is not assigned, return all changed rows.
acceptChanges
none
Commits all the changes data since it was loaded or since the last time acceptChanges was called.
rejectChanges
none
Rolls back all the changes data since it was created, or since the last time acceptChanges was called.
目 录
1Accordion(可折叠标签) 2
1.1实例 2
1.2参数 3
2DateBox(日期框) 4
2.1实例 4
2.2参数 6
2.3事件 6
2.4方法 6
3ComboBox(组合框) 7
3.1实例 7
3.2参数 9
3.3事件 9
3.4方法 9
4Dialog(对话框) 10
4.1实例 10
4.2参数 12
4.3事件 12
4.4方法 12
5Messager(提示框) 12
5.1实例 12
5.2方法 15
5.3扩展 16
6NumberBox(数字框) 16
6.1实例 16
6.2参数 17
7ValidateBox(验证框) 18
7.1实例 18
7.2参数 20
7.3方法 20
7.4扩展 20
8Pagination(分页) 20
8.1实例 20
8.2参数 22
8.3事件 23
9Window(窗口) 23
9.1实例 23
9.2参数 25
9.3事件 26
9.4方法 26
10Panel(面板) 26
10.1实例 26
10.2参数 28
10.3事件 29
10.4方法 29
11Tabs(标签) 30
11.1实例 30
11.2参数 32
11.3事件 32
11.4方法 33
11.5标签面板属性 33
12Tree(树) 33
12.1实例 33
12.2参数 36
12.3事件 37
12.4方法 37
13Layout(布局) 38
13.1实例 38
13.2参数 39
13.3方法 39
14Datagrid(数据表) 39
14.1实例 39
14.2参数 43
14.3Column参数 44
14.4事件 45
14.5方法 46
1 Accordion(可折叠标签)
1.1 实例
1.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript">
$( function() {
$('#aa').accordion( {
width : 400,
height : 200,
fit : false
});
});
</script>
</head>
<body>
<div id="aa" border="true" >
<div title="Title1" icon="icon-save" style="overflow: auto; padding: 10px;">
<h3 style="color: #0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Title2" icon="icon-reload" selected="true"
style="padding: 10px;">content2</div>
<div title="Title3">content3</div>
</div>
</body>
</html>
1.1.2 效果图
1.1.3 扩展
实例html代码中
<div id="aa" border="true" >
此行也可写成
<div id="aa"class="easyui-accordion"style="width:300px;height:200px;"fit="false"border="false">
,并且将js代码全部去掉,效果图是一样的。
1.2 参数
1.2.1 容器参数
参数名称
参数类型
描述
默认值
width
数字
可折叠标签的宽度。
auto
height
数字
可折叠标签的高度。
auto
fit
布尔
是否使可折叠标签自动缩放以适应父容器的大小,当为true时width和height参数将失效。
false
border
布尔
是否显示边界线。
true
1.2.2 面板参数
可折叠标签面板继承自面板(panel),许多属性定义在<div />标签里,下面的属性就是如此:
参数名称
参数类型
描述
默认值
selected
布尔
设置可折叠标签中默认展开的标签页
false
2 DateBox(日期框)
2.1 实例
2.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function disable() {
$('#dd').datebox('disable');
}
function enable() {
$('#dd').datebox('enable');
}
/*
将Date/String类型,解析为String类型.
传入String类型,则先解析为Date类型
不正确的Date,返回''
如果时间部分为0,则忽略,只返回日期部分.
*/
function formatDate(v) {
if (v instanceof Date) {
var y = v.getFullYear();
var m = v.getMonth() + 1;
var d = v.getDate();
var h = v.getHours();
var i = v.getMinutes();
var s = v.getSeconds();
var ms = v.getMilliseconds();
if (ms > 0)
return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s
+ '.' + ms;
if (h > 0 || i > 0 || s > 0)
return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;
return y + '-' + m + '-' + d;
}
return '';
}
$( function() {
$('#dd').datebox( {
currentText : '今天',
closeText : '关闭',
disabled : false,
required : true,
missingMessage : '必填',
formatter : formatDate
});
});
</script>
</head>
<body>
<h1>DateBox</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick=
disable();
>disable</a>
<a href="#" onclick=
enable();
>enable</a></div>
<input id="dd"></input>
</body>
</html>
2.1.2 效果图
2.2 参数
属性名
类型
描述
默认值
currentText
字符串
为当前日期按钮显示的文本
Today
closeText
字符串
关闭按钮显示的文本
Close
disabled
布尔
如果为true则禁用输入框
false
required
布尔
定义输入框是否为必添
false
missingMessage
字符串
当输入框为空时提示的文本
必填
formatter
function
格式化日期的函数,这个函数以’date’为参数,并且返回一个字符串
——
parser
function
分析字符串的函数,这个函数以’date’为参数并返回一个日期
——
2.3 事件
事件名
参数
描述
onSelect
date
当选择一个日期时触发
2.4 方法
方法名
参数
描述
destroy
none
销毁组件
disable
none
禁用输入框.
enable
none
启用输入框
3 ComboBox(组合框)
3.1 实例
3.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function loadData(){
$('#cc').combobox({
url:'combobox_data.json',//该文件内容在下面
valueField:'id',
textField:'text'
});
}
function setValue(){
$('#cc').combobox('setValue','2');
}
function getValue(){
var val = $('#cc').combobox('getValue');
alert(val);
}
function disable(){
$('#cc').combobox('disable');
}
function enable(){
$('#cc').combobox('enable');
}
$( function() {
$('#cc').combobox( {
width:150,
listWidth:150,
listHeight:100,
//valuefield:'value',
//textField:'text',
//url:'combobox_data.json',
editable:false
});
});
</script>
</head>
<body>
<h1>ComboBox</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="loadData()">loadData</a>
<a href="#" onclick="setValue()">setValue</a> <a href="#"
onclick="getValue()">getValue</a> <a href="#" onclick="disable()">disable</a>
<a href="#" onclick="enable()">enable</a></div>
<span>Options:</span>
<select id="cc" name="dept" required="true">
<option value="">==请选择==</option>
<option value="0">苹果</option>
<option value="1">香蕉</option>
<option value="2">鸭梨</option>
<option value="3">西瓜</option>
<option value="4">芒果</option>
</select>
</body>
</html>
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"
}]
3.1.2 效果图
3.2 参数
属性名
类型
描述
默认值
width
数字
组件的宽度
auto
listWidth
数字
下拉列表的宽度
null
listHeight
数字
下拉列表的高度
null
valueField
字符串
基础数据值名称绑定到这个组合框
value
textField
字符串
基础数据的字段的名称绑定到这个组合框
text
editable
布尔
定义是否可以直接到文本域中键入文本
true
url
字符串
加载列表数据的远程URL
null
3.3 事件
事件名
参数
描述
onLoadSuccess
none
当远程数据成功加载时触发
onLoadError
none
当远程数据加载失败时触发
onSelect
record
当用户选择了一个列表项时触发
onChange
newValue, oldValue
当文本域字段的值改变时触发
3.4 方法
方法名
参数
描述
select
value
选择下拉列表中的一项
setValue
param
设定指定值到文本域,参数可以是一个字符串,也可以是一个Javascript对象,如果是对象,必须包含两个属性各对应valueField和TextField属性。
getValue
none
获取字段值
reload
url
请求远程列表数据.
4 Dialog(对话框)
4.1 实例
4.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#dd').dialog({
title:'对话框',
collapsible:true,
minimizable:true,
maximizable:true,
resizable:true,
toolbar:[{
text:'Add',
iconCls:'icon-add',
handler:function(){
alert('add');
}
},'-',{
text:'Save',
iconCls:'icon-save',
handler:function(){
alert('save');
}
}],
buttons:[{
text:'Ok',
iconCls:'icon-ok',
handler:function(){
alert('ok');
}
},{
text:'Cancel',
handler:function(){
$('#dd').dialog('close');
}
}]
});
});
function open1(){
$('#dd').dialog('open');
}
function close1(){
$('#dd').dialog('close');
}
</script>
</head>
<body>
<h1>Dialog</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="open1()">open1</a>
<a href="#" onclick="close1()">close1</a></div>
<div id="dd" icon="icon-save"
style="padding: 5px; width: 400px; height: 200px;">
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
</div>
</body>
</html>
4.1.2 效果图
4.2 参数
属性名
类型
描述
默认值
title
字符串
对话框的标题文本
New Dialog
collapsible
布尔
定义是否显示可折叠按钮
false
minimizable
布尔
定义是否显示最小化按钮
false
maximizable
布尔
定义是否显示最大化按钮
false
resizable
布尔
定义对话框是否可编辑大小
false
toolbar
数组
对话框上的工具条,每个工具条包括:
text,
iconCls,
disabled,
handler
etc.
null
buttons
数组
对话框底部的按钮,每个按钮包括:
text,
iconCls,
handler
etc.
null
4.3 事件
Dialog的事件和窗口(Window)的事件相同。
4.4 方法
Dialog的函数方法和窗口(Window)的相同。
5 Messager(提示框)
5.1 实例
5.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function show1(){
$.messager.show({
title:'My Title',
msg:'Message will be closed after 4 seconds.',
showType:'show'
});
}
function show2(){
$.messager.show({
title:'My Title',
msg:'Message will be closed after 5 seconds.',
timeout:5000,
showType:'slide'
});
}
function show3(){
$.messager.show({
title:'My Title',
msg:'Message never be closed.',
timeout:0,
showType:'fade'
});
}
function alert1(){
$.messager.alert('My Title','Here is a message!');
}
function alert2(){
$.messager.alert('My Title','Here is a error message!','error');
}
function alert3(){
$.messager.alert('My Title','Here is a info message!','info');
}
function alert4(){
$.messager.alert('My Title','Here is a question message!','question');
}
function alert5(){
$.messager.alert('My Title','Here is a warning message!','warning');
}
function confirm1(){
$.messager.confirm('My Title','Are you confirm this?', function(r){
if (r){
alert('confirmed:'+r);
location.href = 'http://www.google.com';
}
});
}
function prompt1(){
$.messager.prompt('My Title', 'Please type something', function(r){
if (r){
alert('you type:'+r);
}
});
}
$(function(){
$.messager.defaults={ok:"确定",cancel:"取消"};
});
</script>
</head>
<body>
<h1>Messager</h1>
<div><a href="javascript:void(0)" onclick="show1()">show</a> |<a
href="#" onclick="show2()">slide</a> |<a href="#" onclick="show3()">fade</a>
|</div>
<div><a href="#" onclick="alert1()">alert</a> |<a href="#"
onclick="alert2()">alert(error)</a> |<a href="#" onclick="alert3()">alert(info)</a>
| <a href="#" onclick="alert4()">alert(question)</a> |<a href="#"
onclick="alert5()">alert(warning)</a></div>
<div><a href="#" onclick="confirm1();">confirm</a></div>
<div><a href="#" onclick="prompt1()">prompt</a></div>
<div style="height: 600px;"></div>
</body>
</html>
5.1.2 效果图
5.2 方法
方法名
参数
描述
$.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):用户点击按钮后的回调函,参数是用户输入的内容。
5.3 扩展
可以通过$.messager.defaults方法自定义alert框的ok按钮和cancel按钮上显示的文字。
名字
类型
描述
默认值
ok
字符串
Ok
按钮上的文本
Ok
cancel
字符串
Cancel
按钮上的文本
Cancel
6 NumberBox(数字框)
6.1 实例
6.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function disable(){
$('#nn').numberbox('disable');
}
function enable(){
$('#nn').numberbox('enable');
}
$(function(){
$('#nn').numberbox({min:5.5,max:20,precision:2});
});
</script>
</head>
<body>
<h1>NumberBox</h1>
<p>The Box can only input number.</p>
<div style="margin-bottom: 10px;"><a href="#" onclick="disable()">disable</a>
<a href="#" onclick="enable()">enable</a></div>
<input id="nn" required="true" />
</body>
</html>
6.1.2 效果图
6.2 参数
选项名
类型
描述
默认值
min
数字
文本框中可允许的最小值
null
max
数字
文本框中可允许的最大值
null
precision
数字
最高可精确到小数点后几位
0
7 ValidateBox(验证框)
7.1 实例
7.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<style type="text/css">
input,textarea {
width: 200px;
border: 1px solid #ccc;
padding: 2px;
}
</style>
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function valid(){
alert($('#dfe').validatebox('isValid'));
}
$(function(){
$.extend($.fn.validatebox.defaults.rules, {
minLength: {
validator: function(value, param){
return value.length >= param[0];
},
message: 'Please enter at least {0} characters.'
}
});
});
</script>
</head>
<body>
<h1>ValidateBox<a href="#0" onclick="valid();">EmailisValid</a></h1>
<div>
<table>
<tr>
<td>Name:</td>
<td><input class="easyui-validatebox" required="true"
validType="length[1,3]"></td>
</tr>
<tr>
<td>Email:</td>
<td><input id="dfe" class="easyui-validatebox"
invalidMessage="email格式错误" validType="email"></td>
</tr>
<tr>
<td>URL:</td>
<td><input class="easyui-validatebox" required="true"
validType="url"></td>
</tr>
<tr>
<td>testr:</td>
<td><input class="easyui-validatebox" validType="minLength[5]"
invalidMessage="至少5个字符"></td>
</tr>
<tr>
<td>Note:</td>
<td><textarea class="easyui-validatebox" required="true"
missingMessage="必填" style="height: 100px;"></textarea></td>
</tr>
</table>
</div>
</body>
</html>
7.1.2 效果图
7.2 参数
属性名
类型
描述
默认值
required
布尔
定义文本域是否为必填项
false
validType
字符串
定义字段的验证类型
url(匹配电子邮件正则表达式规则), email(匹配URL正则表达式规则),length[0,100](允许字符串长度的范围)etc.null
missingMessage
字符串
当文本框为空时提示的文本信息
This field is required.
invalidMessage
字符串
当文本框内容不合法时提示的文本信息
null
7.3 方法
方法名
参数
描述
destroy
none
删除并且销毁组件
validate
none
做验证以确定文本框的内容是否是有效的。
isValid
none
调用验证方法并返回验证结果,true或者false
7.4 扩展
当然也可以自定义验证规则,重写$.fn.validatebox.defaults.rules可以定义一个校验器的功能和无效的显示消息。例如,要定义一个minLength有效的类型:
$.extend($.fn.validatebox.defaults.rules, {
minLength: {
validator: function(value, param){
return value.length >= param[0];
},
message: 'Please enter at least {0} characters.'
}
});定义好以后我们就可以使用了,下面的代码表示输入的最小长度是5个字符:
<input class="easyui-validatebox" validType="minLength[5]">
8 Pagination(分页)
8.1 实例
8.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#pp').pagination({
total:114,
pageSize:15,
pageNumber:2,
pageList:[10,15,20,30,50,100],
loading:false,
showPageList:true,
showRefresh:true,
beforePageText:'第',
afterPageText:'页,共{pages}页',
displayMsg:'{from}-{to}/{total}',
buttons:[{
iconCls:'icon-add',
handler:function(){
alert('add');
}
},{
iconCls:'icon-cut',
handler:function(){
alert('cut');
}
},{
iconCls:'icon-save',
handler:function(){
alert('save');
}
}],
onSelectPage:function(pageNumber, pageSize){
$(this).pagination('loading');
alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
$(this).pagination('loaded');
}
});
});
</script>
</head>
<body>
<h1>Pagination</h1>
<div style="margin: 10px 0;"><a href="#"
onclick="javascript:$('#pp').pagination({loading:false})">loaded</a> <a
href="#" onclick="javascript:$('#pp').pagination({loading:true})">loading</a>
</div>
<div id="pp"
style="width: 500px; background: #efefef; border: 1px solid #ccc;"></div>
</body>
</html>
8.1.2 效果图
8.2 参数
属性名
类型
描述
默认值
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
8.3 事件
事件名
参数
描述
onSelectPage
pageNumber, pageSize
当用户选择一个新页时触发,回调函数包含两个参数:pageNumber: 新页面的页数pageSize:新页面的大小
onBeforeRefresh
ageNumber, pageSize
刷新按钮被点击之前触发,如果返回false则取消刷新操作
onRefresh
ageNumber, pageSize
刷新以后触发
onChangePageSize
ageSize
改变页面大小时触发
9 Window(窗口)
窗口的主要用法和面板(panel)用法差不多
9.1 实例
9.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html style="height:100%;width:100%;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function resize(){
$('#w').window({
title: 'yewen2',
width: 600,
collapsible:false,
minimizable:false,
maximizable:false,
closable:false,
closed: false,
height: 300,
draggable:false,
resizable:false,
shadow:false,
modal:true
});
}
function open1(){
$('#w').window('open');
}
function close1(){
$('#w').window('close');
}
function test(){
$('#test').window('open');
}
</script>
</head>
<body style="height: 100%; width: 100%; overflow: hidden; border: none;">
<h1>Window</h1>
<div><a href="javascript:void(0)" onclick="resize()">resize</a> <a
href="javascript:void(0)" onclick="open1()">open</a> <a
href="javascript:void(0)" onclick="close1()">close</a></div>
<div id="w" class="easyui-window" title="My Window" icon="icon-save"
style="width: 500px; height: 200px; padding: 5px; background: #fafafa;">
<div class="easyui-layout" fit="true">
<div region="center" border="false"
style="padding: 10px; background: #fff; border: 1px solid #ccc;">
jQuery EasyUI framework help you build your web page easily. <br />
<br />
click <a href="#" onclick="test()">here</a> topopup another window.</div>
<div region="south" border="false"
style="text- align: right; height: 30px; line-height: 30px;"><a
class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)"
onclick="resize()">Ok</a> <a class="easyui-linkbutton"
icon="icon-cancel" href="javascript:void(0)" onclick="resize()">Cancel</a>
</div>
</div>
</div>
<div id="test" class="easyui-window" closed="true" modal="true"
title="Test Window" style="width: 300px; height: 100px;"></div>
</body>
</html>
9.1.2 效果图
9.2 参数
大多数的属性和面板(panel)的属性是相同的,下面列出一些Window私有的属性:
属性名
类型
描述
默认值
zIndex
数字
窗口的z-index属性,可以通过这个属性来增加
9000
draggable
布尔
定义窗口是否可被拖动
true
resizable
布尔
定义窗口是否可以被改变大小
true
shadow
布尔
如果设置为true,窗口的阴影也将显示。
true
modal
布尔
定义窗口是否是一个模式窗口。
false
Window也重写了Panel里的一些属性
属性名
类型
描述
默认值
title
字符串
窗口的标题文本
New Window
collapsible
布尔
定义是否显示可折叠定义按钮
true
minimizable
布尔
定义是否显示最小化按钮
true
maximizable
布尔
定义是否显示最大化按钮
true
closable
布尔
定义是否显示关闭按钮
true
9.3 事件
Window的事件和面板(panel)的事件相同
9.4 方法
除了”header”和”body”以外,Window的函数方法和面板(panel)的相同
10 Panel(面板)
10.1 实例
10.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function open1(){
$('#p').panel('open');
}
function close1(){
$('#p').panel('close');
}
function load1(){
$('#p').panel({
href:'tabs_href_test.html'
});
$('#p').panel('open');
}
</script>
</head>
<body style="background: #fafafa;">
<h1>Panel</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="open1()">open</a>
<a href="#" onclick="close1()">close</a> <a href="#" onclick="load1()">load</a>
</div>
<div
style="width: 600px; height: 300px; border: 1px solid red; padding: 5px;">
<div id="p" class="easyui-panel" title="My Title" icon="icon-save"
collapsible="true" minimizable="true" maximizable=true closable="true"
style="width: 500px; height: 150px; padding: 10px; background: #fafafa;">
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
</div>
</div>
</body>
</html>
10.1.2 效果图
10.2 参数
名字
类型
描述
默认值
title
字符串
在面板头部显示的标题文本
null
iconCls
字符串
一个CSS类来显示在面板中的16x16图标
null
width
数字
设置面板的宽度
auto
height
数字
设置面板的高度
auto
left
数字
设置面板左侧位置
null
top
数字
设置面板的顶部位置
null
cls
字符串
给面板添加一个CSS类
null
headerCls
字符串
给面板头部添加一个CSS类
null
bodyCls
字符串
给面板主体添加一个CSS类
null
style
对象
给面板自定义样式
{}
fit
布尔
当设置为true,面板尺寸将适合它的父容器。
false
border
布尔
定义面板的边框
true
doSize
布尔
当设置为true,面板载创建的时候将被调整和重新布局
true
collapsible
布尔
定义是否显示可折叠定义按钮
false
minimizable
布尔
定义是否显示最小化按钮
false
maximizable
布尔
定义是否显示最大化按钮
false
closable
布尔
定义是否显示关闭按钮
false
tools
数组
自定义工具,每个工具可以包含两个属性:iconCls and handler
[]
collapsed
布尔
定义在初始化的时候折叠面板
false
minimized
布尔
定义在初始化的时候最小化面板
false
maximized
布尔
定义在初始化的时候最大化面板
false
closed
布尔
定义在初始化的时候关闭面板
false
href
字符串
一个远程的URL加载数据,然后显示在面板中
null
loadingMessage
字符串
当加载远程数据时,在面板中显示的信息
Loading…
10.3 事件
名字
参数
描述
onLoad
none
当远程数据加载时触发
onBeforeOpen
none
当面板打开之前触发
onOpen
none
当面板打开之后触发
onBeforeClose
none
当面板关闭之前触发
onClose
none
当面板关闭之后触发
onBeforeDestroy
none
当面板销毁之前触发
onDestroy
none
当面板关闭之后触发
onBeforeCollpase
none
当面板折叠之前触发
onCollapse
none
当面板折叠之后触发
onBeforeExpand
none
当面板展开之前触发
onExpand
none
当面板展开之后触发
onResize
width, height
当面板调整大小之后触发width: 新的宽度;height:新的高度
onMove
left,top
当面板移动之后触发left: 新的左侧位置top:新的顶部位置
onMaximize
none
当窗口最大化的时候被触发
onRestore
none
当窗口恢复到原来的大小时被触发
onMinimize
none
当窗口最小化的时候被触发
10.4 方法
名字
参数
描述
options
none
返回设置的属性值
panel
none
返回面板对象
header
none
返回面板头部对象
body
none
返回面板主体对象
setTitle
title
设置面板头部标题
open
forceOpen
当forceOpen设置为true,面板被打开的时候忽略onBeforeOpen回调函数
close
forceClose
当forceClose设置为true,面板被关闭的时候忽略onBeforeClose回调函数
destroy
forceDestroy
当forceDestroy设置为true,面板被销毁的时候忽略onBeforeDestroy回调函数
refresh
none
当设置了href值时,刷新面板来加载远程数据
resize
options
设置面板的大小和布局,这些选项包含以下的属性:width: 新面板的宽度; height:新面板的高度; left:新面板的左侧位置; top:新面板的顶部位置
move
options
移动面板到一个新的位置,这些选项包含以下属性: left: 新面板的左侧位置;top:新面板的顶部位置
11 Tabs(标签)
11.1 实例
11.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
var index = 0;
function addTab(){
index++;
$('#tt').tabs('add',{
title:'New Tab ' + index,
content:'Tab Body ' + index,
closable:true
});
}
</script>
</head>
<body>
<h1>Tabs</h1>
<div>
<a class="easyui-linkbutton" icon="icon-add" href="javascript:void(0)" onclick="addTab()">add tab</a>
</div>
<br/>
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;display:none;">
</div>
<div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;" cache="false" href="tabs_href_test.html"> This is Tab2 width close
button.</div>
<div title="Tab3" icon="icon-reload" closable="true" style="padding:20px;display:none;">
<table id="test" class="easyui-datagrid" fit="true">
<thead>
<tr>
<th field="f1" width="60">field1</th>
<th field="f2" width="60">field2</th>
<th field="f3" width="60">field3</th>
</tr>
</thead>
<tbody>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
</tr>
<tr>
<td>d11</td>
<td>d21</td>
<td>d31</td>
</tr>
</tbody>
</table>
</div>
<div title="Tab4 with iframe" closable="true" style="width:100%;height:100%;display:none;">
<iframe scrolling="yes" frameborder="0" src="http://www.google.com" style="width:100%;height:100%;"></iframe>
</div>
<div title="Tab5 with sub tabs" closable="true" icon="icon-cut" style="padding:10px;display:none;">
<div class="easyui-tabs" fit="true" plain="true" style="height:100px;width:300px;">
<div title="Title1">Content 1</div>
<div title="Title2">Content 2</div>
<div title="Title3">Content 3</div>
</div>
</div>
</div>
</body>
</html>
11.1.2 效果图
11.2 参数
参数名
参数
描述
默认值
width
数字
标签容器的宽度
auto
height
数字
标签容器的高度
auto
idSeed
数字
The base id seed to generate tab panel’s DOM id attribute.
0
plain
布尔
如果为ture标签没有背景图片
false
fit
布尔
如果为ture则设置标签的大小以适应它的容器的父容器
false
border
布尔
如果为true则显示标签容器的边框
true
scrollIncrement
数字
滚动按钮每次被按下时滚动的像素值
100
scrollDuration
数字
每次滚动持续的毫秒数
400
11.3 事件
事件名
参数
描述
onLoad
arguments
当一个AJAX标签加载远程数据完成时被触发,参数和jQuery.ajax成功返回的回调函数相同
onSelect
title
当用户选择一个标签面板时被触发
onClose
title
当用户关闭一个标签面板时被触发
11.4 方法
方法名
参数
描述
resize
none
调整标签容器的大小和布局
add
options
添加新标签面板,可选参数是一个配置对象,详细信息可以查看下面的标签面板属性
close
title
关闭一个标签面板,标题参数表明被关闭的面板
select
title
选择一个标签面板
exists
title
指示特定的标签是否存在
11.5 标签面板属性
属性名
类型
描述
默认值
id
字符串
标签面板的ID属性
null
title
字符串
标签面板的文本标题
content
字符串
标签面板的主体内容
href
字符串
填充标签内容的远程URL地址
null
cache
布尔
如果为true,当设置href时,对标签面板进行缓存
true
icon
字符串
标签面板上标题的图标CSS类
null
closable
布尔
如果为true,标签面板会显示出关闭按钮,点击可以关闭选项卡面板。
false
selected
布尔
如果为true,标签标签面板将被选中
false
width
数字
标签面板的宽度
auto
height
数字
标签面板的高度
auto
12 Tree(树)
12.1 实例
12.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
$('#tt1').tree({
animate:true,
onClick:function(node){
alert('you click '+node.text);
}
});
$('#tt2').tree({
checkbox: true,
url: 'tree_data.json',
onClick:function(node){
alert('you click '+node.text);
}
});
});
function reload(){
$('#tt2').tree('reload');
}
function getChecked(){
var nodes = $('#tt2').tree('getChecked');
var s = '';
for(var i=0; i<nodes.length; i++){
if (s != '') s += ',';
s += nodes[i].text;
}
alert(s);
}
function getSelected(){
var node = $('#tt2').tree('getSelected');
alert(node.text);
}
function collapse(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('collapse',node.target);
}
function expand(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('expand',node.target);
}
function append(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('append',{
parent: node.target,
data:[{
text:'new1'
},{
text:'new2',
state:'closed',
children:[{
text:'subnew1'
},{
text:'subnew2'
}]
}]
});
}
function remove(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('remove', node.target);
}
function isLeaf(){
var node = $('#tt2').tree('getSelected');
var b = $('#tt2').tree('isLeaf', node.target);
alert(b)
}
</script>
</head>
<body>
<h1>Tree</h1>
<p>Create from HTMLmarkup</p>
<ul id="tt1" class="easyui-tree">
<li><span>Folder</span>
<ul>
<li><span>Sub Folder 1</span>
<ul>
<li><span><a href="#">File 11</a></span></li>
<li><span>File 12</span></li>
<li><span>File 13</span></li>
</ul>
</li>
<li><span>File 2</span></li>
<li><span>File 3</span></li>
</ul>
</li>
<li><span>File21</span></li>
</ul>
<hr></hr>
<p>Create from JSON data</p>
<div style="margin: 10px;"><a href="#" onclick="reload()">reload</a>
<a href="#" onclick="getChecked()">getChecked</a> <a href="#"
onclick="getSelected()">getSelected</a> <a href="#"
onclick="collapse()">collapse</a> <a href="#" onclick="expand()">expand</a>
<a href="#" onclick="append()">append</a> <a href="#" onclick="remove()">remove</a>
<a href="#" onclick="isLeaf()">isLeaf</a></div>
<ul id="tt2"></ul>
</body>
</html>
12.1.2 效果图
12.2 参数
选项名
类型
描述
默认值
url
字符串
一个网址retrive远程数据。
null
animate
布尔
当节点展开或折叠是否显示动画效果。
false
checkbox
布尔
是否带复选框
False
12.3 事件
事件名
参数
描述
onClick
node
用户点击一个节点时触发。,该节点参数包含以下属性:
id:节点ID
text:节点的文本
attributes:节点自定义属性
target:点击DOM对象的目标
onDblClick
node
用户双击一个节点时触发,参数同onclick事件
onLoadSuccess
arguments
加载数据成功时触发,参数arguments类似jQuery.ajax.的success函数
onLoadError
arguments
加载数据成功时触发,参数arguments类似jQuery.ajax.的error函数
12.4 方法
方法名
参数
描述
options
none
返回树的所有参数对象
loadData
data
加载树的数据
reload
none
重新加载树的数据
getRoot
none
返回树的root节点
getRoots
none
返回树的所有root节点
getParent
target
返回某个节点的父节点
getChildren
target
返回某个节点的孩子节点
getChecked
none
获取被勾选的节点
getSelected
none
获取选中的节点,并返回它,如果没有节点选择返回null。
isLeaf
target
判断某个节点是否叶子节点
select
target
选择一个节点,目标参数表明该节点的DOM对象。
collapse
target
折叠节点,目标参数表明该节点的DOM对象。
expand
target
展开一个节点,目标参数表明该节点的DOM对象。
collapseAll
none
折叠所有节点
expandAll
none
展开所有节点
append
param
一些子节点追加到父节点。参数有两个属性:
parent: DOM对象,父节点追加。
data:数组,节点数据。
toggle
target
绑定某个节点的展开或者折叠状态,使之不能再改变。
remove
target
删除一个节点和它的子节点,目标参数表明该节点的DOM对象。
update
param
更新指定的节点,参数param包含如下属性:
Target:目标节点;
id,text,iconCls,checked,etc.
13 Layout(布局)
13.1 实例
此例最外层写在了body上,也可以写在某个div上。
13.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
var p = $('body').layout('panel','west').panel({
onCollapse:function(){
alert('collapse');
}
});
setTimeout(function(){
$('body').layout('collapse','east');
},0);
});
</script>
</head>
<body class="easyui-layout">
<div region="north" border="false" style="height:60px;background:#B3DFDA;">north region</div>
<div region="west" split="true" title="West" style="width:150px;padding:10px;">west content</div>
<div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div>
<div region="south" border="false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div region="center" title="Main Title">
</div>
</body>
</html>
13.1.2 效果图
13.2 参数
所有属性都必须定义在布局面板创建的<div/>标记上。
名称
类型
描述
默认值
title
字符串
布局面板的标题文本
null
region
字符串
定义布局面板的位置,该值是下列之一: north, south, east, west, center.
border
布尔
如果为ture则显示布局面板的边框
true
split
布尔
如果为ture则显示分隔栏,用户可以用它来改变布局面板的大小
false
icon
字符串
在面板头部显示图标的CSS
null
href
字符串
从远程地址加载数据的URL
null
13.3 方法
方法名
参数
描述
panel
region
返回某个方位的面板,参数region取值可以是:north,south,east,west,center
collapse
region
收缩某个方位的面板,参数region取值可以是:north,south,east,west
expand
region
展开某个方位的面板,参数region取值可以是:north,south,east,west
14 Datagrid(数据表)
14.1 实例
14.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#test').datagrid({
title:'My Title',
iconCls:'icon-save',
width:800,
height:450,
nowrap: true,
striped: true,
url:'datagrid_data.json',
sortName: 'code',
sortOrder: 'desc',
idField:'code',
frozenColumns:[[
{field:'ck',checkbox:true},
{title:'code',field:'code',width:80,sortable:true}
]],
columns:[[
{title:'Base Information',colspan:3},
{field:'opt',title:'Operation',width:100,align:'center', rowspan:2,
formatter:function(value,rec){
return '<span style="color:red">Edit Delete</span>';
}
}
],[
{field:'name',title:'Name',width:120},
{field:'addr',title:'Address',width:120,rowspan:2,sortable:true},
{field:'col4',title:'Col41',width:150,rowspan:2}
]],
pagination:true,
rownumbers:true,
singleSelect:true,
toolbar:[{
text:'Add',
iconCls:'icon-add',
handler:function(){
alert('add')
}
},{
text:'Cut',
iconCls:'icon-cut',
disabled:true,
handler:function(){
alert('cut')
}
},'-',{
text:'Save',
iconCls:'icon-save',
handler:function(){
alert('save')
}
}]
});
var p = $('#test').datagrid('getPager');
if (p){
$(p).pagination({
onBeforeRefresh:function(){
alert('before refresh');
}
});
}
});
function resize(){
$('#test').datagrid({
title: 'New Title',
striped: true,
width: 650,
queryParams:{
p:'param test',
name:'My Name'
}
});
}
function getSelected(){
var selected = $('#test').datagrid('getSelected');
alert(selected.code+":"+selected.name);
}
function getSelections(){
var ids = [];
var rows = $('#test').datagrid('getSelections');
for(var i=0;i<rows.length;i++){
ids.push(rows[i].code);
}
alert(ids.join(':'))
}
function clearSelections(){
$('#test').datagrid('clearSelections');
}
function selectRow(){
$('#test').datagrid('selectRow',2);
}
function selectRecord(){
$('#test').datagrid('selectRecord','002');
}
function unselectRow(){
$('#test').datagrid('unselectRow',2);
}
</script>
</head>
<body>
<h1>DataGrid</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="resize()">resize</a>
<a href="#" onclick="getSelected()">getSelected</a> <a href="#"
onclick="getSelections()">getSelections</a> <a href="#"
onclick="clearSelections()">clearSelections</a> <a href="#"
onclick="selectRow()">selectRow</a> <a href="#"
onclick="selectRecord()">selectRecord</a> <a href="#"
onclick="unselectRow()">unselectRow</a></div>
<table id="test"></table>
</body>
</html>
14.1.2 效果图
14.2 参数
Name
Type
Description
Default
title
字符串
标题文字
null
iconCls
字符串
一个css类,将提供一个背景图片作为标题图标
null
border
布尔
是否显示面板的边界。
true
width
数字
表格的宽度
auto
height
数字
表格的高度
auto
columns
数组
表格的列的配置对象,详见下面column属性介绍。
null
frozenColumns
数组
与columns属性相通,但这些列将固定在左侧,不得变动。
null
striped
布尔
是否显示斑马线
false
method
字符串
远程数据的获取类型,可取值为post或get
post
nowrap
布尔
是否在一行显示数据
true
idField
字符串
指定哪些字段时标识字段
null
url
字符串
从远程请求数据的地址
null
loadMsg
字符串
当远程加载数据时,现实的等待信息提示
Processing, please wait …
pagination
布尔
是否显示底部分页工具栏
false
rownumbers
布尔
是否显示行号列
false
singleSelect
布尔
是否允许只选择一行
false
fit
布尔
是否允许表格自动缩放,以适应父容器
false
pageNumber
数字
初始化页码
1
pageSize
数字
初始化页面大小
10
pageList
数组
初始化页面大小选择清单
[10,20,30,40,50]
queryParams
对象
当请求远程数据时,发送的额外的参数
{}
sortName
字符串
定义哪一列可以排序
null
sortOrder
字符串
定义列排序的方式,递增(asc)或递减(desc)
asc
editors
对象
定义当编辑某行数据时的编辑器
predefined editors
14.3 Column参数
Name
Type
Description
Default
title
字符串
列标题文字
undefined
field
字符串
列字段名称
undefined
width
数字
列宽度
undefined
rowspan
数字
该列占几行单元格
undefined
colspan
数字
该列占几列单元格
undefined
align
字符串
数据对其方式,可选值有left,right,center
undefined
sortable
布尔
是否允许该列排序
undefined
checkbox
布尔
是否显示选择框
undefined
formatter
函数
包含三个参数:
value: the field value.
rowData: the row record data
rowIndex: the row index.
undefined
editor
string,object
Indicate the edit type. When string indicates the edit type, when object contains two properties:
type: string, the edit type, possible type is: text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree.
options: object, the editor options corresponding to the edit type.
undefined
14.4 事件
Name
Parameters
Description
onLoadSuccess
data
远程数据加载成功时触发
onLoadError
none
远程数据加载失败时触发
onBeforeLoad
data
请求发出去,加载数据前触发。如果返回false,加载数据动作则退出
onClickRow
rowIndex, rowData
当用户点击某行时触发, the parameters contains:
rowIndex: the clicked row index, start with 0
rowData: the record corresponding to the clicked row
onDblClickRow
rowIndex, rowData
当用户双击某行时触发, the parameters contains:
rowIndex: the clicked row index, start with 0
rowData: the record corresponding to the clicked row
onSortColumn
sort, order
当用户排序某列时触发, the parameters contains:
sort: the sort column field name
order: the sort column order
onSelect
rowIndex, rowData
当用户选择某行时触发, the parameters contains:
rowIndex: the selected row index, start with 0
rowData: the record corresponding to the selected row
onUnselect
rowIndex, rowData
当用户取消选择某行时触发, the parameters contains:
rowIndex: the unselected row index, start with 0
rowData: the record corresponding to the unselected row
onBeforeEdit
rowIndex, rowData
当用户开始编辑某行时触发, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row
onAfterEdit
rowIndex, rowData, changes
当用户完成编辑某行时触发, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row
changes: the changed field/value pairs
onCancelEdit
rowIndex, rowData
当用户退出编辑某行时触发, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row
14.5 方法
Name
Parameter
Description
options
none
返回所有参数的对象
getPager
none
返回分页对象
resize
none
调整表格大小
reload
param
重新加载行
fixColumnSize
none
固定列的大小
loadData
param
加载本地数据,旧行将被删除
getData
none
返回已加载的数据
getRows
none
返回当前页的行数
getSelected
none
返回第一次选择的行记录
getSelections
none
返回所有选定行,如果没选择记录,则返回空数组
clearSelections
none
取消所有选择
selectAll
none
选择当前页所有行
selectRow
index
选择某行,行索引以0开始
selectRecord
idValue
通过id值选择一行
unselectRow
index
取消选择某行
beginEdit
index
开始编辑某行
endEdit
index
结束编辑某行
cancelEdit
index
退出编辑某行
refreshRow
index
刷新一行的数据
appendRow
row
添加新行
deleteRow
index
删除一行
getChanges
type
Get changed rows since the last commit. The type parameter indicate which type changed rows, possible value is: inserted,deleted,updated,etc. When the type parameter is not assigned, return all changed rows.
acceptChanges
none
Commits all the changes data since it was loaded or since the last time acceptChanges was called.
rejectChanges
none
Rolls back all the changes data since it was created, or since the last time acceptChanges was called.
目 录
1Accordion(可折叠标签) 2
1.1实例 2
1.2参数 3
2DateBox(日期框) 4
2.1实例 4
2.2参数 6
2.3事件 6
2.4方法 6
3ComboBox(组合框) 7
3.1实例 7
3.2参数 9
3.3事件 9
3.4方法 9
4Dialog(对话框) 10
4.1实例 10
4.2参数 12
4.3事件 12
4.4方法 12
5Messager(提示框) 12
5.1实例 12
5.2方法 15
5.3扩展 16
6NumberBox(数字框) 16
6.1实例 16
6.2参数 17
7ValidateBox(验证框) 18
7.1实例 18
7.2参数 20
7.3方法 20
7.4扩展 20
8Pagination(分页) 20
8.1实例 20
8.2参数 22
8.3事件 23
9Window(窗口) 23
9.1实例 23
9.2参数 25
9.3事件 26
9.4方法 26
10Panel(面板) 26
10.1实例 26
10.2参数 28
10.3事件 29
10.4方法 29
11Tabs(标签) 30
11.1实例 30
11.2参数 32
11.3事件 32
11.4方法 33
11.5标签面板属性 33
12Tree(树) 33
12.1实例 33
12.2参数 36
12.3事件 37
12.4方法 37
13Layout(布局) 38
13.1实例 38
13.2参数 39
13.3方法 39
14Datagrid(数据表) 39
14.1实例 39
14.2参数 43
14.3Column参数 44
14.4事件 45
14.5方法 46
1 Accordion(可折叠标签)
1.1 实例
1.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript">
$( function() {
$('#aa').accordion( {
width : 400,
height : 200,
fit : false
});
});
</script>
</head>
<body>
<div id="aa" border="true" >
<div title="Title1" icon="icon-save" style="overflow: auto; padding: 10px;">
<h3 style="color: #0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Title2" icon="icon-reload" selected="true"
style="padding: 10px;">content2</div>
<div title="Title3">content3</div>
</div>
</body>
</html>
1.1.2 效果图
1.1.3 扩展
实例html代码中
<div id="aa" border="true" >
此行也可写成
<div id="aa"class="easyui-accordion"style="width:300px;height:200px;"fit="false"border="false">
,并且将js代码全部去掉,效果图是一样的。
1.2 参数
1.2.1 容器参数
参数名称
参数类型
描述
默认值
width
数字
可折叠标签的宽度。
auto
height
数字
可折叠标签的高度。
auto
fit
布尔
是否使可折叠标签自动缩放以适应父容器的大小,当为true时width和height参数将失效。
false
border
布尔
是否显示边界线。
true
1.2.2 面板参数
可折叠标签面板继承自面板(panel),许多属性定义在<div />标签里,下面的属性就是如此:
参数名称
参数类型
描述
默认值
selected
布尔
设置可折叠标签中默认展开的标签页
false
2 DateBox(日期框)
2.1 实例
2.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function disable() {
$('#dd').datebox('disable');
}
function enable() {
$('#dd').datebox('enable');
}
/*
将Date/String类型,解析为String类型.
传入String类型,则先解析为Date类型
不正确的Date,返回''
如果时间部分为0,则忽略,只返回日期部分.
*/
function formatDate(v) {
if (v instanceof Date) {
var y = v.getFullYear();
var m = v.getMonth() + 1;
var d = v.getDate();
var h = v.getHours();
var i = v.getMinutes();
var s = v.getSeconds();
var ms = v.getMilliseconds();
if (ms > 0)
return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s
+ '.' + ms;
if (h > 0 || i > 0 || s > 0)
return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;
return y + '-' + m + '-' + d;
}
return '';
}
$( function() {
$('#dd').datebox( {
currentText : '今天',
closeText : '关闭',
disabled : false,
required : true,
missingMessage : '必填',
formatter : formatDate
});
});
</script>
</head>
<body>
<h1>DateBox</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick=
disable();
>disable</a>
<a href="#" onclick=
enable();
>enable</a></div>
<input id="dd"></input>
</body>
</html>
2.1.2 效果图
2.2 参数
属性名
类型
描述
默认值
currentText
字符串
为当前日期按钮显示的文本
Today
closeText
字符串
关闭按钮显示的文本
Close
disabled
布尔
如果为true则禁用输入框
false
required
布尔
定义输入框是否为必添
false
missingMessage
字符串
当输入框为空时提示的文本
必填
formatter
function
格式化日期的函数,这个函数以’date’为参数,并且返回一个字符串
——
parser
function
分析字符串的函数,这个函数以’date’为参数并返回一个日期
——
2.3 事件
事件名
参数
描述
onSelect
date
当选择一个日期时触发
2.4 方法
方法名
参数
描述
destroy
none
销毁组件
disable
none
禁用输入框.
enable
none
启用输入框
3 ComboBox(组合框)
3.1 实例
3.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function loadData(){
$('#cc').combobox({
url:'combobox_data.json',//该文件内容在下面
valueField:'id',
textField:'text'
});
}
function setValue(){
$('#cc').combobox('setValue','2');
}
function getValue(){
var val = $('#cc').combobox('getValue');
alert(val);
}
function disable(){
$('#cc').combobox('disable');
}
function enable(){
$('#cc').combobox('enable');
}
$( function() {
$('#cc').combobox( {
width:150,
listWidth:150,
listHeight:100,
//valuefield:'value',
//textField:'text',
//url:'combobox_data.json',
editable:false
});
});
</script>
</head>
<body>
<h1>ComboBox</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="loadData()">loadData</a>
<a href="#" onclick="setValue()">setValue</a> <a href="#"
onclick="getValue()">getValue</a> <a href="#" onclick="disable()">disable</a>
<a href="#" onclick="enable()">enable</a></div>
<span>Options:</span>
<select id="cc" name="dept" required="true">
<option value="">==请选择==</option>
<option value="0">苹果</option>
<option value="1">香蕉</option>
<option value="2">鸭梨</option>
<option value="3">西瓜</option>
<option value="4">芒果</option>
</select>
</body>
</html>
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"
}]
3.1.2 效果图
3.2 参数
属性名
类型
描述
默认值
width
数字
组件的宽度
auto
listWidth
数字
下拉列表的宽度
null
listHeight
数字
下拉列表的高度
null
valueField
字符串
基础数据值名称绑定到这个组合框
value
textField
字符串
基础数据的字段的名称绑定到这个组合框
text
editable
布尔
定义是否可以直接到文本域中键入文本
true
url
字符串
加载列表数据的远程URL
null
3.3 事件
事件名
参数
描述
onLoadSuccess
none
当远程数据成功加载时触发
onLoadError
none
当远程数据加载失败时触发
onSelect
record
当用户选择了一个列表项时触发
onChange
newValue, oldValue
当文本域字段的值改变时触发
3.4 方法
方法名
参数
描述
select
value
选择下拉列表中的一项
setValue
param
设定指定值到文本域,参数可以是一个字符串,也可以是一个Javascript对象,如果是对象,必须包含两个属性各对应valueField和TextField属性。
getValue
none
获取字段值
reload
url
请求远程列表数据.
4 Dialog(对话框)
4.1 实例
4.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#dd').dialog({
title:'对话框',
collapsible:true,
minimizable:true,
maximizable:true,
resizable:true,
toolbar:[{
text:'Add',
iconCls:'icon-add',
handler:function(){
alert('add');
}
},'-',{
text:'Save',
iconCls:'icon-save',
handler:function(){
alert('save');
}
}],
buttons:[{
text:'Ok',
iconCls:'icon-ok',
handler:function(){
alert('ok');
}
},{
text:'Cancel',
handler:function(){
$('#dd').dialog('close');
}
}]
});
});
function open1(){
$('#dd').dialog('open');
}
function close1(){
$('#dd').dialog('close');
}
</script>
</head>
<body>
<h1>Dialog</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="open1()">open1</a>
<a href="#" onclick="close1()">close1</a></div>
<div id="dd" icon="icon-save"
style="padding: 5px; width: 400px; height: 200px;">
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
</div>
</body>
</html>
4.1.2 效果图
4.2 参数
属性名
类型
描述
默认值
title
字符串
对话框的标题文本
New Dialog
collapsible
布尔
定义是否显示可折叠按钮
false
minimizable
布尔
定义是否显示最小化按钮
false
maximizable
布尔
定义是否显示最大化按钮
false
resizable
布尔
定义对话框是否可编辑大小
false
toolbar
数组
对话框上的工具条,每个工具条包括:
text,
iconCls,
disabled,
handler
etc.
null
buttons
数组
对话框底部的按钮,每个按钮包括:
text,
iconCls,
handler
etc.
null
4.3 事件
Dialog的事件和窗口(Window)的事件相同。
4.4 方法
Dialog的函数方法和窗口(Window)的相同。
5 Messager(提示框)
5.1 实例
5.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function show1(){
$.messager.show({
title:'My Title',
msg:'Message will be closed after 4 seconds.',
showType:'show'
});
}
function show2(){
$.messager.show({
title:'My Title',
msg:'Message will be closed after 5 seconds.',
timeout:5000,
showType:'slide'
});
}
function show3(){
$.messager.show({
title:'My Title',
msg:'Message never be closed.',
timeout:0,
showType:'fade'
});
}
function alert1(){
$.messager.alert('My Title','Here is a message!');
}
function alert2(){
$.messager.alert('My Title','Here is a error message!','error');
}
function alert3(){
$.messager.alert('My Title','Here is a info message!','info');
}
function alert4(){
$.messager.alert('My Title','Here is a question message!','question');
}
function alert5(){
$.messager.alert('My Title','Here is a warning message!','warning');
}
function confirm1(){
$.messager.confirm('My Title','Are you confirm this?', function(r){
if (r){
alert('confirmed:'+r);
location.href = 'http://www.google.com';
}
});
}
function prompt1(){
$.messager.prompt('My Title', 'Please type something', function(r){
if (r){
alert('you type:'+r);
}
});
}
$(function(){
$.messager.defaults={ok:"确定",cancel:"取消"};
});
</script>
</head>
<body>
<h1>Messager</h1>
<div><a href="javascript:void(0)" onclick="show1()">show</a> |<a
href="#" onclick="show2()">slide</a> |<a href="#" onclick="show3()">fade</a>
|</div>
<div><a href="#" onclick="alert1()">alert</a> |<a href="#"
onclick="alert2()">alert(error)</a> |<a href="#" onclick="alert3()">alert(info)</a>
| <a href="#" onclick="alert4()">alert(question)</a> |<a href="#"
onclick="alert5()">alert(warning)</a></div>
<div><a href="#" onclick="confirm1();">confirm</a></div>
<div><a href="#" onclick="prompt1()">prompt</a></div>
<div style="height: 600px;"></div>
</body>
</html>
5.1.2 效果图
5.2 方法
方法名
参数
描述
$.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):用户点击按钮后的回调函,参数是用户输入的内容。
5.3 扩展
可以通过$.messager.defaults方法自定义alert框的ok按钮和cancel按钮上显示的文字。
名字
类型
描述
默认值
ok
字符串
Ok
按钮上的文本
Ok
cancel
字符串
Cancel
按钮上的文本
Cancel
6 NumberBox(数字框)
6.1 实例
6.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function disable(){
$('#nn').numberbox('disable');
}
function enable(){
$('#nn').numberbox('enable');
}
$(function(){
$('#nn').numberbox({min:5.5,max:20,precision:2});
});
</script>
</head>
<body>
<h1>NumberBox</h1>
<p>The Box can only input number.</p>
<div style="margin-bottom: 10px;"><a href="#" onclick="disable()">disable</a>
<a href="#" onclick="enable()">enable</a></div>
<input id="nn" required="true" />
</body>
</html>
6.1.2 效果图
6.2 参数
选项名
类型
描述
默认值
min
数字
文本框中可允许的最小值
null
max
数字
文本框中可允许的最大值
null
precision
数字
最高可精确到小数点后几位
0
7 ValidateBox(验证框)
7.1 实例
7.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<style type="text/css">
input,textarea {
width: 200px;
border: 1px solid #ccc;
padding: 2px;
}
</style>
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function valid(){
alert($('#dfe').validatebox('isValid'));
}
$(function(){
$.extend($.fn.validatebox.defaults.rules, {
minLength: {
validator: function(value, param){
return value.length >= param[0];
},
message: 'Please enter at least {0} characters.'
}
});
});
</script>
</head>
<body>
<h1>ValidateBox<a href="#0" onclick="valid();">EmailisValid</a></h1>
<div>
<table>
<tr>
<td>Name:</td>
<td><input class="easyui-validatebox" required="true"
validType="length[1,3]"></td>
</tr>
<tr>
<td>Email:</td>
<td><input id="dfe" class="easyui-validatebox"
invalidMessage="email格式错误" validType="email"></td>
</tr>
<tr>
<td>URL:</td>
<td><input class="easyui-validatebox" required="true"
validType="url"></td>
</tr>
<tr>
<td>testr:</td>
<td><input class="easyui-validatebox" validType="minLength[5]"
invalidMessage="至少5个字符"></td>
</tr>
<tr>
<td>Note:</td>
<td><textarea class="easyui-validatebox" required="true"
missingMessage="必填" style="height: 100px;"></textarea></td>
</tr>
</table>
</div>
</body>
</html>
7.1.2 效果图
7.2 参数
属性名
类型
描述
默认值
required
布尔
定义文本域是否为必填项
false
validType
字符串
定义字段的验证类型
url(匹配电子邮件正则表达式规则), email(匹配URL正则表达式规则),length[0,100](允许字符串长度的范围)etc.null
missingMessage
字符串
当文本框为空时提示的文本信息
This field is required.
invalidMessage
字符串
当文本框内容不合法时提示的文本信息
null
7.3 方法
方法名
参数
描述
destroy
none
删除并且销毁组件
validate
none
做验证以确定文本框的内容是否是有效的。
isValid
none
调用验证方法并返回验证结果,true或者false
7.4 扩展
当然也可以自定义验证规则,重写$.fn.validatebox.defaults.rules可以定义一个校验器的功能和无效的显示消息。例如,要定义一个minLength有效的类型:
$.extend($.fn.validatebox.defaults.rules, {
minLength: {
validator: function(value, param){
return value.length >= param[0];
},
message: 'Please enter at least {0} characters.'
}
});定义好以后我们就可以使用了,下面的代码表示输入的最小长度是5个字符:
<input class="easyui-validatebox" validType="minLength[5]">
8 Pagination(分页)
8.1 实例
8.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#pp').pagination({
total:114,
pageSize:15,
pageNumber:2,
pageList:[10,15,20,30,50,100],
loading:false,
showPageList:true,
showRefresh:true,
beforePageText:'第',
afterPageText:'页,共{pages}页',
displayMsg:'{from}-{to}/{total}',
buttons:[{
iconCls:'icon-add',
handler:function(){
alert('add');
}
},{
iconCls:'icon-cut',
handler:function(){
alert('cut');
}
},{
iconCls:'icon-save',
handler:function(){
alert('save');
}
}],
onSelectPage:function(pageNumber, pageSize){
$(this).pagination('loading');
alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
$(this).pagination('loaded');
}
});
});
</script>
</head>
<body>
<h1>Pagination</h1>
<div style="margin: 10px 0;"><a href="#"
onclick="javascript:$('#pp').pagination({loading:false})">loaded</a> <a
href="#" onclick="javascript:$('#pp').pagination({loading:true})">loading</a>
</div>
<div id="pp"
style="width: 500px; background: #efefef; border: 1px solid #ccc;"></div>
</body>
</html>
8.1.2 效果图
8.2 参数
属性名
类型
描述
默认值
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
8.3 事件
事件名
参数
描述
onSelectPage
pageNumber, pageSize
当用户选择一个新页时触发,回调函数包含两个参数:pageNumber: 新页面的页数pageSize:新页面的大小
onBeforeRefresh
ageNumber, pageSize
刷新按钮被点击之前触发,如果返回false则取消刷新操作
onRefresh
ageNumber, pageSize
刷新以后触发
onChangePageSize
ageSize
改变页面大小时触发
9 Window(窗口)
窗口的主要用法和面板(panel)用法差不多
9.1 实例
9.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html style="height:100%;width:100%;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function resize(){
$('#w').window({
title: 'yewen2',
width: 600,
collapsible:false,
minimizable:false,
maximizable:false,
closable:false,
closed: false,
height: 300,
draggable:false,
resizable:false,
shadow:false,
modal:true
});
}
function open1(){
$('#w').window('open');
}
function close1(){
$('#w').window('close');
}
function test(){
$('#test').window('open');
}
</script>
</head>
<body style="height: 100%; width: 100%; overflow: hidden; border: none;">
<h1>Window</h1>
<div><a href="javascript:void(0)" onclick="resize()">resize</a> <a
href="javascript:void(0)" onclick="open1()">open</a> <a
href="javascript:void(0)" onclick="close1()">close</a></div>
<div id="w" class="easyui-window" title="My Window" icon="icon-save"
style="width: 500px; height: 200px; padding: 5px; background: #fafafa;">
<div class="easyui-layout" fit="true">
<div region="center" border="false"
style="padding: 10px; background: #fff; border: 1px solid #ccc;">
jQuery EasyUI framework help you build your web page easily. <br />
<br />
click <a href="#" onclick="test()">here</a> topopup another window.</div>
<div region="south" border="false"
style="text- align: right; height: 30px; line-height: 30px;"><a
class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)"
onclick="resize()">Ok</a> <a class="easyui-linkbutton"
icon="icon-cancel" href="javascript:void(0)" onclick="resize()">Cancel</a>
</div>
</div>
</div>
<div id="test" class="easyui-window" closed="true" modal="true"
title="Test Window" style="width: 300px; height: 100px;"></div>
</body>
</html>
9.1.2 效果图
9.2 参数
大多数的属性和面板(panel)的属性是相同的,下面列出一些Window私有的属性:
属性名
类型
描述
默认值
zIndex
数字
窗口的z-index属性,可以通过这个属性来增加
9000
draggable
布尔
定义窗口是否可被拖动
true
resizable
布尔
定义窗口是否可以被改变大小
true
shadow
布尔
如果设置为true,窗口的阴影也将显示。
true
modal
布尔
定义窗口是否是一个模式窗口。
false
Window也重写了Panel里的一些属性
属性名
类型
描述
默认值
title
字符串
窗口的标题文本
New Window
collapsible
布尔
定义是否显示可折叠定义按钮
true
minimizable
布尔
定义是否显示最小化按钮
true
maximizable
布尔
定义是否显示最大化按钮
true
closable
布尔
定义是否显示关闭按钮
true
9.3 事件
Window的事件和面板(panel)的事件相同
9.4 方法
除了”header”和”body”以外,Window的函数方法和面板(panel)的相同
10 Panel(面板)
10.1 实例
10.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function open1(){
$('#p').panel('open');
}
function close1(){
$('#p').panel('close');
}
function load1(){
$('#p').panel({
href:'tabs_href_test.html'
});
$('#p').panel('open');
}
</script>
</head>
<body style="background: #fafafa;">
<h1>Panel</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="open1()">open</a>
<a href="#" onclick="close1()">close</a> <a href="#" onclick="load1()">load</a>
</div>
<div
style="width: 600px; height: 300px; border: 1px solid red; padding: 5px;">
<div id="p" class="easyui-panel" title="My Title" icon="icon-save"
collapsible="true" minimizable="true" maximizable=true closable="true"
style="width: 500px; height: 150px; padding: 10px; background: #fafafa;">
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
</div>
</div>
</body>
</html>
10.1.2 效果图
10.2 参数
名字
类型
描述
默认值
title
字符串
在面板头部显示的标题文本
null
iconCls
字符串
一个CSS类来显示在面板中的16x16图标
null
width
数字
设置面板的宽度
auto
height
数字
设置面板的高度
auto
left
数字
设置面板左侧位置
null
top
数字
设置面板的顶部位置
null
cls
字符串
给面板添加一个CSS类
null
headerCls
字符串
给面板头部添加一个CSS类
null
bodyCls
字符串
给面板主体添加一个CSS类
null
style
对象
给面板自定义样式
{}
fit
布尔
当设置为true,面板尺寸将适合它的父容器。
false
border
布尔
定义面板的边框
true
doSize
布尔
当设置为true,面板载创建的时候将被调整和重新布局
true
collapsible
布尔
定义是否显示可折叠定义按钮
false
minimizable
布尔
定义是否显示最小化按钮
false
maximizable
布尔
定义是否显示最大化按钮
false
closable
布尔
定义是否显示关闭按钮
false
tools
数组
自定义工具,每个工具可以包含两个属性:iconCls and handler
[]
collapsed
布尔
定义在初始化的时候折叠面板
false
minimized
布尔
定义在初始化的时候最小化面板
false
maximized
布尔
定义在初始化的时候最大化面板
false
closed
布尔
定义在初始化的时候关闭面板
false
href
字符串
一个远程的URL加载数据,然后显示在面板中
null
loadingMessage
字符串
当加载远程数据时,在面板中显示的信息
Loading…
10.3 事件
名字
参数
描述
onLoad
none
当远程数据加载时触发
onBeforeOpen
none
当面板打开之前触发
onOpen
none
当面板打开之后触发
onBeforeClose
none
当面板关闭之前触发
onClose
none
当面板关闭之后触发
onBeforeDestroy
none
当面板销毁之前触发
onDestroy
none
当面板关闭之后触发
onBeforeCollpase
none
当面板折叠之前触发
onCollapse
none
当面板折叠之后触发
onBeforeExpand
none
当面板展开之前触发
onExpand
none
当面板展开之后触发
onResize
width, height
当面板调整大小之后触发width: 新的宽度;height:新的高度
onMove
left,top
当面板移动之后触发left: 新的左侧位置top:新的顶部位置
onMaximize
none
当窗口最大化的时候被触发
onRestore
none
当窗口恢复到原来的大小时被触发
onMinimize
none
当窗口最小化的时候被触发
10.4 方法
名字
参数
描述
options
none
返回设置的属性值
panel
none
返回面板对象
header
none
返回面板头部对象
body
none
返回面板主体对象
setTitle
title
设置面板头部标题
open
forceOpen
当forceOpen设置为true,面板被打开的时候忽略onBeforeOpen回调函数
close
forceClose
当forceClose设置为true,面板被关闭的时候忽略onBeforeClose回调函数
destroy
forceDestroy
当forceDestroy设置为true,面板被销毁的时候忽略onBeforeDestroy回调函数
refresh
none
当设置了href值时,刷新面板来加载远程数据
resize
options
设置面板的大小和布局,这些选项包含以下的属性:width: 新面板的宽度; height:新面板的高度; left:新面板的左侧位置; top:新面板的顶部位置
move
options
移动面板到一个新的位置,这些选项包含以下属性: left: 新面板的左侧位置;top:新面板的顶部位置
11 Tabs(标签)
11.1 实例
11.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
var index = 0;
function addTab(){
index++;
$('#tt').tabs('add',{
title:'New Tab ' + index,
content:'Tab Body ' + index,
closable:true
});
}
</script>
</head>
<body>
<h1>Tabs</h1>
<div>
<a class="easyui-linkbutton" icon="icon-add" href="javascript:void(0)" onclick="addTab()">add tab</a>
</div>
<br/>
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;display:none;">
</div>
<div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;" cache="false" href="tabs_href_test.html"> This is Tab2 width close
button.</div>
<div title="Tab3" icon="icon-reload" closable="true" style="padding:20px;display:none;">
<table id="test" class="easyui-datagrid" fit="true">
<thead>
<tr>
<th field="f1" width="60">field1</th>
<th field="f2" width="60">field2</th>
<th field="f3" width="60">field3</th>
</tr>
</thead>
<tbody>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
</tr>
<tr>
<td>d11</td>
<td>d21</td>
<td>d31</td>
</tr>
</tbody>
</table>
</div>
<div title="Tab4 with iframe" closable="true" style="width:100%;height:100%;display:none;">
<iframe scrolling="yes" frameborder="0" src="http://www.google.com" style="width:100%;height:100%;"></iframe>
</div>
<div title="Tab5 with sub tabs" closable="true" icon="icon-cut" style="padding:10px;display:none;">
<div class="easyui-tabs" fit="true" plain="true" style="height:100px;width:300px;">
<div title="Title1">Content 1</div>
<div title="Title2">Content 2</div>
<div title="Title3">Content 3</div>
</div>
</div>
</div>
</body>
</html>
11.1.2 效果图
11.2 参数
参数名
参数
描述
默认值
width
数字
标签容器的宽度
auto
height
数字
标签容器的高度
auto
idSeed
数字
The base id seed to generate tab panel’s DOM id attribute.
0
plain
布尔
如果为ture标签没有背景图片
false
fit
布尔
如果为ture则设置标签的大小以适应它的容器的父容器
false
border
布尔
如果为true则显示标签容器的边框
true
scrollIncrement
数字
滚动按钮每次被按下时滚动的像素值
100
scrollDuration
数字
每次滚动持续的毫秒数
400
11.3 事件
事件名
参数
描述
onLoad
arguments
当一个AJAX标签加载远程数据完成时被触发,参数和jQuery.ajax成功返回的回调函数相同
onSelect
title
当用户选择一个标签面板时被触发
onClose
title
当用户关闭一个标签面板时被触发
11.4 方法
方法名
参数
描述
resize
none
调整标签容器的大小和布局
add
options
添加新标签面板,可选参数是一个配置对象,详细信息可以查看下面的标签面板属性
close
title
关闭一个标签面板,标题参数表明被关闭的面板
select
title
选择一个标签面板
exists
title
指示特定的标签是否存在
11.5 标签面板属性
属性名
类型
描述
默认值
id
字符串
标签面板的ID属性
null
title
字符串
标签面板的文本标题
content
字符串
标签面板的主体内容
href
字符串
填充标签内容的远程URL地址
null
cache
布尔
如果为true,当设置href时,对标签面板进行缓存
true
icon
字符串
标签面板上标题的图标CSS类
null
closable
布尔
如果为true,标签面板会显示出关闭按钮,点击可以关闭选项卡面板。
false
selected
布尔
如果为true,标签标签面板将被选中
false
width
数字
标签面板的宽度
auto
height
数字
标签面板的高度
auto
12 Tree(树)
12.1 实例
12.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
$('#tt1').tree({
animate:true,
onClick:function(node){
alert('you click '+node.text);
}
});
$('#tt2').tree({
checkbox: true,
url: 'tree_data.json',
onClick:function(node){
alert('you click '+node.text);
}
});
});
function reload(){
$('#tt2').tree('reload');
}
function getChecked(){
var nodes = $('#tt2').tree('getChecked');
var s = '';
for(var i=0; i<nodes.length; i++){
if (s != '') s += ',';
s += nodes[i].text;
}
alert(s);
}
function getSelected(){
var node = $('#tt2').tree('getSelected');
alert(node.text);
}
function collapse(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('collapse',node.target);
}
function expand(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('expand',node.target);
}
function append(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('append',{
parent: node.target,
data:[{
text:'new1'
},{
text:'new2',
state:'closed',
children:[{
text:'subnew1'
},{
text:'subnew2'
}]
}]
});
}
function remove(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('remove', node.target);
}
function isLeaf(){
var node = $('#tt2').tree('getSelected');
var b = $('#tt2').tree('isLeaf', node.target);
alert(b)
}
</script>
</head>
<body>
<h1>Tree</h1>
<p>Create from HTMLmarkup</p>
<ul id="tt1" class="easyui-tree">
<li><span>Folder</span>
<ul>
<li><span>Sub Folder 1</span>
<ul>
<li><span><a href="#">File 11</a></span></li>
<li><span>File 12</span></li>
<li><span>File 13</span></li>
</ul>
</li>
<li><span>File 2</span></li>
<li><span>File 3</span></li>
</ul>
</li>
<li><span>File21</span></li>
</ul>
<hr></hr>
<p>Create from JSON data</p>
<div style="margin: 10px;"><a href="#" onclick="reload()">reload</a>
<a href="#" onclick="getChecked()">getChecked</a> <a href="#"
onclick="getSelected()">getSelected</a> <a href="#"
onclick="collapse()">collapse</a> <a href="#" onclick="expand()">expand</a>
<a href="#" onclick="append()">append</a> <a href="#" onclick="remove()">remove</a>
<a href="#" onclick="isLeaf()">isLeaf</a></div>
<ul id="tt2"></ul>
</body>
</html>
12.1.2 效果图
12.2 参数
选项名
类型
描述
默认值
url
字符串
一个网址retrive远程数据。
null
animate
布尔
当节点展开或折叠是否显示动画效果。
false
checkbox
布尔
是否带复选框
False
12.3 事件
事件名
参数
描述
onClick
node
用户点击一个节点时触发。,该节点参数包含以下属性:
id:节点ID
text:节点的文本
attributes:节点自定义属性
target:点击DOM对象的目标
onDblClick
node
用户双击一个节点时触发,参数同onclick事件
onLoadSuccess
arguments
加载数据成功时触发,参数arguments类似jQuery.ajax.的success函数
onLoadError
arguments
加载数据成功时触发,参数arguments类似jQuery.ajax.的error函数
12.4 方法
方法名
参数
描述
options
none
返回树的所有参数对象
loadData
data
加载树的数据
reload
none
重新加载树的数据
getRoot
none
返回树的root节点
getRoots
none
返回树的所有root节点
getParent
target
返回某个节点的父节点
getChildren
target
返回某个节点的孩子节点
getChecked
none
获取被勾选的节点
getSelected
none
获取选中的节点,并返回它,如果没有节点选择返回null。
isLeaf
target
判断某个节点是否叶子节点
select
target
选择一个节点,目标参数表明该节点的DOM对象。
collapse
target
折叠节点,目标参数表明该节点的DOM对象。
expand
target
展开一个节点,目标参数表明该节点的DOM对象。
collapseAll
none
折叠所有节点
expandAll
none
展开所有节点
append
param
一些子节点追加到父节点。参数有两个属性:
parent: DOM对象,父节点追加。
data:数组,节点数据。
toggle
target
绑定某个节点的展开或者折叠状态,使之不能再改变。
remove
target
删除一个节点和它的子节点,目标参数表明该节点的DOM对象。
update
param
更新指定的节点,参数param包含如下属性:
Target:目标节点;
id,text,iconCls,checked,etc.
13 Layout(布局)
13.1 实例
此例最外层写在了body上,也可以写在某个div上。
13.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
var p = $('body').layout('panel','west').panel({
onCollapse:function(){
alert('collapse');
}
});
setTimeout(function(){
$('body').layout('collapse','east');
},0);
});
</script>
</head>
<body class="easyui-layout">
<div region="north" border="false" style="height:60px;background:#B3DFDA;">north region</div>
<div region="west" split="true" title="West" style="width:150px;padding:10px;">west content</div>
<div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div>
<div region="south" border="false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div region="center" title="Main Title">
</div>
</body>
</html>
13.1.2 效果图
13.2 参数
所有属性都必须定义在布局面板创建的<div/>标记上。
名称
类型
描述
默认值
title
字符串
布局面板的标题文本
null
region
字符串
定义布局面板的位置,该值是下列之一: north, south, east, west, center.
border
布尔
如果为ture则显示布局面板的边框
true
split
布尔
如果为ture则显示分隔栏,用户可以用它来改变布局面板的大小
false
icon
字符串
在面板头部显示图标的CSS
null
href
字符串
从远程地址加载数据的URL
null
13.3 方法
方法名
参数
描述
panel
region
返回某个方位的面板,参数region取值可以是:north,south,east,west,center
collapse
region
收缩某个方位的面板,参数region取值可以是:north,south,east,west
expand
region
展开某个方位的面板,参数region取值可以是:north,south,east,west
14 Datagrid(数据表)
14.1 实例
14.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#test').datagrid({
title:'My Title',
iconCls:'icon-save',
width:800,
height:450,
nowrap: true,
striped: true,
url:'datagrid_data.json',
sortName: 'code',
sortOrder: 'desc',
idField:'code',
frozenColumns:[[
{field:'ck',checkbox:true},
{title:'code',field:'code',width:80,sortable:true}
]],
columns:[[
{title:'Base Information',colspan:3},
{field:'opt',title:'Operation',width:100,align:'center', rowspan:2,
formatter:function(value,rec){
return '<span style="color:red">Edit Delete</span>';
}
}
],[
{field:'name',title:'Name',width:120},
{field:'addr',title:'Address',width:120,rowspan:2,sortable:true},
{field:'col4',title:'Col41',width:150,rowspan:2}
]],
pagination:true,
rownumbers:true,
singleSelect:true,
toolbar:[{
text:'Add',
iconCls:'icon-add',
handler:function(){
alert('add')
}
},{
text:'Cut',
iconCls:'icon-cut',
disabled:true,
handler:function(){
alert('cut')
}
},'-',{
text:'Save',
iconCls:'icon-save',
handler:function(){
alert('save')
}
}]
});
var p = $('#test').datagrid('getPager');
if (p){
$(p).pagination({
onBeforeRefresh:function(){
alert('before refresh');
}
});
}
});
function resize(){
$('#test').datagrid({
title: 'New Title',
striped: true,
width: 650,
queryParams:{
p:'param test',
name:'My Name'
}
});
}
function getSelected(){
var selected = $('#test').datagrid('getSelected');
alert(selected.code+":"+selected.name);
}
function getSelections(){
var ids = [];
var rows = $('#test').datagrid('getSelections');
for(var i=0;i<rows.length;i++){
ids.push(rows[i].code);
}
alert(ids.join(':'))
}
function clearSelections(){
$('#test').datagrid('clearSelections');
}
function selectRow(){
$('#test').datagrid('selectRow',2);
}
function selectRecord(){
$('#test').datagrid('selectRecord','002');
}
function unselectRow(){
$('#test').datagrid('unselectRow',2);
}
</script>
</head>
<body>
<h1>DataGrid</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="resize()">resize</a>
<a href="#" onclick="getSelected()">getSelected</a> <a href="#"
onclick="getSelections()">getSelections</a> <a href="#"
onclick="clearSelections()">clearSelections</a> <a href="#"
onclick="selectRow()">selectRow</a> <a href="#"
onclick="selectRecord()">selectRecord</a> <a href="#"
onclick="unselectRow()">unselectRow</a></div>
<table id="test"></table>
</body>
</html>
14.1.2 效果图
14.2 参数
Name
Type
Description
Default
title
字符串
标题文字
null
iconCls
字符串
一个css类,将提供一个背景图片作为标题图标
null
border
布尔
是否显示面板的边界。
true
width
数字
表格的宽度
auto
height
数字
表格的高度
auto
columns
数组
表格的列的配置对象,详见下面column属性介绍。
null
frozenColumns
数组
与columns属性相通,但这些列将固定在左侧,不得变动。
null
striped
布尔
是否显示斑马线
false
method
字符串
远程数据的获取类型,可取值为post或get
post
nowrap
布尔
是否在一行显示数据
true
idField
字符串
指定哪些字段时标识字段
null
url
字符串
从远程请求数据的地址
null
loadMsg
字符串
当远程加载数据时,现实的等待信息提示
Processing, please wait …
pagination
布尔
是否显示底部分页工具栏
false
rownumbers
布尔
是否显示行号列
false
singleSelect
布尔
是否允许只选择一行
false
fit
布尔
是否允许表格自动缩放,以适应父容器
false
pageNumber
数字
初始化页码
1
pageSize
数字
初始化页面大小
10
pageList
数组
初始化页面大小选择清单
[10,20,30,40,50]
queryParams
对象
当请求远程数据时,发送的额外的参数
{}
sortName
字符串
定义哪一列可以排序
null
sortOrder
字符串
定义列排序的方式,递增(asc)或递减(desc)
asc
editors
对象
定义当编辑某行数据时的编辑器
predefined editors
14.3 Column参数
Name
Type
Description
Default
title
字符串
列标题文字
undefined
field
字符串
列字段名称
undefined
width
数字
列宽度
undefined
rowspan
数字
该列占几行单元格
undefined
colspan
数字
该列占几列单元格
undefined
align
字符串
数据对其方式,可选值有left,right,center
undefined
sortable
布尔
是否允许该列排序
undefined
checkbox
布尔
是否显示选择框
undefined
formatter
函数
包含三个参数:
value: the field value.
rowData: the row record data
rowIndex: the row index.
undefined
editor
string,object
Indicate the edit type. When string indicates the edit type, when object contains two properties:
type: string, the edit type, possible type is: text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree.
options: object, the editor options corresponding to the edit type.
undefined
14.4 事件
Name
Parameters
Description
onLoadSuccess
data
远程数据加载成功时触发
onLoadError
none
远程数据加载失败时触发
onBeforeLoad
data
请求发出去,加载数据前触发。如果返回false,加载数据动作则退出
onClickRow
rowIndex, rowData
当用户点击某行时触发, the parameters contains:
rowIndex: the clicked row index, start with 0
rowData: the record corresponding to the clicked row
onDblClickRow
rowIndex, rowData
当用户双击某行时触发, the parameters contains:
rowIndex: the clicked row index, start with 0
rowData: the record corresponding to the clicked row
onSortColumn
sort, order
当用户排序某列时触发, the parameters contains:
sort: the sort column field name
order: the sort column order
onSelect
rowIndex, rowData
当用户选择某行时触发, the parameters contains:
rowIndex: the selected row index, start with 0
rowData: the record corresponding to the selected row
onUnselect
rowIndex, rowData
当用户取消选择某行时触发, the parameters contains:
rowIndex: the unselected row index, start with 0
rowData: the record corresponding to the unselected row
onBeforeEdit
rowIndex, rowData
当用户开始编辑某行时触发, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row
onAfterEdit
rowIndex, rowData, changes
当用户完成编辑某行时触发, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row
changes: the changed field/value pairs
onCancelEdit
rowIndex, rowData
当用户退出编辑某行时触发, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row
14.5 方法
Name
Parameter
Description
options
none
返回所有参数的对象
getPager
none
返回分页对象
resize
none
调整表格大小
reload
param
重新加载行
fixColumnSize
none
固定列的大小
loadData
param
加载本地数据,旧行将被删除
getData
none
返回已加载的数据
getRows
none
返回当前页的行数
getSelected
none
返回第一次选择的行记录
getSelections
none
返回所有选定行,如果没选择记录,则返回空数组
clearSelections
none
取消所有选择
selectAll
none
选择当前页所有行
selectRow
index
选择某行,行索引以0开始
selectRecord
idValue
通过id值选择一行
unselectRow
index
取消选择某行
beginEdit
index
开始编辑某行
endEdit
index
结束编辑某行
cancelEdit
index
退出编辑某行
refreshRow
index
刷新一行的数据
appendRow
row
添加新行
deleteRow
index
删除一行
getChanges
type
Get changed rows since the last commit. The type parameter indicate which type changed rows, possible value is: inserted,deleted,updated,etc. When the type parameter is not assigned, return all changed rows.
acceptChanges
none
Commits all the changes data since it was loaded or since the last time acceptChanges was called.
rejectChanges
none
Rolls back all the changes data since it was created, or since the last time acceptChanges was called.
目 录
1Accordion(可折叠标签) 2
1.1实例 2
1.2参数 3
2DateBox(日期框) 4
2.1实例 4
2.2参数 6
2.3事件 6
2.4方法 6
3ComboBox(组合框) 7
3.1实例 7
3.2参数 9
3.3事件 9
3.4方法 9
4Dialog(对话框) 10
4.1实例 10
4.2参数 12
4.3事件 12
4.4方法 12
5Messager(提示框) 12
5.1实例 12
5.2方法 15
5.3扩展 16
6NumberBox(数字框) 16
6.1实例 16
6.2参数 17
7ValidateBox(验证框) 18
7.1实例 18
7.2参数 20
7.3方法 20
7.4扩展 20
8Pagination(分页) 20
8.1实例 20
8.2参数 22
8.3事件 23
9Window(窗口) 23
9.1实例 23
9.2参数 25
9.3事件 26
9.4方法 26
10Panel(面板) 26
10.1实例 26
10.2参数 28
10.3事件 29
10.4方法 29
11Tabs(标签) 30
11.1实例 30
11.2参数 32
11.3事件 32
11.4方法 33
11.5标签面板属性 33
12Tree(树) 33
12.1实例 33
12.2参数 36
12.3事件 37
12.4方法 37
13Layout(布局) 38
13.1实例 38
13.2参数 39
13.3方法 39
14Datagrid(数据表) 39
14.1实例 39
14.2参数 43
14.3Column参数 44
14.4事件 45
14.5方法 46
1 Accordion(可折叠标签)
1.1 实例
1.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript">
$( function() {
$('#aa').accordion( {
width : 400,
height : 200,
fit : false
});
});
</script>
</head>
<body>
<div id="aa" border="true" >
<div title="Title1" icon="icon-save" style="overflow: auto; padding: 10px;">
<h3 style="color: #0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Title2" icon="icon-reload" selected="true"
style="padding: 10px;">content2</div>
<div title="Title3">content3</div>
</div>
</body>
</html>
1.1.2 效果图
1.1.3 扩展
实例html代码中
<div id="aa" border="true" >
此行也可写成
<div id="aa"class="easyui-accordion"style="width:300px;height:200px;"fit="false"border="false">
,并且将js代码全部去掉,效果图是一样的。
1.2 参数
1.2.1 容器参数
参数名称
参数类型
描述
默认值
width
数字
可折叠标签的宽度。
auto
height
数字
可折叠标签的高度。
auto
fit
布尔
是否使可折叠标签自动缩放以适应父容器的大小,当为true时width和height参数将失效。
false
border
布尔
是否显示边界线。
true
1.2.2 面板参数
可折叠标签面板继承自面板(panel),许多属性定义在<div />标签里,下面的属性就是如此:
参数名称
参数类型
描述
默认值
selected
布尔
设置可折叠标签中默认展开的标签页
false
2 DateBox(日期框)
2.1 实例
2.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function disable() {
$('#dd').datebox('disable');
}
function enable() {
$('#dd').datebox('enable');
}
/*
将Date/String类型,解析为String类型.
传入String类型,则先解析为Date类型
不正确的Date,返回''
如果时间部分为0,则忽略,只返回日期部分.
*/
function formatDate(v) {
if (v instanceof Date) {
var y = v.getFullYear();
var m = v.getMonth() + 1;
var d = v.getDate();
var h = v.getHours();
var i = v.getMinutes();
var s = v.getSeconds();
var ms = v.getMilliseconds();
if (ms > 0)
return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s
+ '.' + ms;
if (h > 0 || i > 0 || s > 0)
return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;
return y + '-' + m + '-' + d;
}
return '';
}
$( function() {
$('#dd').datebox( {
currentText : '今天',
closeText : '关闭',
disabled : false,
required : true,
missingMessage : '必填',
formatter : formatDate
});
});
</script>
</head>
<body>
<h1>DateBox</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick=
disable();
>disable</a>
<a href="#" onclick=
enable();
>enable</a></div>
<input id="dd"></input>
</body>
</html>
2.1.2 效果图
2.2 参数
属性名
类型
描述
默认值
currentText
字符串
为当前日期按钮显示的文本
Today
closeText
字符串
关闭按钮显示的文本
Close
disabled
布尔
如果为true则禁用输入框
false
required
布尔
定义输入框是否为必添
false
missingMessage
字符串
当输入框为空时提示的文本
必填
formatter
function
格式化日期的函数,这个函数以’date’为参数,并且返回一个字符串
——
parser
function
分析字符串的函数,这个函数以’date’为参数并返回一个日期
——
2.3 事件
事件名
参数
描述
onSelect
date
当选择一个日期时触发
2.4 方法
方法名
参数
描述
destroy
none
销毁组件
disable
none
禁用输入框.
enable
none
启用输入框
3 ComboBox(组合框)
3.1 实例
3.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function loadData(){
$('#cc').combobox({
url:'combobox_data.json',//该文件内容在下面
valueField:'id',
textField:'text'
});
}
function setValue(){
$('#cc').combobox('setValue','2');
}
function getValue(){
var val = $('#cc').combobox('getValue');
alert(val);
}
function disable(){
$('#cc').combobox('disable');
}
function enable(){
$('#cc').combobox('enable');
}
$( function() {
$('#cc').combobox( {
width:150,
listWidth:150,
listHeight:100,
//valuefield:'value',
//textField:'text',
//url:'combobox_data.json',
editable:false
});
});
</script>
</head>
<body>
<h1>ComboBox</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="loadData()">loadData</a>
<a href="#" onclick="setValue()">setValue</a> <a href="#"
onclick="getValue()">getValue</a> <a href="#" onclick="disable()">disable</a>
<a href="#" onclick="enable()">enable</a></div>
<span>Options:</span>
<select id="cc" name="dept" required="true">
<option value="">==请选择==</option>
<option value="0">苹果</option>
<option value="1">香蕉</option>
<option value="2">鸭梨</option>
<option value="3">西瓜</option>
<option value="4">芒果</option>
</select>
</body>
</html>
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"
}]
3.1.2 效果图
3.2 参数
属性名
类型
描述
默认值
width
数字
组件的宽度
auto
listWidth
数字
下拉列表的宽度
null
listHeight
数字
下拉列表的高度
null
valueField
字符串
基础数据值名称绑定到这个组合框
value
textField
字符串
基础数据的字段的名称绑定到这个组合框
text
editable
布尔
定义是否可以直接到文本域中键入文本
true
url
字符串
加载列表数据的远程URL
null
3.3 事件
事件名
参数
描述
onLoadSuccess
none
当远程数据成功加载时触发
onLoadError
none
当远程数据加载失败时触发
onSelect
record
当用户选择了一个列表项时触发
onChange
newValue, oldValue
当文本域字段的值改变时触发
3.4 方法
方法名
参数
描述
select
value
选择下拉列表中的一项
setValue
param
设定指定值到文本域,参数可以是一个字符串,也可以是一个Javascript对象,如果是对象,必须包含两个属性各对应valueField和TextField属性。
getValue
none
获取字段值
reload
url
请求远程列表数据.
4 Dialog(对话框)
4.1 实例
4.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#dd').dialog({
title:'对话框',
collapsible:true,
minimizable:true,
maximizable:true,
resizable:true,
toolbar:[{
text:'Add',
iconCls:'icon-add',
handler:function(){
alert('add');
}
},'-',{
text:'Save',
iconCls:'icon-save',
handler:function(){
alert('save');
}
}],
buttons:[{
text:'Ok',
iconCls:'icon-ok',
handler:function(){
alert('ok');
}
},{
text:'Cancel',
handler:function(){
$('#dd').dialog('close');
}
}]
});
});
function open1(){
$('#dd').dialog('open');
}
function close1(){
$('#dd').dialog('close');
}
</script>
</head>
<body>
<h1>Dialog</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="open1()">open1</a>
<a href="#" onclick="close1()">close1</a></div>
<div id="dd" icon="icon-save"
style="padding: 5px; width: 400px; height: 200px;">
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
</div>
</body>
</html>
4.1.2 效果图
4.2 参数
属性名
类型
描述
默认值
title
字符串
对话框的标题文本
New Dialog
collapsible
布尔
定义是否显示可折叠按钮
false
minimizable
布尔
定义是否显示最小化按钮
false
maximizable
布尔
定义是否显示最大化按钮
false
resizable
布尔
定义对话框是否可编辑大小
false
toolbar
数组
对话框上的工具条,每个工具条包括:
text,
iconCls,
disabled,
handler
etc.
null
buttons
数组
对话框底部的按钮,每个按钮包括:
text,
iconCls,
handler
etc.
null
4.3 事件
Dialog的事件和窗口(Window)的事件相同。
4.4 方法
Dialog的函数方法和窗口(Window)的相同。
5 Messager(提示框)
5.1 实例
5.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function show1(){
$.messager.show({
title:'My Title',
msg:'Message will be closed after 4 seconds.',
showType:'show'
});
}
function show2(){
$.messager.show({
title:'My Title',
msg:'Message will be closed after 5 seconds.',
timeout:5000,
showType:'slide'
});
}
function show3(){
$.messager.show({
title:'My Title',
msg:'Message never be closed.',
timeout:0,
showType:'fade'
});
}
function alert1(){
$.messager.alert('My Title','Here is a message!');
}
function alert2(){
$.messager.alert('My Title','Here is a error message!','error');
}
function alert3(){
$.messager.alert('My Title','Here is a info message!','info');
}
function alert4(){
$.messager.alert('My Title','Here is a question message!','question');
}
function alert5(){
$.messager.alert('My Title','Here is a warning message!','warning');
}
function confirm1(){
$.messager.confirm('My Title','Are you confirm this?', function(r){
if (r){
alert('confirmed:'+r);
location.href = 'http://www.google.com';
}
});
}
function prompt1(){
$.messager.prompt('My Title', 'Please type something', function(r){
if (r){
alert('you type:'+r);
}
});
}
$(function(){
$.messager.defaults={ok:"确定",cancel:"取消"};
});
</script>
</head>
<body>
<h1>Messager</h1>
<div><a href="javascript:void(0)" onclick="show1()">show</a> |<a
href="#" onclick="show2()">slide</a> |<a href="#" onclick="show3()">fade</a>
|</div>
<div><a href="#" onclick="alert1()">alert</a> |<a href="#"
onclick="alert2()">alert(error)</a> |<a href="#" onclick="alert3()">alert(info)</a>
| <a href="#" onclick="alert4()">alert(question)</a> |<a href="#"
onclick="alert5()">alert(warning)</a></div>
<div><a href="#" onclick="confirm1();">confirm</a></div>
<div><a href="#" onclick="prompt1()">prompt</a></div>
<div style="height: 600px;"></div>
</body>
</html>
5.1.2 效果图
5.2 方法
方法名
参数
描述
$.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):用户点击按钮后的回调函,参数是用户输入的内容。
5.3 扩展
可以通过$.messager.defaults方法自定义alert框的ok按钮和cancel按钮上显示的文字。
名字
类型
描述
默认值
ok
字符串
Ok
按钮上的文本
Ok
cancel
字符串
Cancel
按钮上的文本
Cancel
6 NumberBox(数字框)
6.1 实例
6.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function disable(){
$('#nn').numberbox('disable');
}
function enable(){
$('#nn').numberbox('enable');
}
$(function(){
$('#nn').numberbox({min:5.5,max:20,precision:2});
});
</script>
</head>
<body>
<h1>NumberBox</h1>
<p>The Box can only input number.</p>
<div style="margin-bottom: 10px;"><a href="#" onclick="disable()">disable</a>
<a href="#" onclick="enable()">enable</a></div>
<input id="nn" required="true" />
</body>
</html>
6.1.2 效果图
6.2 参数
选项名
类型
描述
默认值
min
数字
文本框中可允许的最小值
null
max
数字
文本框中可允许的最大值
null
precision
数字
最高可精确到小数点后几位
0
7 ValidateBox(验证框)
7.1 实例
7.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<style type="text/css">
input,textarea {
width: 200px;
border: 1px solid #ccc;
padding: 2px;
}
</style>
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function valid(){
alert($('#dfe').validatebox('isValid'));
}
$(function(){
$.extend($.fn.validatebox.defaults.rules, {
minLength: {
validator: function(value, param){
return value.length >= param[0];
},
message: 'Please enter at least {0} characters.'
}
});
});
</script>
</head>
<body>
<h1>ValidateBox<a href="#0" onclick="valid();">EmailisValid</a></h1>
<div>
<table>
<tr>
<td>Name:</td>
<td><input class="easyui-validatebox" required="true"
validType="length[1,3]"></td>
</tr>
<tr>
<td>Email:</td>
<td><input id="dfe" class="easyui-validatebox"
invalidMessage="email格式错误" validType="email"></td>
</tr>
<tr>
<td>URL:</td>
<td><input class="easyui-validatebox" required="true"
validType="url"></td>
</tr>
<tr>
<td>testr:</td>
<td><input class="easyui-validatebox" validType="minLength[5]"
invalidMessage="至少5个字符"></td>
</tr>
<tr>
<td>Note:</td>
<td><textarea class="easyui-validatebox" required="true"
missingMessage="必填" style="height: 100px;"></textarea></td>
</tr>
</table>
</div>
</body>
</html>
7.1.2 效果图
7.2 参数
属性名
类型
描述
默认值
required
布尔
定义文本域是否为必填项
false
validType
字符串
定义字段的验证类型
url(匹配电子邮件正则表达式规则), email(匹配URL正则表达式规则),length[0,100](允许字符串长度的范围)etc.null
missingMessage
字符串
当文本框为空时提示的文本信息
This field is required.
invalidMessage
字符串
当文本框内容不合法时提示的文本信息
null
7.3 方法
方法名
参数
描述
destroy
none
删除并且销毁组件
validate
none
做验证以确定文本框的内容是否是有效的。
isValid
none
调用验证方法并返回验证结果,true或者false
7.4 扩展
当然也可以自定义验证规则,重写$.fn.validatebox.defaults.rules可以定义一个校验器的功能和无效的显示消息。例如,要定义一个minLength有效的类型:
$.extend($.fn.validatebox.defaults.rules, {
minLength: {
validator: function(value, param){
return value.length >= param[0];
},
message: 'Please enter at least {0} characters.'
}
});定义好以后我们就可以使用了,下面的代码表示输入的最小长度是5个字符:
<input class="easyui-validatebox" validType="minLength[5]">
8 Pagination(分页)
8.1 实例
8.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#pp').pagination({
total:114,
pageSize:15,
pageNumber:2,
pageList:[10,15,20,30,50,100],
loading:false,
showPageList:true,
showRefresh:true,
beforePageText:'第',
afterPageText:'页,共{pages}页',
displayMsg:'{from}-{to}/{total}',
buttons:[{
iconCls:'icon-add',
handler:function(){
alert('add');
}
},{
iconCls:'icon-cut',
handler:function(){
alert('cut');
}
},{
iconCls:'icon-save',
handler:function(){
alert('save');
}
}],
onSelectPage:function(pageNumber, pageSize){
$(this).pagination('loading');
alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
$(this).pagination('loaded');
}
});
});
</script>
</head>
<body>
<h1>Pagination</h1>
<div style="margin: 10px 0;"><a href="#"
onclick="javascript:$('#pp').pagination({loading:false})">loaded</a> <a
href="#" onclick="javascript:$('#pp').pagination({loading:true})">loading</a>
</div>
<div id="pp"
style="width: 500px; background: #efefef; border: 1px solid #ccc;"></div>
</body>
</html>
8.1.2 效果图
8.2 参数
属性名
类型
描述
默认值
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
8.3 事件
事件名
参数
描述
onSelectPage
pageNumber, pageSize
当用户选择一个新页时触发,回调函数包含两个参数:pageNumber: 新页面的页数pageSize:新页面的大小
onBeforeRefresh
ageNumber, pageSize
刷新按钮被点击之前触发,如果返回false则取消刷新操作
onRefresh
ageNumber, pageSize
刷新以后触发
onChangePageSize
ageSize
改变页面大小时触发
9 Window(窗口)
窗口的主要用法和面板(panel)用法差不多
9.1 实例
9.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html style="height:100%;width:100%;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function resize(){
$('#w').window({
title: 'yewen2',
width: 600,
collapsible:false,
minimizable:false,
maximizable:false,
closable:false,
closed: false,
height: 300,
draggable:false,
resizable:false,
shadow:false,
modal:true
});
}
function open1(){
$('#w').window('open');
}
function close1(){
$('#w').window('close');
}
function test(){
$('#test').window('open');
}
</script>
</head>
<body style="height: 100%; width: 100%; overflow: hidden; border: none;">
<h1>Window</h1>
<div><a href="javascript:void(0)" onclick="resize()">resize</a> <a
href="javascript:void(0)" onclick="open1()">open</a> <a
href="javascript:void(0)" onclick="close1()">close</a></div>
<div id="w" class="easyui-window" title="My Window" icon="icon-save"
style="width: 500px; height: 200px; padding: 5px; background: #fafafa;">
<div class="easyui-layout" fit="true">
<div region="center" border="false"
style="padding: 10px; background: #fff; border: 1px solid #ccc;">
jQuery EasyUI framework help you build your web page easily. <br />
<br />
click <a href="#" onclick="test()">here</a> topopup another window.</div>
<div region="south" border="false"
style="text- align: right; height: 30px; line-height: 30px;"><a
class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)"
onclick="resize()">Ok</a> <a class="easyui-linkbutton"
icon="icon-cancel" href="javascript:void(0)" onclick="resize()">Cancel</a>
</div>
</div>
</div>
<div id="test" class="easyui-window" closed="true" modal="true"
title="Test Window" style="width: 300px; height: 100px;"></div>
</body>
</html>
9.1.2 效果图
9.2 参数
大多数的属性和面板(panel)的属性是相同的,下面列出一些Window私有的属性:
属性名
类型
描述
默认值
zIndex
数字
窗口的z-index属性,可以通过这个属性来增加
9000
draggable
布尔
定义窗口是否可被拖动
true
resizable
布尔
定义窗口是否可以被改变大小
true
shadow
布尔
如果设置为true,窗口的阴影也将显示。
true
modal
布尔
定义窗口是否是一个模式窗口。
false
Window也重写了Panel里的一些属性
属性名
类型
描述
默认值
title
字符串
窗口的标题文本
New Window
collapsible
布尔
定义是否显示可折叠定义按钮
true
minimizable
布尔
定义是否显示最小化按钮
true
maximizable
布尔
定义是否显示最大化按钮
true
closable
布尔
定义是否显示关闭按钮
true
9.3 事件
Window的事件和面板(panel)的事件相同
9.4 方法
除了”header”和”body”以外,Window的函数方法和面板(panel)的相同
10 Panel(面板)
10.1 实例
10.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function open1(){
$('#p').panel('open');
}
function close1(){
$('#p').panel('close');
}
function load1(){
$('#p').panel({
href:'tabs_href_test.html'
});
$('#p').panel('open');
}
</script>
</head>
<body style="background: #fafafa;">
<h1>Panel</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="open1()">open</a>
<a href="#" onclick="close1()">close</a> <a href="#" onclick="load1()">load</a>
</div>
<div
style="width: 600px; height: 300px; border: 1px solid red; padding: 5px;">
<div id="p" class="easyui-panel" title="My Title" icon="icon-save"
collapsible="true" minimizable="true" maximizable=true closable="true"
style="width: 500px; height: 150px; padding: 10px; background: #fafafa;">
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
</div>
</div>
</body>
</html>
10.1.2 效果图
10.2 参数
名字
类型
描述
默认值
title
字符串
在面板头部显示的标题文本
null
iconCls
字符串
一个CSS类来显示在面板中的16x16图标
null
width
数字
设置面板的宽度
auto
height
数字
设置面板的高度
auto
left
数字
设置面板左侧位置
null
top
数字
设置面板的顶部位置
null
cls
字符串
给面板添加一个CSS类
null
headerCls
字符串
给面板头部添加一个CSS类
null
bodyCls
字符串
给面板主体添加一个CSS类
null
style
对象
给面板自定义样式
{}
fit
布尔
当设置为true,面板尺寸将适合它的父容器。
false
border
布尔
定义面板的边框
true
doSize
布尔
当设置为true,面板载创建的时候将被调整和重新布局
true
collapsible
布尔
定义是否显示可折叠定义按钮
false
minimizable
布尔
定义是否显示最小化按钮
false
maximizable
布尔
定义是否显示最大化按钮
false
closable
布尔
定义是否显示关闭按钮
false
tools
数组
自定义工具,每个工具可以包含两个属性:iconCls and handler
[]
collapsed
布尔
定义在初始化的时候折叠面板
false
minimized
布尔
定义在初始化的时候最小化面板
false
maximized
布尔
定义在初始化的时候最大化面板
false
closed
布尔
定义在初始化的时候关闭面板
false
href
字符串
一个远程的URL加载数据,然后显示在面板中
null
loadingMessage
字符串
当加载远程数据时,在面板中显示的信息
Loading…
10.3 事件
名字
参数
描述
onLoad
none
当远程数据加载时触发
onBeforeOpen
none
当面板打开之前触发
onOpen
none
当面板打开之后触发
onBeforeClose
none
当面板关闭之前触发
onClose
none
当面板关闭之后触发
onBeforeDestroy
none
当面板销毁之前触发
onDestroy
none
当面板关闭之后触发
onBeforeCollpase
none
当面板折叠之前触发
onCollapse
none
当面板折叠之后触发
onBeforeExpand
none
当面板展开之前触发
onExpand
none
当面板展开之后触发
onResize
width, height
当面板调整大小之后触发width: 新的宽度;height:新的高度
onMove
left,top
当面板移动之后触发left: 新的左侧位置top:新的顶部位置
onMaximize
none
当窗口最大化的时候被触发
onRestore
none
当窗口恢复到原来的大小时被触发
onMinimize
none
当窗口最小化的时候被触发
10.4 方法
名字
参数
描述
options
none
返回设置的属性值
panel
none
返回面板对象
header
none
返回面板头部对象
body
none
返回面板主体对象
setTitle
title
设置面板头部标题
open
forceOpen
当forceOpen设置为true,面板被打开的时候忽略onBeforeOpen回调函数
close
forceClose
当forceClose设置为true,面板被关闭的时候忽略onBeforeClose回调函数
destroy
forceDestroy
当forceDestroy设置为true,面板被销毁的时候忽略onBeforeDestroy回调函数
refresh
none
当设置了href值时,刷新面板来加载远程数据
resize
options
设置面板的大小和布局,这些选项包含以下的属性:width: 新面板的宽度; height:新面板的高度; left:新面板的左侧位置; top:新面板的顶部位置
move
options
移动面板到一个新的位置,这些选项包含以下属性: left: 新面板的左侧位置;top:新面板的顶部位置
11 Tabs(标签)
11.1 实例
11.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
var index = 0;
function addTab(){
index++;
$('#tt').tabs('add',{
title:'New Tab ' + index,
content:'Tab Body ' + index,
closable:true
});
}
</script>
</head>
<body>
<h1>Tabs</h1>
<div>
<a class="easyui-linkbutton" icon="icon-add" href="javascript:void(0)" onclick="addTab()">add tab</a>
</div>
<br/>
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;display:none;">
</div>
<div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;" cache="false" href="tabs_href_test.html"> This is Tab2 width close
button.</div>
<div title="Tab3" icon="icon-reload" closable="true" style="padding:20px;display:none;">
<table id="test" class="easyui-datagrid" fit="true">
<thead>
<tr>
<th field="f1" width="60">field1</th>
<th field="f2" width="60">field2</th>
<th field="f3" width="60">field3</th>
</tr>
</thead>
<tbody>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
</tr>
<tr>
<td>d11</td>
<td>d21</td>
<td>d31</td>
</tr>
</tbody>
</table>
</div>
<div title="Tab4 with iframe" closable="true" style="width:100%;height:100%;display:none;">
<iframe scrolling="yes" frameborder="0" src="http://www.google.com" style="width:100%;height:100%;"></iframe>
</div>
<div title="Tab5 with sub tabs" closable="true" icon="icon-cut" style="padding:10px;display:none;">
<div class="easyui-tabs" fit="true" plain="true" style="height:100px;width:300px;">
<div title="Title1">Content 1</div>
<div title="Title2">Content 2</div>
<div title="Title3">Content 3</div>
</div>
</div>
</div>
</body>
</html>
11.1.2 效果图
11.2 参数
参数名
参数
描述
默认值
width
数字
标签容器的宽度
auto
height
数字
标签容器的高度
auto
idSeed
数字
The base id seed to generate tab panel’s DOM id attribute.
0
plain
布尔
如果为ture标签没有背景图片
false
fit
布尔
如果为ture则设置标签的大小以适应它的容器的父容器
false
border
布尔
如果为true则显示标签容器的边框
true
scrollIncrement
数字
滚动按钮每次被按下时滚动的像素值
100
scrollDuration
数字
每次滚动持续的毫秒数
400
11.3 事件
事件名
参数
描述
onLoad
arguments
当一个AJAX标签加载远程数据完成时被触发,参数和jQuery.ajax成功返回的回调函数相同
onSelect
title
当用户选择一个标签面板时被触发
onClose
title
当用户关闭一个标签面板时被触发
11.4 方法
方法名
参数
描述
resize
none
调整标签容器的大小和布局
add
options
添加新标签面板,可选参数是一个配置对象,详细信息可以查看下面的标签面板属性
close
title
关闭一个标签面板,标题参数表明被关闭的面板
select
title
选择一个标签面板
exists
title
指示特定的标签是否存在
11.5 标签面板属性
属性名
类型
描述
默认值
id
字符串
标签面板的ID属性
null
title
字符串
标签面板的文本标题
content
字符串
标签面板的主体内容
href
字符串
填充标签内容的远程URL地址
null
cache
布尔
如果为true,当设置href时,对标签面板进行缓存
true
icon
字符串
标签面板上标题的图标CSS类
null
closable
布尔
如果为true,标签面板会显示出关闭按钮,点击可以关闭选项卡面板。
false
selected
布尔
如果为true,标签标签面板将被选中
false
width
数字
标签面板的宽度
auto
height
数字
标签面板的高度
auto
12 Tree(树)
12.1 实例
12.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
$('#tt1').tree({
animate:true,
onClick:function(node){
alert('you click '+node.text);
}
});
$('#tt2').tree({
checkbox: true,
url: 'tree_data.json',
onClick:function(node){
alert('you click '+node.text);
}
});
});
function reload(){
$('#tt2').tree('reload');
}
function getChecked(){
var nodes = $('#tt2').tree('getChecked');
var s = '';
for(var i=0; i<nodes.length; i++){
if (s != '') s += ',';
s += nodes[i].text;
}
alert(s);
}
function getSelected(){
var node = $('#tt2').tree('getSelected');
alert(node.text);
}
function collapse(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('collapse',node.target);
}
function expand(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('expand',node.target);
}
function append(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('append',{
parent: node.target,
data:[{
text:'new1'
},{
text:'new2',
state:'closed',
children:[{
text:'subnew1'
},{
text:'subnew2'
}]
}]
});
}
function remove(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('remove', node.target);
}
function isLeaf(){
var node = $('#tt2').tree('getSelected');
var b = $('#tt2').tree('isLeaf', node.target);
alert(b)
}
</script>
</head>
<body>
<h1>Tree</h1>
<p>Create from HTMLmarkup</p>
<ul id="tt1" class="easyui-tree">
<li><span>Folder</span>
<ul>
<li><span>Sub Folder 1</span>
<ul>
<li><span><a href="#">File 11</a></span></li>
<li><span>File 12</span></li>
<li><span>File 13</span></li>
</ul>
</li>
<li><span>File 2</span></li>
<li><span>File 3</span></li>
</ul>
</li>
<li><span>File21</span></li>
</ul>
<hr></hr>
<p>Create from JSON data</p>
<div style="margin: 10px;"><a href="#" onclick="reload()">reload</a>
<a href="#" onclick="getChecked()">getChecked</a> <a href="#"
onclick="getSelected()">getSelected</a> <a href="#"
onclick="collapse()">collapse</a> <a href="#" onclick="expand()">expand</a>
<a href="#" onclick="append()">append</a> <a href="#" onclick="remove()">remove</a>
<a href="#" onclick="isLeaf()">isLeaf</a></div>
<ul id="tt2"></ul>
</body>
</html>
12.1.2 效果图
12.2 参数
选项名
类型
描述
默认值
url
字符串
一个网址retrive远程数据。
null
animate
布尔
当节点展开或折叠是否显示动画效果。
false
checkbox
布尔
是否带复选框
False
12.3 事件
事件名
参数
描述
onClick
node
用户点击一个节点时触发。,该节点参数包含以下属性:
id:节点ID
text:节点的文本
attributes:节点自定义属性
target:点击DOM对象的目标
onDblClick
node
用户双击一个节点时触发,参数同onclick事件
onLoadSuccess
arguments
加载数据成功时触发,参数arguments类似jQuery.ajax.的success函数
onLoadError
arguments
加载数据成功时触发,参数arguments类似jQuery.ajax.的error函数
12.4 方法
方法名
参数
描述
options
none
返回树的所有参数对象
loadData
data
加载树的数据
reload
none
重新加载树的数据
getRoot
none
返回树的root节点
getRoots
none
返回树的所有root节点
getParent
target
返回某个节点的父节点
getChildren
target
返回某个节点的孩子节点
getChecked
none
获取被勾选的节点
getSelected
none
获取选中的节点,并返回它,如果没有节点选择返回null。
isLeaf
target
判断某个节点是否叶子节点
select
target
选择一个节点,目标参数表明该节点的DOM对象。
collapse
target
折叠节点,目标参数表明该节点的DOM对象。
expand
target
展开一个节点,目标参数表明该节点的DOM对象。
collapseAll
none
折叠所有节点
expandAll
none
展开所有节点
append
param
一些子节点追加到父节点。参数有两个属性:
parent: DOM对象,父节点追加。
data:数组,节点数据。
toggle
target
绑定某个节点的展开或者折叠状态,使之不能再改变。
remove
target
删除一个节点和它的子节点,目标参数表明该节点的DOM对象。
update
param
更新指定的节点,参数param包含如下属性:
Target:目标节点;
id,text,iconCls,checked,etc.
13 Layout(布局)
13.1 实例
此例最外层写在了body上,也可以写在某个div上。
13.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
var p = $('body').layout('panel','west').panel({
onCollapse:function(){
alert('collapse');
}
});
setTimeout(function(){
$('body').layout('collapse','east');
},0);
});
</script>
</head>
<body class="easyui-layout">
<div region="north" border="false" style="height:60px;background:#B3DFDA;">north region</div>
<div region="west" split="true" title="West" style="width:150px;padding:10px;">west content</div>
<div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div>
<div region="south" border="false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div region="center" title="Main Title">
</div>
</body>
</html>
13.1.2 效果图
13.2 参数
所有属性都必须定义在布局面板创建的<div/>标记上。
名称
类型
描述
默认值
title
字符串
布局面板的标题文本
null
region
字符串
定义布局面板的位置,该值是下列之一: north, south, east, west, center.
border
布尔
如果为ture则显示布局面板的边框
true
split
布尔
如果为ture则显示分隔栏,用户可以用它来改变布局面板的大小
false
icon
字符串
在面板头部显示图标的CSS
null
href
字符串
从远程地址加载数据的URL
null
13.3 方法
方法名
参数
描述
panel
region
返回某个方位的面板,参数region取值可以是:north,south,east,west,center
collapse
region
收缩某个方位的面板,参数region取值可以是:north,south,east,west
expand
region
展开某个方位的面板,参数region取值可以是:north,south,east,west
14 Datagrid(数据表)
14.1 实例
14.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#test').datagrid({
title:'My Title',
iconCls:'icon-save',
width:800,
height:450,
nowrap: true,
striped: true,
url:'datagrid_data.json',
sortName: 'code',
sortOrder: 'desc',
idField:'code',
frozenColumns:[[
{field:'ck',checkbox:true},
{title:'code',field:'code',width:80,sortable:true}
]],
columns:[[
{title:'Base Information',colspan:3},
{field:'opt',title:'Operation',width:100,align:'center', rowspan:2,
formatter:function(value,rec){
return '<span style="color:red">Edit Delete</span>';
}
}
],[
{field:'name',title:'Name',width:120},
{field:'addr',title:'Address',width:120,rowspan:2,sortable:true},
{field:'col4',title:'Col41',width:150,rowspan:2}
]],
pagination:true,
rownumbers:true,
singleSelect:true,
toolbar:[{
text:'Add',
iconCls:'icon-add',
handler:function(){
alert('add')
}
},{
text:'Cut',
iconCls:'icon-cut',
disabled:true,
handler:function(){
alert('cut')
}
},'-',{
text:'Save',
iconCls:'icon-save',
handler:function(){
alert('save')
}
}]
});
var p = $('#test').datagrid('getPager');
if (p){
$(p).pagination({
onBeforeRefresh:function(){
alert('before refresh');
}
});
}
});
function resize(){
$('#test').datagrid({
title: 'New Title',
striped: true,
width: 650,
queryParams:{
p:'param test',
name:'My Name'
}
});
}
function getSelected(){
var selected = $('#test').datagrid('getSelected');
alert(selected.code+":"+selected.name);
}
function getSelections(){
var ids = [];
var rows = $('#test').datagrid('getSelections');
for(var i=0;i<rows.length;i++){
ids.push(rows[i].code);
}
alert(ids.join(':'))
}
function clearSelections(){
$('#test').datagrid('clearSelections');
}
function selectRow(){
$('#test').datagrid('selectRow',2);
}
function selectRecord(){
$('#test').datagrid('selectRecord','002');
}
function unselectRow(){
$('#test').datagrid('unselectRow',2);
}
</script>
</head>
<body>
<h1>DataGrid</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="resize()">resize</a>
<a href="#" onclick="getSelected()">getSelected</a> <a href="#"
onclick="getSelections()">getSelections</a> <a href="#"
onclick="clearSelections()">clearSelections</a> <a href="#"
onclick="selectRow()">selectRow</a> <a href="#"
onclick="selectRecord()">selectRecord</a> <a href="#"
onclick="unselectRow()">unselectRow</a></div>
<table id="test"></table>
</body>
</html>
14.1.2 效果图
14.2 参数
Name
Type
Description
Default
title
字符串
标题文字
null
iconCls
字符串
一个css类,将提供一个背景图片作为标题图标
null
border
布尔
是否显示面板的边界。
true
width
数字
表格的宽度
auto
height
数字
表格的高度
auto
columns
数组
表格的列的配置对象,详见下面column属性介绍。
null
frozenColumns
数组
与columns属性相通,但这些列将固定在左侧,不得变动。
null
striped
布尔
是否显示斑马线
false
method
字符串
远程数据的获取类型,可取值为post或get
post
nowrap
布尔
是否在一行显示数据
true
idField
字符串
指定哪些字段时标识字段
null
url
字符串
从远程请求数据的地址
null
loadMsg
字符串
当远程加载数据时,现实的等待信息提示
Processing, please wait …
pagination
布尔
是否显示底部分页工具栏
false
rownumbers
布尔
是否显示行号列
false
singleSelect
布尔
是否允许只选择一行
false
fit
布尔
是否允许表格自动缩放,以适应父容器
false
pageNumber
数字
初始化页码
1
pageSize
数字
初始化页面大小
10
pageList
数组
初始化页面大小选择清单
[10,20,30,40,50]
queryParams
对象
当请求远程数据时,发送的额外的参数
{}
sortName
字符串
定义哪一列可以排序
null
sortOrder
字符串
定义列排序的方式,递增(asc)或递减(desc)
asc
editors
对象
定义当编辑某行数据时的编辑器
predefined editors
14.3 Column参数
Name
Type
Description
Default
title
字符串
列标题文字
undefined
field
字符串
列字段名称
undefined
width
数字
列宽度
undefined
rowspan
数字
该列占几行单元格
undefined
colspan
数字
该列占几列单元格
undefined
align
字符串
数据对其方式,可选值有left,right,center
undefined
sortable
布尔
是否允许该列排序
undefined
checkbox
布尔
是否显示选择框
undefined
formatter
函数
包含三个参数:
value: the field value.
rowData: the row record data
rowIndex: the row index.
undefined
editor
string,object
Indicate the edit type. When string indicates the edit type, when object contains two properties:
type: string, the edit type, possible type is: text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree.
options: object, the editor options corresponding to the edit type.
undefined
14.4 事件
Name
Parameters
Description
onLoadSuccess
data
远程数据加载成功时触发
onLoadError
none
远程数据加载失败时触发
onBeforeLoad
data
请求发出去,加载数据前触发。如果返回false,加载数据动作则退出
onClickRow
rowIndex, rowData
当用户点击某行时触发, the parameters contains:
rowIndex: the clicked row index, start with 0
rowData: the record corresponding to the clicked row
onDblClickRow
rowIndex, rowData
当用户双击某行时触发, the parameters contains:
rowIndex: the clicked row index, start with 0
rowData: the record corresponding to the clicked row
onSortColumn
sort, order
当用户排序某列时触发, the parameters contains:
sort: the sort column field name
order: the sort column order
onSelect
rowIndex, rowData
当用户选择某行时触发, the parameters contains:
rowIndex: the selected row index, start with 0
rowData: the record corresponding to the selected row
onUnselect
rowIndex, rowData
当用户取消选择某行时触发, the parameters contains:
rowIndex: the unselected row index, start with 0
rowData: the record corresponding to the unselected row
onBeforeEdit
rowIndex, rowData
当用户开始编辑某行时触发, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row
onAfterEdit
rowIndex, rowData, changes
当用户完成编辑某行时触发, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row
changes: the changed field/value pairs
onCancelEdit
rowIndex, rowData
当用户退出编辑某行时触发, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row
14.5 方法
Name
Parameter
Description
options
none
返回所有参数的对象
getPager
none
返回分页对象
resize
none
调整表格大小
reload
param
重新加载行
fixColumnSize
none
固定列的大小
loadData
param
加载本地数据,旧行将被删除
getData
none
返回已加载的数据
getRows
none
返回当前页的行数
getSelected
none
返回第一次选择的行记录
getSelections
none
返回所有选定行,如果没选择记录,则返回空数组
clearSelections
none
取消所有选择
selectAll
none
选择当前页所有行
selectRow
index
选择某行,行索引以0开始
selectRecord
idValue
通过id值选择一行
unselectRow
index
取消选择某行
beginEdit
index
开始编辑某行
endEdit
index
结束编辑某行
cancelEdit
index
退出编辑某行
refreshRow
index
刷新一行的数据
appendRow
row
添加新行
deleteRow
index
删除一行
getChanges
type
Get changed rows since the last commit. The type parameter indicate which type changed rows, possible value is: inserted,deleted,updated,etc. When the type parameter is not assigned, return all changed rows.
acceptChanges
none
Commits all the changes data since it was loaded or since the last time acceptChanges was called.
rejectChanges
none
Rolls back all the changes data since it was created, or since the last time acceptChanges was called.
目 录
1Accordion(可折叠标签) 2
1.1实例 2
1.2参数 3
2DateBox(日期框) 4
2.1实例 4
2.2参数 6
2.3事件 6
2.4方法 6
3ComboBox(组合框) 7
3.1实例 7
3.2参数 9
3.3事件 9
3.4方法 9
4Dialog(对话框) 10
4.1实例 10
4.2参数 12
4.3事件 12
4.4方法 12
5Messager(提示框) 12
5.1实例 12
5.2方法 15
5.3扩展 16
6NumberBox(数字框) 16
6.1实例 16
6.2参数 17
7ValidateBox(验证框) 18
7.1实例 18
7.2参数 20
7.3方法 20
7.4扩展 20
8Pagination(分页) 20
8.1实例 20
8.2参数 22
8.3事件 23
9Window(窗口) 23
9.1实例 23
9.2参数 25
9.3事件 26
9.4方法 26
10Panel(面板) 26
10.1实例 26
10.2参数 28
10.3事件 29
10.4方法 29
11Tabs(标签) 30
11.1实例 30
11.2参数 32
11.3事件 32
11.4方法 33
11.5标签面板属性 33
12Tree(树) 33
12.1实例 33
12.2参数 36
12.3事件 37
12.4方法 37
13Layout(布局) 38
13.1实例 38
13.2参数 39
13.3方法 39
14Datagrid(数据表) 39
14.1实例 39
14.2参数 43
14.3Column参数 44
14.4事件 45
14.5方法 46
1 Accordion(可折叠标签)
1.1 实例
1.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript">
$( function() {
$('#aa').accordion( {
width : 400,
height : 200,
fit : false
});
});
</script>
</head>
<body>
<div id="aa" border="true" >
<div title="Title1" icon="icon-save" style="overflow: auto; padding: 10px;">
<h3 style="color: #0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Title2" icon="icon-reload" selected="true"
style="padding: 10px;">content2</div>
<div title="Title3">content3</div>
</div>
</body>
</html>
1.1.2 效果图
1.1.3 扩展
实例html代码中
<div id="aa" border="true" >
此行也可写成
<div id="aa"class="easyui-accordion"style="width:300px;height:200px;"fit="false"border="false">
,并且将js代码全部去掉,效果图是一样的。
1.2 参数
1.2.1 容器参数
参数名称
参数类型
描述
默认值
width
数字
可折叠标签的宽度。
auto
height
数字
可折叠标签的高度。
auto
fit
布尔
是否使可折叠标签自动缩放以适应父容器的大小,当为true时width和height参数将失效。
false
border
布尔
是否显示边界线。
true
1.2.2 面板参数
可折叠标签面板继承自面板(panel),许多属性定义在<div />标签里,下面的属性就是如此:
参数名称
参数类型
描述
默认值
selected
布尔
设置可折叠标签中默认展开的标签页
false
2 DateBox(日期框)
2.1 实例
2.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function disable() {
$('#dd').datebox('disable');
}
function enable() {
$('#dd').datebox('enable');
}
/*
将Date/String类型,解析为String类型.
传入String类型,则先解析为Date类型
不正确的Date,返回''
如果时间部分为0,则忽略,只返回日期部分.
*/
function formatDate(v) {
if (v instanceof Date) {
var y = v.getFullYear();
var m = v.getMonth() + 1;
var d = v.getDate();
var h = v.getHours();
var i = v.getMinutes();
var s = v.getSeconds();
var ms = v.getMilliseconds();
if (ms > 0)
return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s
+ '.' + ms;
if (h > 0 || i > 0 || s > 0)
return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;
return y + '-' + m + '-' + d;
}
return '';
}
$( function() {
$('#dd').datebox( {
currentText : '今天',
closeText : '关闭',
disabled : false,
required : true,
missingMessage : '必填',
formatter : formatDate
});
});
</script>
</head>
<body>
<h1>DateBox</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick=
disable();
>disable</a>
<a href="#" onclick=
enable();
>enable</a></div>
<input id="dd"></input>
</body>
</html>
2.1.2 效果图
2.2 参数
属性名
类型
描述
默认值
currentText
字符串
为当前日期按钮显示的文本
Today
closeText
字符串
关闭按钮显示的文本
Close
disabled
布尔
如果为true则禁用输入框
false
required
布尔
定义输入框是否为必添
false
missingMessage
字符串
当输入框为空时提示的文本
必填
formatter
function
格式化日期的函数,这个函数以’date’为参数,并且返回一个字符串
——
parser
function
分析字符串的函数,这个函数以’date’为参数并返回一个日期
——
2.3 事件
事件名
参数
描述
onSelect
date
当选择一个日期时触发
2.4 方法
方法名
参数
描述
destroy
none
销毁组件
disable
none
禁用输入框.
enable
none
启用输入框
3 ComboBox(组合框)
3.1 实例
3.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function loadData(){
$('#cc').combobox({
url:'combobox_data.json',//该文件内容在下面
valueField:'id',
textField:'text'
});
}
function setValue(){
$('#cc').combobox('setValue','2');
}
function getValue(){
var val = $('#cc').combobox('getValue');
alert(val);
}
function disable(){
$('#cc').combobox('disable');
}
function enable(){
$('#cc').combobox('enable');
}
$( function() {
$('#cc').combobox( {
width:150,
listWidth:150,
listHeight:100,
//valuefield:'value',
//textField:'text',
//url:'combobox_data.json',
editable:false
});
});
</script>
</head>
<body>
<h1>ComboBox</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="loadData()">loadData</a>
<a href="#" onclick="setValue()">setValue</a> <a href="#"
onclick="getValue()">getValue</a> <a href="#" onclick="disable()">disable</a>
<a href="#" onclick="enable()">enable</a></div>
<span>Options:</span>
<select id="cc" name="dept" required="true">
<option value="">==请选择==</option>
<option value="0">苹果</option>
<option value="1">香蕉</option>
<option value="2">鸭梨</option>
<option value="3">西瓜</option>
<option value="4">芒果</option>
</select>
</body>
</html>
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"
}]
3.1.2 效果图
3.2 参数
属性名
类型
描述
默认值
width
数字
组件的宽度
auto
listWidth
数字
下拉列表的宽度
null
listHeight
数字
下拉列表的高度
null
valueField
字符串
基础数据值名称绑定到这个组合框
value
textField
字符串
基础数据的字段的名称绑定到这个组合框
text
editable
布尔
定义是否可以直接到文本域中键入文本
true
url
字符串
加载列表数据的远程URL
null
3.3 事件
事件名
参数
描述
onLoadSuccess
none
当远程数据成功加载时触发
onLoadError
none
当远程数据加载失败时触发
onSelect
record
当用户选择了一个列表项时触发
onChange
newValue, oldValue
当文本域字段的值改变时触发
3.4 方法
方法名
参数
描述
select
value
选择下拉列表中的一项
setValue
param
设定指定值到文本域,参数可以是一个字符串,也可以是一个Javascript对象,如果是对象,必须包含两个属性各对应valueField和TextField属性。
getValue
none
获取字段值
reload
url
请求远程列表数据.
4 Dialog(对话框)
4.1 实例
4.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#dd').dialog({
title:'对话框',
collapsible:true,
minimizable:true,
maximizable:true,
resizable:true,
toolbar:[{
text:'Add',
iconCls:'icon-add',
handler:function(){
alert('add');
}
},'-',{
text:'Save',
iconCls:'icon-save',
handler:function(){
alert('save');
}
}],
buttons:[{
text:'Ok',
iconCls:'icon-ok',
handler:function(){
alert('ok');
}
},{
text:'Cancel',
handler:function(){
$('#dd').dialog('close');
}
}]
});
});
function open1(){
$('#dd').dialog('open');
}
function close1(){
$('#dd').dialog('close');
}
</script>
</head>
<body>
<h1>Dialog</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="open1()">open1</a>
<a href="#" onclick="close1()">close1</a></div>
<div id="dd" icon="icon-save"
style="padding: 5px; width: 400px; height: 200px;">
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
</div>
</body>
</html>
4.1.2 效果图
4.2 参数
属性名
类型
描述
默认值
title
字符串
对话框的标题文本
New Dialog
collapsible
布尔
定义是否显示可折叠按钮
false
minimizable
布尔
定义是否显示最小化按钮
false
maximizable
布尔
定义是否显示最大化按钮
false
resizable
布尔
定义对话框是否可编辑大小
false
toolbar
数组
对话框上的工具条,每个工具条包括:
text,
iconCls,
disabled,
handler
etc.
null
buttons
数组
对话框底部的按钮,每个按钮包括:
text,
iconCls,
handler
etc.
null
4.3 事件
Dialog的事件和窗口(Window)的事件相同。
4.4 方法
Dialog的函数方法和窗口(Window)的相同。
5 Messager(提示框)
5.1 实例
5.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function show1(){
$.messager.show({
title:'My Title',
msg:'Message will be closed after 4 seconds.',
showType:'show'
});
}
function show2(){
$.messager.show({
title:'My Title',
msg:'Message will be closed after 5 seconds.',
timeout:5000,
showType:'slide'
});
}
function show3(){
$.messager.show({
title:'My Title',
msg:'Message never be closed.',
timeout:0,
showType:'fade'
});
}
function alert1(){
$.messager.alert('My Title','Here is a message!');
}
function alert2(){
$.messager.alert('My Title','Here is a error message!','error');
}
function alert3(){
$.messager.alert('My Title','Here is a info message!','info');
}
function alert4(){
$.messager.alert('My Title','Here is a question message!','question');
}
function alert5(){
$.messager.alert('My Title','Here is a warning message!','warning');
}
function confirm1(){
$.messager.confirm('My Title','Are you confirm this?', function(r){
if (r){
alert('confirmed:'+r);
location.href = 'http://www.google.com';
}
});
}
function prompt1(){
$.messager.prompt('My Title', 'Please type something', function(r){
if (r){
alert('you type:'+r);
}
});
}
$(function(){
$.messager.defaults={ok:"确定",cancel:"取消"};
});
</script>
</head>
<body>
<h1>Messager</h1>
<div><a href="javascript:void(0)" onclick="show1()">show</a> |<a
href="#" onclick="show2()">slide</a> |<a href="#" onclick="show3()">fade</a>
|</div>
<div><a href="#" onclick="alert1()">alert</a> |<a href="#"
onclick="alert2()">alert(error)</a> |<a href="#" onclick="alert3()">alert(info)</a>
| <a href="#" onclick="alert4()">alert(question)</a> |<a href="#"
onclick="alert5()">alert(warning)</a></div>
<div><a href="#" onclick="confirm1();">confirm</a></div>
<div><a href="#" onclick="prompt1()">prompt</a></div>
<div style="height: 600px;"></div>
</body>
</html>
5.1.2 效果图
5.2 方法
方法名
参数
描述
$.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):用户点击按钮后的回调函,参数是用户输入的内容。
5.3 扩展
可以通过$.messager.defaults方法自定义alert框的ok按钮和cancel按钮上显示的文字。
名字
类型
描述
默认值
ok
字符串
Ok
按钮上的文本
Ok
cancel
字符串
Cancel
按钮上的文本
Cancel
6 NumberBox(数字框)
6.1 实例
6.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function disable(){
$('#nn').numberbox('disable');
}
function enable(){
$('#nn').numberbox('enable');
}
$(function(){
$('#nn').numberbox({min:5.5,max:20,precision:2});
});
</script>
</head>
<body>
<h1>NumberBox</h1>
<p>The Box can only input number.</p>
<div style="margin-bottom: 10px;"><a href="#" onclick="disable()">disable</a>
<a href="#" onclick="enable()">enable</a></div>
<input id="nn" required="true" />
</body>
</html>
6.1.2 效果图
6.2 参数
选项名
类型
描述
默认值
min
数字
文本框中可允许的最小值
null
max
数字
文本框中可允许的最大值
null
precision
数字
最高可精确到小数点后几位
0
7 ValidateBox(验证框)
7.1 实例
7.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<style type="text/css">
input,textarea {
width: 200px;
border: 1px solid #ccc;
padding: 2px;
}
</style>
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function valid(){
alert($('#dfe').validatebox('isValid'));
}
$(function(){
$.extend($.fn.validatebox.defaults.rules, {
minLength: {
validator: function(value, param){
return value.length >= param[0];
},
message: 'Please enter at least {0} characters.'
}
});
});
</script>
</head>
<body>
<h1>ValidateBox<a href="#0" onclick="valid();">EmailisValid</a></h1>
<div>
<table>
<tr>
<td>Name:</td>
<td><input class="easyui-validatebox" required="true"
validType="length[1,3]"></td>
</tr>
<tr>
<td>Email:</td>
<td><input id="dfe" class="easyui-validatebox"
invalidMessage="email格式错误" validType="email"></td>
</tr>
<tr>
<td>URL:</td>
<td><input class="easyui-validatebox" required="true"
validType="url"></td>
</tr>
<tr>
<td>testr:</td>
<td><input class="easyui-validatebox" validType="minLength[5]"
invalidMessage="至少5个字符"></td>
</tr>
<tr>
<td>Note:</td>
<td><textarea class="easyui-validatebox" required="true"
missingMessage="必填" style="height: 100px;"></textarea></td>
</tr>
</table>
</div>
</body>
</html>
7.1.2 效果图
7.2 参数
属性名
类型
描述
默认值
required
布尔
定义文本域是否为必填项
false
validType
字符串
定义字段的验证类型
url(匹配电子邮件正则表达式规则), email(匹配URL正则表达式规则),length[0,100](允许字符串长度的范围)etc.null
missingMessage
字符串
当文本框为空时提示的文本信息
This field is required.
invalidMessage
字符串
当文本框内容不合法时提示的文本信息
null
7.3 方法
方法名
参数
描述
destroy
none
删除并且销毁组件
validate
none
做验证以确定文本框的内容是否是有效的。
isValid
none
调用验证方法并返回验证结果,true或者false
7.4 扩展
当然也可以自定义验证规则,重写$.fn.validatebox.defaults.rules可以定义一个校验器的功能和无效的显示消息。例如,要定义一个minLength有效的类型:
$.extend($.fn.validatebox.defaults.rules, {
minLength: {
validator: function(value, param){
return value.length >= param[0];
},
message: 'Please enter at least {0} characters.'
}
});定义好以后我们就可以使用了,下面的代码表示输入的最小长度是5个字符:
<input class="easyui-validatebox" validType="minLength[5]">
8 Pagination(分页)
8.1 实例
8.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#pp').pagination({
total:114,
pageSize:15,
pageNumber:2,
pageList:[10,15,20,30,50,100],
loading:false,
showPageList:true,
showRefresh:true,
beforePageText:'第',
afterPageText:'页,共{pages}页',
displayMsg:'{from}-{to}/{total}',
buttons:[{
iconCls:'icon-add',
handler:function(){
alert('add');
}
},{
iconCls:'icon-cut',
handler:function(){
alert('cut');
}
},{
iconCls:'icon-save',
handler:function(){
alert('save');
}
}],
onSelectPage:function(pageNumber, pageSize){
$(this).pagination('loading');
alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
$(this).pagination('loaded');
}
});
});
</script>
</head>
<body>
<h1>Pagination</h1>
<div style="margin: 10px 0;"><a href="#"
onclick="javascript:$('#pp').pagination({loading:false})">loaded</a> <a
href="#" onclick="javascript:$('#pp').pagination({loading:true})">loading</a>
</div>
<div id="pp"
style="width: 500px; background: #efefef; border: 1px solid #ccc;"></div>
</body>
</html>
8.1.2 效果图
8.2 参数
属性名
类型
描述
默认值
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
8.3 事件
事件名
参数
描述
onSelectPage
pageNumber, pageSize
当用户选择一个新页时触发,回调函数包含两个参数:pageNumber: 新页面的页数pageSize:新页面的大小
onBeforeRefresh
ageNumber, pageSize
刷新按钮被点击之前触发,如果返回false则取消刷新操作
onRefresh
ageNumber, pageSize
刷新以后触发
onChangePageSize
ageSize
改变页面大小时触发
9 Window(窗口)
窗口的主要用法和面板(panel)用法差不多
9.1 实例
9.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html style="height:100%;width:100%;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function resize(){
$('#w').window({
title: 'yewen2',
width: 600,
collapsible:false,
minimizable:false,
maximizable:false,
closable:false,
closed: false,
height: 300,
draggable:false,
resizable:false,
shadow:false,
modal:true
});
}
function open1(){
$('#w').window('open');
}
function close1(){
$('#w').window('close');
}
function test(){
$('#test').window('open');
}
</script>
</head>
<body style="height: 100%; width: 100%; overflow: hidden; border: none;">
<h1>Window</h1>
<div><a href="javascript:void(0)" onclick="resize()">resize</a> <a
href="javascript:void(0)" onclick="open1()">open</a> <a
href="javascript:void(0)" onclick="close1()">close</a></div>
<div id="w" class="easyui-window" title="My Window" icon="icon-save"
style="width: 500px; height: 200px; padding: 5px; background: #fafafa;">
<div class="easyui-layout" fit="true">
<div region="center" border="false"
style="padding: 10px; background: #fff; border: 1px solid #ccc;">
jQuery EasyUI framework help you build your web page easily. <br />
<br />
click <a href="#" onclick="test()">here</a> topopup another window.</div>
<div region="south" border="false"
style="text- align: right; height: 30px; line-height: 30px;"><a
class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)"
onclick="resize()">Ok</a> <a class="easyui-linkbutton"
icon="icon-cancel" href="javascript:void(0)" onclick="resize()">Cancel</a>
</div>
</div>
</div>
<div id="test" class="easyui-window" closed="true" modal="true"
title="Test Window" style="width: 300px; height: 100px;"></div>
</body>
</html>
9.1.2 效果图
9.2 参数
大多数的属性和面板(panel)的属性是相同的,下面列出一些Window私有的属性:
属性名
类型
描述
默认值
zIndex
数字
窗口的z-index属性,可以通过这个属性来增加
9000
draggable
布尔
定义窗口是否可被拖动
true
resizable
布尔
定义窗口是否可以被改变大小
true
shadow
布尔
如果设置为true,窗口的阴影也将显示。
true
modal
布尔
定义窗口是否是一个模式窗口。
false
Window也重写了Panel里的一些属性
属性名
类型
描述
默认值
title
字符串
窗口的标题文本
New Window
collapsible
布尔
定义是否显示可折叠定义按钮
true
minimizable
布尔
定义是否显示最小化按钮
true
maximizable
布尔
定义是否显示最大化按钮
true
closable
布尔
定义是否显示关闭按钮
true
9.3 事件
Window的事件和面板(panel)的事件相同
9.4 方法
除了”header”和”body”以外,Window的函数方法和面板(panel)的相同
10 Panel(面板)
10.1 实例
10.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function open1(){
$('#p').panel('open');
}
function close1(){
$('#p').panel('close');
}
function load1(){
$('#p').panel({
href:'tabs_href_test.html'
});
$('#p').panel('open');
}
</script>
</head>
<body style="background: #fafafa;">
<h1>Panel</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="open1()">open</a>
<a href="#" onclick="close1()">close</a> <a href="#" onclick="load1()">load</a>
</div>
<div
style="width: 600px; height: 300px; border: 1px solid red; padding: 5px;">
<div id="p" class="easyui-panel" title="My Title" icon="icon-save"
collapsible="true" minimizable="true" maximizable=true closable="true"
style="width: 500px; height: 150px; padding: 10px; background: #fafafa;">
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
</div>
</div>
</body>
</html>
10.1.2 效果图
10.2 参数
名字
类型
描述
默认值
title
字符串
在面板头部显示的标题文本
null
iconCls
字符串
一个CSS类来显示在面板中的16x16图标
null
width
数字
设置面板的宽度
auto
height
数字
设置面板的高度
auto
left
数字
设置面板左侧位置
null
top
数字
设置面板的顶部位置
null
cls
字符串
给面板添加一个CSS类
null
headerCls
字符串
给面板头部添加一个CSS类
null
bodyCls
字符串
给面板主体添加一个CSS类
null
style
对象
给面板自定义样式
{}
fit
布尔
当设置为true,面板尺寸将适合它的父容器。
false
border
布尔
定义面板的边框
true
doSize
布尔
当设置为true,面板载创建的时候将被调整和重新布局
true
collapsible
布尔
定义是否显示可折叠定义按钮
false
minimizable
布尔
定义是否显示最小化按钮
false
maximizable
布尔
定义是否显示最大化按钮
false
closable
布尔
定义是否显示关闭按钮
false
tools
数组
自定义工具,每个工具可以包含两个属性:iconCls and handler
[]
collapsed
布尔
定义在初始化的时候折叠面板
false
minimized
布尔
定义在初始化的时候最小化面板
false
maximized
布尔
定义在初始化的时候最大化面板
false
closed
布尔
定义在初始化的时候关闭面板
false
href
字符串
一个远程的URL加载数据,然后显示在面板中
null
loadingMessage
字符串
当加载远程数据时,在面板中显示的信息
Loading…
10.3 事件
名字
参数
描述
onLoad
none
当远程数据加载时触发
onBeforeOpen
none
当面板打开之前触发
onOpen
none
当面板打开之后触发
onBeforeClose
none
当面板关闭之前触发
onClose
none
当面板关闭之后触发
onBeforeDestroy
none
当面板销毁之前触发
onDestroy
none
当面板关闭之后触发
onBeforeCollpase
none
当面板折叠之前触发
onCollapse
none
当面板折叠之后触发
onBeforeExpand
none
当面板展开之前触发
onExpand
none
当面板展开之后触发
onResize
width, height
当面板调整大小之后触发width: 新的宽度;height:新的高度
onMove
left,top
当面板移动之后触发left: 新的左侧位置top:新的顶部位置
onMaximize
none
当窗口最大化的时候被触发
onRestore
none
当窗口恢复到原来的大小时被触发
onMinimize
none
当窗口最小化的时候被触发
10.4 方法
名字
参数
描述
options
none
返回设置的属性值
panel
none
返回面板对象
header
none
返回面板头部对象
body
none
返回面板主体对象
setTitle
title
设置面板头部标题
open
forceOpen
当forceOpen设置为true,面板被打开的时候忽略onBeforeOpen回调函数
close
forceClose
当forceClose设置为true,面板被关闭的时候忽略onBeforeClose回调函数
destroy
forceDestroy
当forceDestroy设置为true,面板被销毁的时候忽略onBeforeDestroy回调函数
refresh
none
当设置了href值时,刷新面板来加载远程数据
resize
options
设置面板的大小和布局,这些选项包含以下的属性:width: 新面板的宽度; height:新面板的高度; left:新面板的左侧位置; top:新面板的顶部位置
move
options
移动面板到一个新的位置,这些选项包含以下属性: left: 新面板的左侧位置;top:新面板的顶部位置
11 Tabs(标签)
11.1 实例
11.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
var index = 0;
function addTab(){
index++;
$('#tt').tabs('add',{
title:'New Tab ' + index,
content:'Tab Body ' + index,
closable:true
});
}
</script>
</head>
<body>
<h1>Tabs</h1>
<div>
<a class="easyui-linkbutton" icon="icon-add" href="javascript:void(0)" onclick="addTab()">add tab</a>
</div>
<br/>
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;display:none;">
</div>
<div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;" cache="false" href="tabs_href_test.html"> This is Tab2 width close
button.</div>
<div title="Tab3" icon="icon-reload" closable="true" style="padding:20px;display:none;">
<table id="test" class="easyui-datagrid" fit="true">
<thead>
<tr>
<th field="f1" width="60">field1</th>
<th field="f2" width="60">field2</th>
<th field="f3" width="60">field3</th>
</tr>
</thead>
<tbody>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
</tr>
<tr>
<td>d11</td>
<td>d21</td>
<td>d31</td>
</tr>
</tbody>
</table>
</div>
<div title="Tab4 with iframe" closable="true" style="width:100%;height:100%;display:none;">
<iframe scrolling="yes" frameborder="0" src="http://www.google.com" style="width:100%;height:100%;"></iframe>
</div>
<div title="Tab5 with sub tabs" closable="true" icon="icon-cut" style="padding:10px;display:none;">
<div class="easyui-tabs" fit="true" plain="true" style="height:100px;width:300px;">
<div title="Title1">Content 1</div>
<div title="Title2">Content 2</div>
<div title="Title3">Content 3</div>
</div>
</div>
</div>
</body>
</html>
11.1.2 效果图
11.2 参数
参数名
参数
描述
默认值
width
数字
标签容器的宽度
auto
height
数字
标签容器的高度
auto
idSeed
数字
The base id seed to generate tab panel’s DOM id attribute.
0
plain
布尔
如果为ture标签没有背景图片
false
fit
布尔
如果为ture则设置标签的大小以适应它的容器的父容器
false
border
布尔
如果为true则显示标签容器的边框
true
scrollIncrement
数字
滚动按钮每次被按下时滚动的像素值
100
scrollDuration
数字
每次滚动持续的毫秒数
400
11.3 事件
事件名
参数
描述
onLoad
arguments
当一个AJAX标签加载远程数据完成时被触发,参数和jQuery.ajax成功返回的回调函数相同
onSelect
title
当用户选择一个标签面板时被触发
onClose
title
当用户关闭一个标签面板时被触发
11.4 方法
方法名
参数
描述
resize
none
调整标签容器的大小和布局
add
options
添加新标签面板,可选参数是一个配置对象,详细信息可以查看下面的标签面板属性
close
title
关闭一个标签面板,标题参数表明被关闭的面板
select
title
选择一个标签面板
exists
title
指示特定的标签是否存在
11.5 标签面板属性
属性名
类型
描述
默认值
id
字符串
标签面板的ID属性
null
title
字符串
标签面板的文本标题
content
字符串
标签面板的主体内容
href
字符串
填充标签内容的远程URL地址
null
cache
布尔
如果为true,当设置href时,对标签面板进行缓存
true
icon
字符串
标签面板上标题的图标CSS类
null
closable
布尔
如果为true,标签面板会显示出关闭按钮,点击可以关闭选项卡面板。
false
selected
布尔
如果为true,标签标签面板将被选中
false
width
数字
标签面板的宽度
auto
height
数字
标签面板的高度
auto
12 Tree(树)
12.1 实例
12.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
$('#tt1').tree({
animate:true,
onClick:function(node){
alert('you click '+node.text);
}
});
$('#tt2').tree({
checkbox: true,
url: 'tree_data.json',
onClick:function(node){
alert('you click '+node.text);
}
});
});
function reload(){
$('#tt2').tree('reload');
}
function getChecked(){
var nodes = $('#tt2').tree('getChecked');
var s = '';
for(var i=0; i<nodes.length; i++){
if (s != '') s += ',';
s += nodes[i].text;
}
alert(s);
}
function getSelected(){
var node = $('#tt2').tree('getSelected');
alert(node.text);
}
function collapse(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('collapse',node.target);
}
function expand(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('expand',node.target);
}
function append(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('append',{
parent: node.target,
data:[{
text:'new1'
},{
text:'new2',
state:'closed',
children:[{
text:'subnew1'
},{
text:'subnew2'
}]
}]
});
}
function remove(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('remove', node.target);
}
function isLeaf(){
var node = $('#tt2').tree('getSelected');
var b = $('#tt2').tree('isLeaf', node.target);
alert(b)
}
</script>
</head>
<body>
<h1>Tree</h1>
<p>Create from HTMLmarkup</p>
<ul id="tt1" class="easyui-tree">
<li><span>Folder</span>
<ul>
<li><span>Sub Folder 1</span>
<ul>
<li><span><a href="#">File 11</a></span></li>
<li><span>File 12</span></li>
<li><span>File 13</span></li>
</ul>
</li>
<li><span>File 2</span></li>
<li><span>File 3</span></li>
</ul>
</li>
<li><span>File21</span></li>
</ul>
<hr></hr>
<p>Create from JSON data</p>
<div style="margin: 10px;"><a href="#" onclick="reload()">reload</a>
<a href="#" onclick="getChecked()">getChecked</a> <a href="#"
onclick="getSelected()">getSelected</a> <a href="#"
onclick="collapse()">collapse</a> <a href="#" onclick="expand()">expand</a>
<a href="#" onclick="append()">append</a> <a href="#" onclick="remove()">remove</a>
<a href="#" onclick="isLeaf()">isLeaf</a></div>
<ul id="tt2"></ul>
</body>
</html>
12.1.2 效果图
12.2 参数
选项名
类型
描述
默认值
url
字符串
一个网址retrive远程数据。
null
animate
布尔
当节点展开或折叠是否显示动画效果。
false
checkbox
布尔
是否带复选框
False
12.3 事件
事件名
参数
描述
onClick
node
用户点击一个节点时触发。,该节点参数包含以下属性:
id:节点ID
text:节点的文本
attributes:节点自定义属性
target:点击DOM对象的目标
onDblClick
node
用户双击一个节点时触发,参数同onclick事件
onLoadSuccess
arguments
加载数据成功时触发,参数arguments类似jQuery.ajax.的success函数
onLoadError
arguments
加载数据成功时触发,参数arguments类似jQuery.ajax.的error函数
12.4 方法
方法名
参数
描述
options
none
返回树的所有参数对象
loadData
data
加载树的数据
reload
none
重新加载树的数据
getRoot
none
返回树的root节点
getRoots
none
返回树的所有root节点
getParent
target
返回某个节点的父节点
getChildren
target
返回某个节点的孩子节点
getChecked
none
获取被勾选的节点
getSelected
none
获取选中的节点,并返回它,如果没有节点选择返回null。
isLeaf
target
判断某个节点是否叶子节点
select
target
选择一个节点,目标参数表明该节点的DOM对象。
collapse
target
折叠节点,目标参数表明该节点的DOM对象。
expand
target
展开一个节点,目标参数表明该节点的DOM对象。
collapseAll
none
折叠所有节点
expandAll
none
展开所有节点
append
param
一些子节点追加到父节点。参数有两个属性:
parent: DOM对象,父节点追加。
data:数组,节点数据。
toggle
target
绑定某个节点的展开或者折叠状态,使之不能再改变。
remove
target
删除一个节点和它的子节点,目标参数表明该节点的DOM对象。
update
param
更新指定的节点,参数param包含如下属性:
Target:目标节点;
id,text,iconCls,checked,etc.
13 Layout(布局)
13.1 实例
此例最外层写在了body上,也可以写在某个div上。
13.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
var p = $('body').layout('panel','west').panel({
onCollapse:function(){
alert('collapse');
}
});
setTimeout(function(){
$('body').layout('collapse','east');
},0);
});
</script>
</head>
<body class="easyui-layout">
<div region="north" border="false" style="height:60px;background:#B3DFDA;">north region</div>
<div region="west" split="true" title="West" style="width:150px;padding:10px;">west content</div>
<div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div>
<div region="south" border="false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div region="center" title="Main Title">
</div>
</body>
</html>
13.1.2 效果图
13.2 参数
所有属性都必须定义在布局面板创建的<div/>标记上。
名称
类型
描述
默认值
title
字符串
布局面板的标题文本
null
region
字符串
定义布局面板的位置,该值是下列之一: north, south, east, west, center.
border
布尔
如果为ture则显示布局面板的边框
true
split
布尔
如果为ture则显示分隔栏,用户可以用它来改变布局面板的大小
false
icon
字符串
在面板头部显示图标的CSS
null
href
字符串
从远程地址加载数据的URL
null
13.3 方法
方法名
参数
描述
panel
region
返回某个方位的面板,参数region取值可以是:north,south,east,west,center
collapse
region
收缩某个方位的面板,参数region取值可以是:north,south,east,west
expand
region
展开某个方位的面板,参数region取值可以是:north,south,east,west
14 Datagrid(数据表)
14.1 实例
14.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#test').datagrid({
title:'My Title',
iconCls:'icon-save',
width:800,
height:450,
nowrap: true,
striped: true,
url:'datagrid_data.json',
sortName: 'code',
sortOrder: 'desc',
idField:'code',
frozenColumns:[[
{field:'ck',checkbox:true},
{title:'code',field:'code',width:80,sortable:true}
]],
columns:[[
{title:'Base Information',colspan:3},
{field:'opt',title:'Operation',width:100,align:'center', rowspan:2,
formatter:function(value,rec){
return '<span style="color:red">Edit Delete</span>';
}
}
],[
{field:'name',title:'Name',width:120},
{field:'addr',title:'Address',width:120,rowspan:2,sortable:true},
{field:'col4',title:'Col41',width:150,rowspan:2}
]],
pagination:true,
rownumbers:true,
singleSelect:true,
toolbar:[{
text:'Add',
iconCls:'icon-add',
handler:function(){
alert('add')
}
},{
text:'Cut',
iconCls:'icon-cut',
disabled:true,
handler:function(){
alert('cut')
}
},'-',{
text:'Save',
iconCls:'icon-save',
handler:function(){
alert('save')
}
}]
});
var p = $('#test').datagrid('getPager');
if (p){
$(p).pagination({
onBeforeRefresh:function(){
alert('before refresh');
}
});
}
});
function resize(){
$('#test').datagrid({
title: 'New Title',
striped: true,
width: 650,
queryParams:{
p:'param test',
name:'My Name'
}
});
}
function getSelected(){
var selected = $('#test').datagrid('getSelected');
alert(selected.code+":"+selected.name);
}
function getSelections(){
var ids = [];
var rows = $('#test').datagrid('getSelections');
for(var i=0;i<rows.length;i++){
ids.push(rows[i].code);
}
alert(ids.join(':'))
}
function clearSelections(){
$('#test').datagrid('clearSelections');
}
function selectRow(){
$('#test').datagrid('selectRow',2);
}
function selectRecord(){
$('#test').datagrid('selectRecord','002');
}
function unselectRow(){
$('#test').datagrid('unselectRow',2);
}
</script>
</head>
<body>
<h1>DataGrid</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="resize()">resize</a>
<a href="#" onclick="getSelected()">getSelected</a> <a href="#"
onclick="getSelections()">getSelections</a> <a href="#"
onclick="clearSelections()">clearSelections</a> <a href="#"
onclick="selectRow()">selectRow</a> <a href="#"
onclick="selectRecord()">selectRecord</a> <a href="#"
onclick="unselectRow()">unselectRow</a></div>
<table id="test"></table>
</body>
</html>
14.1.2 效果图
14.2 参数
Name
Type
Description
Default
title
字符串
标题文字
null
iconCls
字符串
一个css类,将提供一个背景图片作为标题图标
null
border
布尔
是否显示面板的边界。
true
width
数字
表格的宽度
auto
height
数字
表格的高度
auto
columns
数组
表格的列的配置对象,详见下面column属性介绍。
null
frozenColumns
数组
与columns属性相通,但这些列将固定在左侧,不得变动。
null
striped
布尔
是否显示斑马线
false
method
字符串
远程数据的获取类型,可取值为post或get
post
nowrap
布尔
是否在一行显示数据
true
idField
字符串
指定哪些字段时标识字段
null
url
字符串
从远程请求数据的地址
null
loadMsg
字符串
当远程加载数据时,现实的等待信息提示
Processing, please wait …
pagination
布尔
是否显示底部分页工具栏
false
rownumbers
布尔
是否显示行号列
false
singleSelect
布尔
是否允许只选择一行
false
fit
布尔
是否允许表格自动缩放,以适应父容器
false
pageNumber
数字
初始化页码
1
pageSize
数字
初始化页面大小
10
pageList
数组
初始化页面大小选择清单
[10,20,30,40,50]
queryParams
对象
当请求远程数据时,发送的额外的参数
{}
sortName
字符串
定义哪一列可以排序
null
sortOrder
字符串
定义列排序的方式,递增(asc)或递减(desc)
asc
editors
对象
定义当编辑某行数据时的编辑器
predefined editors
14.3 Column参数
Name
Type
Description
Default
title
字符串
列标题文字
undefined
field
字符串
列字段名称
undefined
width
数字
列宽度
undefined
rowspan
数字
该列占几行单元格
undefined
colspan
数字
该列占几列单元格
undefined
align
字符串
数据对其方式,可选值有left,right,center
undefined
sortable
布尔
是否允许该列排序
undefined
checkbox
布尔
是否显示选择框
undefined
formatter
函数
包含三个参数:
value: the field value.
rowData: the row record data
rowIndex: the row index.
undefined
editor
string,object
Indicate the edit type. When string indicates the edit type, when object contains two properties:
type: string, the edit type, possible type is: text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree.
options: object, the editor options corresponding to the edit type.
undefined
14.4 事件
Name
Parameters
Description
onLoadSuccess
data
远程数据加载成功时触发
onLoadError
none
远程数据加载失败时触发
onBeforeLoad
data
请求发出去,加载数据前触发。如果返回false,加载数据动作则退出
onClickRow
rowIndex, rowData
当用户点击某行时触发, the parameters contains:
rowIndex: the clicked row index, start with 0
rowData: the record corresponding to the clicked row
onDblClickRow
rowIndex, rowData
当用户双击某行时触发, the parameters contains:
rowIndex: the clicked row index, start with 0
rowData: the record corresponding to the clicked row
onSortColumn
sort, order
当用户排序某列时触发, the parameters contains:
sort: the sort column field name
order: the sort column order
onSelect
rowIndex, rowData
当用户选择某行时触发, the parameters contains:
rowIndex: the selected row index, start with 0
rowData: the record corresponding to the selected row
onUnselect
rowIndex, rowData
当用户取消选择某行时触发, the parameters contains:
rowIndex: the unselected row index, start with 0
rowData: the record corresponding to the unselected row
onBeforeEdit
rowIndex, rowData
当用户开始编辑某行时触发, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row
onAfterEdit
rowIndex, rowData, changes
当用户完成编辑某行时触发, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row
changes: the changed field/value pairs
onCancelEdit
rowIndex, rowData
当用户退出编辑某行时触发, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row
14.5 方法
Name
Parameter
Description
options
none
返回所有参数的对象
getPager
none
返回分页对象
resize
none
调整表格大小
reload
param
重新加载行
fixColumnSize
none
固定列的大小
loadData
param
加载本地数据,旧行将被删除
getData
none
返回已加载的数据
getRows
none
返回当前页的行数
getSelected
none
返回第一次选择的行记录
getSelections
none
返回所有选定行,如果没选择记录,则返回空数组
clearSelections
none
取消所有选择
selectAll
none
选择当前页所有行
selectRow
index
选择某行,行索引以0开始
selectRecord
idValue
通过id值选择一行
unselectRow
index
取消选择某行
beginEdit
index
开始编辑某行
endEdit
index
结束编辑某行
cancelEdit
index
退出编辑某行
refreshRow
index
刷新一行的数据
appendRow
row
添加新行
deleteRow
index
删除一行
getChanges
type
Get changed rows since the last commit. The type parameter indicate which type changed rows, possible value is: inserted,deleted,updated,etc. When the type parameter is not assigned, return all changed rows.
acceptChanges
none
Commits all the changes data since it was loaded or since the last time acceptChanges was called.
rejectChanges
none
Rolls back all the changes data since it was created, or since the last time acceptChanges was called.
目 录
1Accordion(可折叠标签) 2
1.1实例 2
1.2参数 3
2DateBox(日期框) 4
2.1实例 4
2.2参数 6
2.3事件 6
2.4方法 6
3ComboBox(组合框) 7
3.1实例 7
3.2参数 9
3.3事件 9
3.4方法 9
4Dialog(对话框) 10
4.1实例 10
4.2参数 12
4.3事件 12
4.4方法 12
5Messager(提示框) 12
5.1实例 12
5.2方法 15
5.3扩展 16
6NumberBox(数字框) 16
6.1实例 16
6.2参数 17
7ValidateBox(验证框) 18
7.1实例 18
7.2参数 20
7.3方法 20
7.4扩展 20
8Pagination(分页) 20
8.1实例 20
8.2参数 22
8.3事件 23
9Window(窗口) 23
9.1实例 23
9.2参数 25
9.3事件 26
9.4方法 26
10Panel(面板) 26
10.1实例 26
10.2参数 28
10.3事件 29
10.4方法 29
11Tabs(标签) 30
11.1实例 30
11.2参数 32
11.3事件 32
11.4方法 33
11.5标签面板属性 33
12Tree(树) 33
12.1实例 33
12.2参数 36
12.3事件 37
12.4方法 37
13Layout(布局) 38
13.1实例 38
13.2参数 39
13.3方法 39
14Datagrid(数据表) 39
14.1实例 39
14.2参数 43
14.3Column参数 44
14.4事件 45
14.5方法 46
1 Accordion(可折叠标签)
1.1 实例
1.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript">
$( function() {
$('#aa').accordion( {
width : 400,
height : 200,
fit : false
});
});
</script>
</head>
<body>
<div id="aa" border="true" >
<div title="Title1" icon="icon-save" style="overflow: auto; padding: 10px;">
<h3 style="color: #0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Title2" icon="icon-reload" selected="true"
style="padding: 10px;">content2</div>
<div title="Title3">content3</div>
</div>
</body>
</html>
1.1.2 效果图
1.1.3 扩展
实例html代码中
<div id="aa" border="true" >
此行也可写成
<div id="aa"class="easyui-accordion"style="width:300px;height:200px;"fit="false"border="false">
,并且将js代码全部去掉,效果图是一样的。
1.2 参数
1.2.1 容器参数
参数名称
参数类型
描述
默认值
width
数字
可折叠标签的宽度。
auto
height
数字
可折叠标签的高度。
auto
fit
布尔
是否使可折叠标签自动缩放以适应父容器的大小,当为true时width和height参数将失效。
false
border
布尔
是否显示边界线。
true
1.2.2 面板参数
可折叠标签面板继承自面板(panel),许多属性定义在<div />标签里,下面的属性就是如此:
参数名称
参数类型
描述
默认值
selected
布尔
设置可折叠标签中默认展开的标签页
false
2 DateBox(日期框)
2.1 实例
2.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function disable() {
$('#dd').datebox('disable');
}
function enable() {
$('#dd').datebox('enable');
}
/*
将Date/String类型,解析为String类型.
传入String类型,则先解析为Date类型
不正确的Date,返回''
如果时间部分为0,则忽略,只返回日期部分.
*/
function formatDate(v) {
if (v instanceof Date) {
var y = v.getFullYear();
var m = v.getMonth() + 1;
var d = v.getDate();
var h = v.getHours();
var i = v.getMinutes();
var s = v.getSeconds();
var ms = v.getMilliseconds();
if (ms > 0)
return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s
+ '.' + ms;
if (h > 0 || i > 0 || s > 0)
return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;
return y + '-' + m + '-' + d;
}
return '';
}
$( function() {
$('#dd').datebox( {
currentText : '今天',
closeText : '关闭',
disabled : false,
required : true,
missingMessage : '必填',
formatter : formatDate
});
});
</script>
</head>
<body>
<h1>DateBox</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick=
disable();
>disable</a>
<a href="#" onclick=
enable();
>enable</a></div>
<input id="dd"></input>
</body>
</html>
2.1.2 效果图
2.2 参数
属性名
类型
描述
默认值
currentText
字符串
为当前日期按钮显示的文本
Today
closeText
字符串
关闭按钮显示的文本
Close
disabled
布尔
如果为true则禁用输入框
false
required
布尔
定义输入框是否为必添
false
missingMessage
字符串
当输入框为空时提示的文本
必填
formatter
function
格式化日期的函数,这个函数以’date’为参数,并且返回一个字符串
——
parser
function
分析字符串的函数,这个函数以’date’为参数并返回一个日期
——
2.3 事件
事件名
参数
描述
onSelect
date
当选择一个日期时触发
2.4 方法
方法名
参数
描述
destroy
none
销毁组件
disable
none
禁用输入框.
enable
none
启用输入框
3 ComboBox(组合框)
3.1 实例
3.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function loadData(){
$('#cc').combobox({
url:'combobox_data.json',//该文件内容在下面
valueField:'id',
textField:'text'
});
}
function setValue(){
$('#cc').combobox('setValue','2');
}
function getValue(){
var val = $('#cc').combobox('getValue');
alert(val);
}
function disable(){
$('#cc').combobox('disable');
}
function enable(){
$('#cc').combobox('enable');
}
$( function() {
$('#cc').combobox( {
width:150,
listWidth:150,
listHeight:100,
//valuefield:'value',
//textField:'text',
//url:'combobox_data.json',
editable:false
});
});
</script>
</head>
<body>
<h1>ComboBox</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="loadData()">loadData</a>
<a href="#" onclick="setValue()">setValue</a> <a href="#"
onclick="getValue()">getValue</a> <a href="#" onclick="disable()">disable</a>
<a href="#" onclick="enable()">enable</a></div>
<span>Options:</span>
<select id="cc" name="dept" required="true">
<option value="">==请选择==</option>
<option value="0">苹果</option>
<option value="1">香蕉</option>
<option value="2">鸭梨</option>
<option value="3">西瓜</option>
<option value="4">芒果</option>
</select>
</body>
</html>
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"
}]
3.1.2 效果图
3.2 参数
属性名
类型
描述
默认值
width
数字
组件的宽度
auto
listWidth
数字
下拉列表的宽度
null
listHeight
数字
下拉列表的高度
null
valueField
字符串
基础数据值名称绑定到这个组合框
value
textField
字符串
基础数据的字段的名称绑定到这个组合框
text
editable
布尔
定义是否可以直接到文本域中键入文本
true
url
字符串
加载列表数据的远程URL
null
3.3 事件
事件名
参数
描述
onLoadSuccess
none
当远程数据成功加载时触发
onLoadError
none
当远程数据加载失败时触发
onSelect
record
当用户选择了一个列表项时触发
onChange
newValue, oldValue
当文本域字段的值改变时触发
3.4 方法
方法名
参数
描述
select
value
选择下拉列表中的一项
setValue
param
设定指定值到文本域,参数可以是一个字符串,也可以是一个Javascript对象,如果是对象,必须包含两个属性各对应valueField和TextField属性。
getValue
none
获取字段值
reload
url
请求远程列表数据.
4 Dialog(对话框)
4.1 实例
4.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#dd').dialog({
title:'对话框',
collapsible:true,
minimizable:true,
maximizable:true,
resizable:true,
toolbar:[{
text:'Add',
iconCls:'icon-add',
handler:function(){
alert('add');
}
},'-',{
text:'Save',
iconCls:'icon-save',
handler:function(){
alert('save');
}
}],
buttons:[{
text:'Ok',
iconCls:'icon-ok',
handler:function(){
alert('ok');
}
},{
text:'Cancel',
handler:function(){
$('#dd').dialog('close');
}
}]
});
});
function open1(){
$('#dd').dialog('open');
}
function close1(){
$('#dd').dialog('close');
}
</script>
</head>
<body>
<h1>Dialog</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="open1()">open1</a>
<a href="#" onclick="close1()">close1</a></div>
<div id="dd" icon="icon-save"
style="padding: 5px; width: 400px; height: 200px;">
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
</div>
</body>
</html>
4.1.2 效果图
4.2 参数
属性名
类型
描述
默认值
title
字符串
对话框的标题文本
New Dialog
collapsible
布尔
定义是否显示可折叠按钮
false
minimizable
布尔
定义是否显示最小化按钮
false
maximizable
布尔
定义是否显示最大化按钮
false
resizable
布尔
定义对话框是否可编辑大小
false
toolbar
数组
对话框上的工具条,每个工具条包括:
text,
iconCls,
disabled,
handler
etc.
null
buttons
数组
对话框底部的按钮,每个按钮包括:
text,
iconCls,
handler
etc.
null
4.3 事件
Dialog的事件和窗口(Window)的事件相同。
4.4 方法
Dialog的函数方法和窗口(Window)的相同。
5 Messager(提示框)
5.1 实例
5.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function show1(){
$.messager.show({
title:'My Title',
msg:'Message will be closed after 4 seconds.',
showType:'show'
});
}
function show2(){
$.messager.show({
title:'My Title',
msg:'Message will be closed after 5 seconds.',
timeout:5000,
showType:'slide'
});
}
function show3(){
$.messager.show({
title:'My Title',
msg:'Message never be closed.',
timeout:0,
showType:'fade'
});
}
function alert1(){
$.messager.alert('My Title','Here is a message!');
}
function alert2(){
$.messager.alert('My Title','Here is a error message!','error');
}
function alert3(){
$.messager.alert('My Title','Here is a info message!','info');
}
function alert4(){
$.messager.alert('My Title','Here is a question message!','question');
}
function alert5(){
$.messager.alert('My Title','Here is a warning message!','warning');
}
function confirm1(){
$.messager.confirm('My Title','Are you confirm this?', function(r){
if (r){
alert('confirmed:'+r);
location.href = 'http://www.google.com';
}
});
}
function prompt1(){
$.messager.prompt('My Title', 'Please type something', function(r){
if (r){
alert('you type:'+r);
}
});
}
$(function(){
$.messager.defaults={ok:"确定",cancel:"取消"};
});
</script>
</head>
<body>
<h1>Messager</h1>
<div><a href="javascript:void(0)" onclick="show1()">show</a> |<a
href="#" onclick="show2()">slide</a> |<a href="#" onclick="show3()">fade</a>
|</div>
<div><a href="#" onclick="alert1()">alert</a> |<a href="#"
onclick="alert2()">alert(error)</a> |<a href="#" onclick="alert3()">alert(info)</a>
| <a href="#" onclick="alert4()">alert(question)</a> |<a href="#"
onclick="alert5()">alert(warning)</a></div>
<div><a href="#" onclick="confirm1();">confirm</a></div>
<div><a href="#" onclick="prompt1()">prompt</a></div>
<div style="height: 600px;"></div>
</body>
</html>
5.1.2 效果图
5.2 方法
方法名
参数
描述
$.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):用户点击按钮后的回调函,参数是用户输入的内容。
5.3 扩展
可以通过$.messager.defaults方法自定义alert框的ok按钮和cancel按钮上显示的文字。
名字
类型
描述
默认值
ok
字符串
Ok
按钮上的文本
Ok
cancel
字符串
Cancel
按钮上的文本
Cancel
6 NumberBox(数字框)
6.1 实例
6.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function disable(){
$('#nn').numberbox('disable');
}
function enable(){
$('#nn').numberbox('enable');
}
$(function(){
$('#nn').numberbox({min:5.5,max:20,precision:2});
});
</script>
</head>
<body>
<h1>NumberBox</h1>
<p>The Box can only input number.</p>
<div style="margin-bottom: 10px;"><a href="#" onclick="disable()">disable</a>
<a href="#" onclick="enable()">enable</a></div>
<input id="nn" required="true" />
</body>
</html>
6.1.2 效果图
6.2 参数
选项名
类型
描述
默认值
min
数字
文本框中可允许的最小值
null
max
数字
文本框中可允许的最大值
null
precision
数字
最高可精确到小数点后几位
0
7 ValidateBox(验证框)
7.1 实例
7.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<style type="text/css">
input,textarea {
width: 200px;
border: 1px solid #ccc;
padding: 2px;
}
</style>
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function valid(){
alert($('#dfe').validatebox('isValid'));
}
$(function(){
$.extend($.fn.validatebox.defaults.rules, {
minLength: {
validator: function(value, param){
return value.length >= param[0];
},
message: 'Please enter at least {0} characters.'
}
});
});
</script>
</head>
<body>
<h1>ValidateBox<a href="#0" onclick="valid();">EmailisValid</a></h1>
<div>
<table>
<tr>
<td>Name:</td>
<td><input class="easyui-validatebox" required="true"
validType="length[1,3]"></td>
</tr>
<tr>
<td>Email:</td>
<td><input id="dfe" class="easyui-validatebox"
invalidMessage="email格式错误" validType="email"></td>
</tr>
<tr>
<td>URL:</td>
<td><input class="easyui-validatebox" required="true"
validType="url"></td>
</tr>
<tr>
<td>testr:</td>
<td><input class="easyui-validatebox" validType="minLength[5]"
invalidMessage="至少5个字符"></td>
</tr>
<tr>
<td>Note:</td>
<td><textarea class="easyui-validatebox" required="true"
missingMessage="必填" style="height: 100px;"></textarea></td>
</tr>
</table>
</div>
</body>
</html>
7.1.2 效果图
7.2 参数
属性名
类型
描述
默认值
required
布尔
定义文本域是否为必填项
false
validType
字符串
定义字段的验证类型
url(匹配电子邮件正则表达式规则), email(匹配URL正则表达式规则),length[0,100](允许字符串长度的范围)etc.null
missingMessage
字符串
当文本框为空时提示的文本信息
This field is required.
invalidMessage
字符串
当文本框内容不合法时提示的文本信息
null
7.3 方法
方法名
参数
描述
destroy
none
删除并且销毁组件
validate
none
做验证以确定文本框的内容是否是有效的。
isValid
none
调用验证方法并返回验证结果,true或者false
7.4 扩展
当然也可以自定义验证规则,重写$.fn.validatebox.defaults.rules可以定义一个校验器的功能和无效的显示消息。例如,要定义一个minLength有效的类型:
$.extend($.fn.validatebox.defaults.rules, {
minLength: {
validator: function(value, param){
return value.length >= param[0];
},
message: 'Please enter at least {0} characters.'
}
});定义好以后我们就可以使用了,下面的代码表示输入的最小长度是5个字符:
<input class="easyui-validatebox" validType="minLength[5]">
8 Pagination(分页)
8.1 实例
8.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#pp').pagination({
total:114,
pageSize:15,
pageNumber:2,
pageList:[10,15,20,30,50,100],
loading:false,
showPageList:true,
showRefresh:true,
beforePageText:'第',
afterPageText:'页,共{pages}页',
displayMsg:'{from}-{to}/{total}',
buttons:[{
iconCls:'icon-add',
handler:function(){
alert('add');
}
},{
iconCls:'icon-cut',
handler:function(){
alert('cut');
}
},{
iconCls:'icon-save',
handler:function(){
alert('save');
}
}],
onSelectPage:function(pageNumber, pageSize){
$(this).pagination('loading');
alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
$(this).pagination('loaded');
}
});
});
</script>
</head>
<body>
<h1>Pagination</h1>
<div style="margin: 10px 0;"><a href="#"
onclick="javascript:$('#pp').pagination({loading:false})">loaded</a> <a
href="#" onclick="javascript:$('#pp').pagination({loading:true})">loading</a>
</div>
<div id="pp"
style="width: 500px; background: #efefef; border: 1px solid #ccc;"></div>
</body>
</html>
8.1.2 效果图
8.2 参数
属性名
类型
描述
默认值
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
8.3 事件
事件名
参数
描述
onSelectPage
pageNumber, pageSize
当用户选择一个新页时触发,回调函数包含两个参数:pageNumber: 新页面的页数pageSize:新页面的大小
onBeforeRefresh
ageNumber, pageSize
刷新按钮被点击之前触发,如果返回false则取消刷新操作
onRefresh
ageNumber, pageSize
刷新以后触发
onChangePageSize
ageSize
改变页面大小时触发
9 Window(窗口)
窗口的主要用法和面板(panel)用法差不多
9.1 实例
9.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html style="height:100%;width:100%;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function resize(){
$('#w').window({
title: 'yewen2',
width: 600,
collapsible:false,
minimizable:false,
maximizable:false,
closable:false,
closed: false,
height: 300,
draggable:false,
resizable:false,
shadow:false,
modal:true
});
}
function open1(){
$('#w').window('open');
}
function close1(){
$('#w').window('close');
}
function test(){
$('#test').window('open');
}
</script>
</head>
<body style="height: 100%; width: 100%; overflow: hidden; border: none;">
<h1>Window</h1>
<div><a href="javascript:void(0)" onclick="resize()">resize</a> <a
href="javascript:void(0)" onclick="open1()">open</a> <a
href="javascript:void(0)" onclick="close1()">close</a></div>
<div id="w" class="easyui-window" title="My Window" icon="icon-save"
style="width: 500px; height: 200px; padding: 5px; background: #fafafa;">
<div class="easyui-layout" fit="true">
<div region="center" border="false"
style="padding: 10px; background: #fff; border: 1px solid #ccc;">
jQuery EasyUI framework help you build your web page easily. <br />
<br />
click <a href="#" onclick="test()">here</a> topopup another window.</div>
<div region="south" border="false"
style="text- align: right; height: 30px; line-height: 30px;"><a
class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)"
onclick="resize()">Ok</a> <a class="easyui-linkbutton"
icon="icon-cancel" href="javascript:void(0)" onclick="resize()">Cancel</a>
</div>
</div>
</div>
<div id="test" class="easyui-window" closed="true" modal="true"
title="Test Window" style="width: 300px; height: 100px;"></div>
</body>
</html>
9.1.2 效果图
9.2 参数
大多数的属性和面板(panel)的属性是相同的,下面列出一些Window私有的属性:
属性名
类型
描述
默认值
zIndex
数字
窗口的z-index属性,可以通过这个属性来增加
9000
draggable
布尔
定义窗口是否可被拖动
true
resizable
布尔
定义窗口是否可以被改变大小
true
shadow
布尔
如果设置为true,窗口的阴影也将显示。
true
modal
布尔
定义窗口是否是一个模式窗口。
false
Window也重写了Panel里的一些属性
属性名
类型
描述
默认值
title
字符串
窗口的标题文本
New Window
collapsible
布尔
定义是否显示可折叠定义按钮
true
minimizable
布尔
定义是否显示最小化按钮
true
maximizable
布尔
定义是否显示最大化按钮
true
closable
布尔
定义是否显示关闭按钮
true
9.3 事件
Window的事件和面板(panel)的事件相同
9.4 方法
除了”header”和”body”以外,Window的函数方法和面板(panel)的相同
10 Panel(面板)
10.1 实例
10.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function open1(){
$('#p').panel('open');
}
function close1(){
$('#p').panel('close');
}
function load1(){
$('#p').panel({
href:'tabs_href_test.html'
});
$('#p').panel('open');
}
</script>
</head>
<body style="background: #fafafa;">
<h1>Panel</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="open1()">open</a>
<a href="#" onclick="close1()">close</a> <a href="#" onclick="load1()">load</a>
</div>
<div
style="width: 600px; height: 300px; border: 1px solid red; padding: 5px;">
<div id="p" class="easyui-panel" title="My Title" icon="icon-save"
collapsible="true" minimizable="true" maximizable=true closable="true"
style="width: 500px; height: 150px; padding: 10px; background: #fafafa;">
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
</div>
</div>
</body>
</html>
10.1.2 效果图
10.2 参数
名字
类型
描述
默认值
title
字符串
在面板头部显示的标题文本
null
iconCls
字符串
一个CSS类来显示在面板中的16x16图标
null
width
数字
设置面板的宽度
auto
height
数字
设置面板的高度
auto
left
数字
设置面板左侧位置
null
top
数字
设置面板的顶部位置
null
cls
字符串
给面板添加一个CSS类
null
headerCls
字符串
给面板头部添加一个CSS类
null
bodyCls
字符串
给面板主体添加一个CSS类
null
style
对象
给面板自定义样式
{}
fit
布尔
当设置为true,面板尺寸将适合它的父容器。
false
border
布尔
定义面板的边框
true
doSize
布尔
当设置为true,面板载创建的时候将被调整和重新布局
true
collapsible
布尔
定义是否显示可折叠定义按钮
false
minimizable
布尔
定义是否显示最小化按钮
false
maximizable
布尔
定义是否显示最大化按钮
false
closable
布尔
定义是否显示关闭按钮
false
tools
数组
自定义工具,每个工具可以包含两个属性:iconCls and handler
[]
collapsed
布尔
定义在初始化的时候折叠面板
false
minimized
布尔
定义在初始化的时候最小化面板
false
maximized
布尔
定义在初始化的时候最大化面板
false
closed
布尔
定义在初始化的时候关闭面板
false
href
字符串
一个远程的URL加载数据,然后显示在面板中
null
loadingMessage
字符串
当加载远程数据时,在面板中显示的信息
Loading…
10.3 事件
名字
参数
描述
onLoad
none
当远程数据加载时触发
onBeforeOpen
none
当面板打开之前触发
onOpen
none
当面板打开之后触发
onBeforeClose
none
当面板关闭之前触发
onClose
none
当面板关闭之后触发
onBeforeDestroy
none
当面板销毁之前触发
onDestroy
none
当面板关闭之后触发
onBeforeCollpase
none
当面板折叠之前触发
onCollapse
none
当面板折叠之后触发
onBeforeExpand
none
当面板展开之前触发
onExpand
none
当面板展开之后触发
onResize
width, height
当面板调整大小之后触发width: 新的宽度;height:新的高度
onMove
left,top
当面板移动之后触发left: 新的左侧位置top:新的顶部位置
onMaximize
none
当窗口最大化的时候被触发
onRestore
none
当窗口恢复到原来的大小时被触发
onMinimize
none
当窗口最小化的时候被触发
10.4 方法
名字
参数
描述
options
none
返回设置的属性值
panel
none
返回面板对象
header
none
返回面板头部对象
body
none
返回面板主体对象
setTitle
title
设置面板头部标题
open
forceOpen
当forceOpen设置为true,面板被打开的时候忽略onBeforeOpen回调函数
close
forceClose
当forceClose设置为true,面板被关闭的时候忽略onBeforeClose回调函数
destroy
forceDestroy
当forceDestroy设置为true,面板被销毁的时候忽略onBeforeDestroy回调函数
refresh
none
当设置了href值时,刷新面板来加载远程数据
resize
options
设置面板的大小和布局,这些选项包含以下的属性:width: 新面板的宽度; height:新面板的高度; left:新面板的左侧位置; top:新面板的顶部位置
move
options
移动面板到一个新的位置,这些选项包含以下属性: left: 新面板的左侧位置;top:新面板的顶部位置
11 Tabs(标签)
11.1 实例
11.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
var index = 0;
function addTab(){
index++;
$('#tt').tabs('add',{
title:'New Tab ' + index,
content:'Tab Body ' + index,
closable:true
});
}
</script>
</head>
<body>
<h1>Tabs</h1>
<div>
<a class="easyui-linkbutton" icon="icon-add" href="javascript:void(0)" onclick="addTab()">add tab</a>
</div>
<br/>
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;display:none;">
</div>
<div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;" cache="false" href="tabs_href_test.html"> This is Tab2 width close
button.</div>
<div title="Tab3" icon="icon-reload" closable="true" style="padding:20px;display:none;">
<table id="test" class="easyui-datagrid" fit="true">
<thead>
<tr>
<th field="f1" width="60">field1</th>
<th field="f2" width="60">field2</th>
<th field="f3" width="60">field3</th>
</tr>
</thead>
<tbody>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
</tr>
<tr>
<td>d11</td>
<td>d21</td>
<td>d31</td>
</tr>
</tbody>
</table>
</div>
<div title="Tab4 with iframe" closable="true" style="width:100%;height:100%;display:none;">
<iframe scrolling="yes" frameborder="0" src="http://www.google.com" style="width:100%;height:100%;"></iframe>
</div>
<div title="Tab5 with sub tabs" closable="true" icon="icon-cut" style="padding:10px;display:none;">
<div class="easyui-tabs" fit="true" plain="true" style="height:100px;width:300px;">
<div title="Title1">Content 1</div>
<div title="Title2">Content 2</div>
<div title="Title3">Content 3</div>
</div>
</div>
</div>
</body>
</html>
11.1.2 效果图
11.2 参数
参数名
参数
描述
默认值
width
数字
标签容器的宽度
auto
height
数字
标签容器的高度
auto
idSeed
数字
The base id seed to generate tab panel’s DOM id attribute.
0
plain
布尔
如果为ture标签没有背景图片
false
fit
布尔
如果为ture则设置标签的大小以适应它的容器的父容器
false
border
布尔
如果为true则显示标签容器的边框
true
scrollIncrement
数字
滚动按钮每次被按下时滚动的像素值
100
scrollDuration
数字
每次滚动持续的毫秒数
400
11.3 事件
事件名
参数
描述
onLoad
arguments
当一个AJAX标签加载远程数据完成时被触发,参数和jQuery.ajax成功返回的回调函数相同
onSelect
title
当用户选择一个标签面板时被触发
onClose
title
当用户关闭一个标签面板时被触发
11.4 方法
方法名
参数
描述
resize
none
调整标签容器的大小和布局
add
options
添加新标签面板,可选参数是一个配置对象,详细信息可以查看下面的标签面板属性
close
title
关闭一个标签面板,标题参数表明被关闭的面板
select
title
选择一个标签面板
exists
title
指示特定的标签是否存在
11.5 标签面板属性
属性名
类型
描述
默认值
id
字符串
标签面板的ID属性
null
title
字符串
标签面板的文本标题
content
字符串
标签面板的主体内容
href
字符串
填充标签内容的远程URL地址
null
cache
布尔
如果为true,当设置href时,对标签面板进行缓存
true
icon
字符串
标签面板上标题的图标CSS类
null
closable
布尔
如果为true,标签面板会显示出关闭按钮,点击可以关闭选项卡面板。
false
selected
布尔
如果为true,标签标签面板将被选中
false
width
数字
标签面板的宽度
auto
height
数字
标签面板的高度
auto
12 Tree(树)
12.1 实例
12.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
$('#tt1').tree({
animate:true,
onClick:function(node){
alert('you click '+node.text);
}
});
$('#tt2').tree({
checkbox: true,
url: 'tree_data.json',
onClick:function(node){
alert('you click '+node.text);
}
});
});
function reload(){
$('#tt2').tree('reload');
}
function getChecked(){
var nodes = $('#tt2').tree('getChecked');
var s = '';
for(var i=0; i<nodes.length; i++){
if (s != '') s += ',';
s += nodes[i].text;
}
alert(s);
}
function getSelected(){
var node = $('#tt2').tree('getSelected');
alert(node.text);
}
function collapse(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('collapse',node.target);
}
function expand(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('expand',node.target);
}
function append(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('append',{
parent: node.target,
data:[{
text:'new1'
},{
text:'new2',
state:'closed',
children:[{
text:'subnew1'
},{
text:'subnew2'
}]
}]
});
}
function remove(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('remove', node.target);
}
function isLeaf(){
var node = $('#tt2').tree('getSelected');
var b = $('#tt2').tree('isLeaf', node.target);
alert(b)
}
</script>
</head>
<body>
<h1>Tree</h1>
<p>Create from HTMLmarkup</p>
<ul id="tt1" class="easyui-tree">
<li><span>Folder</span>
<ul>
<li><span>Sub Folder 1</span>
<ul>
<li><span><a href="#">File 11</a></span></li>
<li><span>File 12</span></li>
<li><span>File 13</span></li>
</ul>
</li>
<li><span>File 2</span></li>
<li><span>File 3</span></li>
</ul>
</li>
<li><span>File21</span></li>
</ul>
<hr></hr>
<p>Create from JSON data</p>
<div style="margin: 10px;"><a href="#" onclick="reload()">reload</a>
<a href="#" onclick="getChecked()">getChecked</a> <a href="#"
onclick="getSelected()">getSelected</a> <a href="#"
onclick="collapse()">collapse</a> <a href="#" onclick="expand()">expand</a>
<a href="#" onclick="append()">append</a> <a href="#" onclick="remove()">remove</a>
<a href="#" onclick="isLeaf()">isLeaf</a></div>
<ul id="tt2"></ul>
</body>
</html>
12.1.2 效果图
12.2 参数
选项名
类型
描述
默认值
url
字符串
一个网址retrive远程数据。
null
animate
布尔
当节点展开或折叠是否显示动画效果。
false
checkbox
布尔
是否带复选框
False
12.3 事件
事件名
参数
描述
onClick
node
用户点击一个节点时触发。,该节点参数包含以下属性:
id:节点ID
text:节点的文本
attributes:节点自定义属性
target:点击DOM对象的目标
onDblClick
node
用户双击一个节点时触发,参数同onclick事件
onLoadSuccess
arguments
加载数据成功时触发,参数arguments类似jQuery.ajax.的success函数
onLoadError
arguments
加载数据成功时触发,参数arguments类似jQuery.ajax.的error函数
12.4 方法
方法名
参数
描述
options
none
返回树的所有参数对象
loadData
data
加载树的数据
reload
none
重新加载树的数据
getRoot
none
返回树的root节点
getRoots
none
返回树的所有root节点
getParent
target
返回某个节点的父节点
getChildren
target
返回某个节点的孩子节点
getChecked
none
获取被勾选的节点
getSelected
none
获取选中的节点,并返回它,如果没有节点选择返回null。
isLeaf
target
判断某个节点是否叶子节点
select
target
选择一个节点,目标参数表明该节点的DOM对象。
collapse
target
折叠节点,目标参数表明该节点的DOM对象。
expand
target
展开一个节点,目标参数表明该节点的DOM对象。
collapseAll
none
折叠所有节点
expandAll
none
展开所有节点
append
param
一些子节点追加到父节点。参数有两个属性:
parent: DOM对象,父节点追加。
data:数组,节点数据。
toggle
target
绑定某个节点的展开或者折叠状态,使之不能再改变。
remove
target
删除一个节点和它的子节点,目标参数表明该节点的DOM对象。
update
param
更新指定的节点,参数param包含如下属性:
Target:目标节点;
id,text,iconCls,checked,etc.
13 Layout(布局)
13.1 实例
此例最外层写在了body上,也可以写在某个div上。
13.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
var p = $('body').layout('panel','west').panel({
onCollapse:function(){
alert('collapse');
}
});
setTimeout(function(){
$('body').layout('collapse','east');
},0);
});
</script>
</head>
<body class="easyui-layout">
<div region="north" border="false" style="height:60px;background:#B3DFDA;">north region</div>
<div region="west" split="true" title="West" style="width:150px;padding:10px;">west content</div>
<div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div>
<div region="south" border="false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div region="center" title="Main Title">
</div>
</body>
</html>
13.1.2 效果图
13.2 参数
所有属性都必须定义在布局面板创建的<div/>标记上。
名称
类型
描述
默认值
title
字符串
布局面板的标题文本
null
region
字符串
定义布局面板的位置,该值是下列之一: north, south, east, west, center.
border
布尔
如果为ture则显示布局面板的边框
true
split
布尔
如果为ture则显示分隔栏,用户可以用它来改变布局面板的大小
false
icon
字符串
在面板头部显示图标的CSS
null
href
字符串
从远程地址加载数据的URL
null
13.3 方法
方法名
参数
描述
panel
region
返回某个方位的面板,参数region取值可以是:north,south,east,west,center
collapse
region
收缩某个方位的面板,参数region取值可以是:north,south,east,west
expand
region
展开某个方位的面板,参数region取值可以是:north,south,east,west
14 Datagrid(数据表)
14.1 实例
14.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#test').datagrid({
title:'My Title',
iconCls:'icon-save',
width:800,
height:450,
nowrap: true,
striped: true,
url:'datagrid_data.json',
sortName: 'code',
sortOrder: 'desc',
idField:'code',
frozenColumns:[[
{field:'ck',checkbox:true},
{title:'code',field:'code',width:80,sortable:true}
]],
columns:[[
{title:'Base Information',colspan:3},
{field:'opt',title:'Operation',width:100,align:'center', rowspan:2,
formatter:function(value,rec){
return '<span style="color:red">Edit Delete</span>';
}
}
],[
{field:'name',title:'Name',width:120},
{field:'addr',title:'Address',width:120,rowspan:2,sortable:true},
{field:'col4',title:'Col41',width:150,rowspan:2}
]],
pagination:true,
rownumbers:true,
singleSelect:true,
toolbar:[{
text:'Add',
iconCls:'icon-add',
handler:function(){
alert('add')
}
},{
text:'Cut',
iconCls:'icon-cut',
disabled:true,
handler:function(){
alert('cut')
}
},'-',{
text:'Save',
iconCls:'icon-save',
handler:function(){
alert('save')
}
}]
});
var p = $('#test').datagrid('getPager');
if (p){
$(p).pagination({
onBeforeRefresh:function(){
alert('before refresh');
}
});
}
});
function resize(){
$('#test').datagrid({
title: 'New Title',
striped: true,
width: 650,
queryParams:{
p:'param test',
name:'My Name'
}
});
}
function getSelected(){
var selected = $('#test').datagrid('getSelected');
alert(selected.code+":"+selected.name);
}
function getSelections(){
var ids = [];
var rows = $('#test').datagrid('getSelections');
for(var i=0;i<rows.length;i++){
ids.push(rows[i].code);
}
alert(ids.join(':'))
}
function clearSelections(){
$('#test').datagrid('clearSelections');
}
function selectRow(){
$('#test').datagrid('selectRow',2);
}
function selectRecord(){
$('#test').datagrid('selectRecord','002');
}
function unselectRow(){
$('#test').datagrid('unselectRow',2);
}
</script>
</head>
<body>
<h1>DataGrid</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="resize()">resize</a>
<a href="#" onclick="getSelected()">getSelected</a> <a href="#"
onclick="getSelections()">getSelections</a> <a href="#"
onclick="clearSelections()">clearSelections</a> <a href="#"
onclick="selectRow()">selectRow</a> <a href="#"
onclick="selectRecord()">selectRecord</a> <a href="#"
onclick="unselectRow()">unselectRow</a></div>
<table id="test"></table>
</body>
</html>
14.1.2 效果图
14.2 参数
Name
Type
Description
Default
title
字符串
标题文字
null
iconCls
字符串
一个css类,将提供一个背景图片作为标题图标
null
border
布尔
是否显示面板的边界。
true
width
数字
表格的宽度
auto
height
数字
表格的高度
auto
columns
数组
表格的列的配置对象,详见下面column属性介绍。
null
frozenColumns
数组
与columns属性相通,但这些列将固定在左侧,不得变动。
null
striped
布尔
是否显示斑马线
false
method
字符串
远程数据的获取类型,可取值为post或get
post
nowrap
布尔
是否在一行显示数据
true
idField
字符串
指定哪些字段时标识字段
null
url
字符串
从远程请求数据的地址
null
loadMsg
字符串
当远程加载数据时,现实的等待信息提示
Processing, please wait …
pagination
布尔
是否显示底部分页工具栏
false
rownumbers
布尔
是否显示行号列
false
singleSelect
布尔
是否允许只选择一行
false
fit
布尔
是否允许表格自动缩放,以适应父容器
false
pageNumber
数字
初始化页码
1
pageSize
数字
初始化页面大小
10
pageList
数组
初始化页面大小选择清单
[10,20,30,40,50]
queryParams
对象
当请求远程数据时,发送的额外的参数
{}
sortName
字符串
定义哪一列可以排序
null
sortOrder
字符串
定义列排序的方式,递增(asc)或递减(desc)
asc
editors
对象
定义当编辑某行数据时的编辑器
predefined editors
14.3 Column参数
Name
Type
Description
Default
title
字符串
列标题文字
undefined
field
字符串
列字段名称
undefined
width
数字
列宽度
undefined
rowspan
数字
该列占几行单元格
undefined
colspan
数字
该列占几列单元格
undefined
align
字符串
数据对其方式,可选值有left,right,center
undefined
sortable
布尔
是否允许该列排序
undefined
checkbox
布尔
是否显示选择框
undefined
formatter
函数
包含三个参数:
value: the field value.
rowData: the row record data
rowIndex: the row index.
undefined
editor
string,object
Indicate the edit type. When string indicates the edit type, when object contains two properties:
type: string, the edit type, possible type is: text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree.
options: object, the editor options corresponding to the edit type.
undefined
14.4 事件
Name
Parameters
Description
onLoadSuccess
data
远程数据加载成功时触发
onLoadError
none
远程数据加载失败时触发
onBeforeLoad
data
请求发出去,加载数据前触发。如果返回false,加载数据动作则退出
onClickRow
rowIndex, rowData
当用户点击某行时触发, the parameters contains:
rowIndex: the clicked row index, start with 0
rowData: the record corresponding to the clicked row
onDblClickRow
rowIndex, rowData
当用户双击某行时触发, the parameters contains:
rowIndex: the clicked row index, start with 0
rowData: the record corresponding to the clicked row
onSortColumn
sort, order
当用户排序某列时触发, the parameters contains:
sort: the sort column field name
order: the sort column order
onSelect
rowIndex, rowData
当用户选择某行时触发, the parameters contains:
rowIndex: the selected row index, start with 0
rowData: the record corresponding to the selected row
onUnselect
rowIndex, rowData
当用户取消选择某行时触发, the parameters contains:
rowIndex: the unselected row index, start with 0
rowData: the record corresponding to the unselected row
onBeforeEdit
rowIndex, rowData
当用户开始编辑某行时触发, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row
onAfterEdit
rowIndex, rowData, changes
当用户完成编辑某行时触发, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row
changes: the changed field/value pairs
onCancelEdit
rowIndex, rowData
当用户退出编辑某行时触发, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row
14.5 方法
Name
Parameter
Description
options
none
返回所有参数的对象
getPager
none
返回分页对象
resize
none
调整表格大小
reload
param
重新加载行
fixColumnSize
none
固定列的大小
loadData
param
加载本地数据,旧行将被删除
getData
none
返回已加载的数据
getRows
none
返回当前页的行数
getSelected
none
返回第一次选择的行记录
getSelections
none
返回所有选定行,如果没选择记录,则返回空数组
clearSelections
none
取消所有选择
selectAll
none
选择当前页所有行
selectRow
index
选择某行,行索引以0开始
selectRecord
idValue
通过id值选择一行
unselectRow
index
取消选择某行
beginEdit
index
开始编辑某行
endEdit
index
结束编辑某行
cancelEdit
index
退出编辑某行
refreshRow
index
刷新一行的数据
appendRow
row
添加新行
deleteRow
index
删除一行
getChanges
type
Get changed rows since the last commit. The type parameter indicate which type changed rows, possible value is: inserted,deleted,updated,etc. When the type parameter is not assigned, return all changed rows.
acceptChanges
none
Commits all the changes data since it was loaded or since the last time acceptChanges was called.
rejectChanges
none
Rolls back all the changes data since it was created, or since the last time acceptChanges was called.
目 录
1Accordion(可折叠标签) 2
1.1实例 2
1.2参数 3
2DateBox(日期框) 4
2.1实例 4
2.2参数 6
2.3事件 6
2.4方法 6
3ComboBox(组合框) 7
3.1实例 7
3.2参数 9
3.3事件 9
3.4方法 9
4Dialog(对话框) 10
4.1实例 10
4.2参数 12
4.3事件 12
4.4方法 12
5Messager(提示框) 12
5.1实例 12
5.2方法 15
5.3扩展 16
6NumberBox(数字框) 16
6.1实例 16
6.2参数 17
7ValidateBox(验证框) 18
7.1实例 18
7.2参数 20
7.3方法 20
7.4扩展 20
8Pagination(分页) 20
8.1实例 20
8.2参数 22
8.3事件 23
9Window(窗口) 23
9.1实例 23
9.2参数 25
9.3事件 26
9.4方法 26
10Panel(面板) 26
10.1实例 26
10.2参数 28
10.3事件 29
10.4方法 29
11Tabs(标签) 30
11.1实例 30
11.2参数 32
11.3事件 32
11.4方法 33
11.5标签面板属性 33
12Tree(树) 33
12.1实例 33
12.2参数 36
12.3事件 37
12.4方法 37
13Layout(布局) 38
13.1实例 38
13.2参数 39
13.3方法 39
14Datagrid(数据表) 39
14.1实例 39
14.2参数 43
14.3Column参数 44
14.4事件 45
14.5方法 46
1 Accordion(可折叠标签)
1.1 实例
1.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript">
$( function() {
$('#aa').accordion( {
width : 400,
height : 200,
fit : false
});
});
</script>
</head>
<body>
<div id="aa" border="true" >
<div title="Title1" icon="icon-save" style="overflow: auto; padding: 10px;">
<h3 style="color: #0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Title2" icon="icon-reload" selected="true"
style="padding: 10px;">content2</div>
<div title="Title3">content3</div>
</div>
</body>
</html>
1.1.2 效果图
1.1.3 扩展
实例html代码中
<div id="aa" border="true" >
此行也可写成
<div id="aa"class="easyui-accordion"style="width:300px;height:200px;"fit="false"border="false">
,并且将js代码全部去掉,效果图是一样的。
1.2 参数
1.2.1 容器参数
参数名称
参数类型
描述
默认值
width
数字
可折叠标签的宽度。
auto
height
数字
可折叠标签的高度。
auto
fit
布尔
是否使可折叠标签自动缩放以适应父容器的大小,当为true时width和height参数将失效。
false
border
布尔
是否显示边界线。
true
1.2.2 面板参数
可折叠标签面板继承自面板(panel),许多属性定义在<div />标签里,下面的属性就是如此:
参数名称
参数类型
描述
默认值
selected
布尔
设置可折叠标签中默认展开的标签页
false
2 DateBox(日期框)
2.1 实例
2.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function disable() {
$('#dd').datebox('disable');
}
function enable() {
$('#dd').datebox('enable');
}
/*
将Date/String类型,解析为String类型.
传入String类型,则先解析为Date类型
不正确的Date,返回''
如果时间部分为0,则忽略,只返回日期部分.
*/
function formatDate(v) {
if (v instanceof Date) {
var y = v.getFullYear();
var m = v.getMonth() + 1;
var d = v.getDate();
var h = v.getHours();
var i = v.getMinutes();
var s = v.getSeconds();
var ms = v.getMilliseconds();
if (ms > 0)
return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s
+ '.' + ms;
if (h > 0 || i > 0 || s > 0)
return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;
return y + '-' + m + '-' + d;
}
return '';
}
$( function() {
$('#dd').datebox( {
currentText : '今天',
closeText : '关闭',
disabled : false,
required : true,
missingMessage : '必填',
formatter : formatDate
});
});
</script>
</head>
<body>
<h1>DateBox</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick=
disable();
>disable</a>
<a href="#" onclick=
enable();
>enable</a></div>
<input id="dd"></input>
</body>
</html>
2.1.2 效果图
2.2 参数
属性名
类型
描述
默认值
currentText
字符串
为当前日期按钮显示的文本
Today
closeText
字符串
关闭按钮显示的文本
Close
disabled
布尔
如果为true则禁用输入框
false
required
布尔
定义输入框是否为必添
false
missingMessage
字符串
当输入框为空时提示的文本
必填
formatter
function
格式化日期的函数,这个函数以’date’为参数,并且返回一个字符串
——
parser
function
分析字符串的函数,这个函数以’date’为参数并返回一个日期
——
2.3 事件
事件名
参数
描述
onSelect
date
当选择一个日期时触发
2.4 方法
方法名
参数
描述
destroy
none
销毁组件
disable
none
禁用输入框.
enable
none
启用输入框
3 ComboBox(组合框)
3.1 实例
3.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function loadData(){
$('#cc').combobox({
url:'combobox_data.json',//该文件内容在下面
valueField:'id',
textField:'text'
});
}
function setValue(){
$('#cc').combobox('setValue','2');
}
function getValue(){
var val = $('#cc').combobox('getValue');
alert(val);
}
function disable(){
$('#cc').combobox('disable');
}
function enable(){
$('#cc').combobox('enable');
}
$( function() {
$('#cc').combobox( {
width:150,
listWidth:150,
listHeight:100,
//valuefield:'value',
//textField:'text',
//url:'combobox_data.json',
editable:false
});
});
</script>
</head>
<body>
<h1>ComboBox</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="loadData()">loadData</a>
<a href="#" onclick="setValue()">setValue</a> <a href="#"
onclick="getValue()">getValue</a> <a href="#" onclick="disable()">disable</a>
<a href="#" onclick="enable()">enable</a></div>
<span>Options:</span>
<select id="cc" name="dept" required="true">
<option value="">==请选择==</option>
<option value="0">苹果</option>
<option value="1">香蕉</option>
<option value="2">鸭梨</option>
<option value="3">西瓜</option>
<option value="4">芒果</option>
</select>
</body>
</html>
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"
}]
3.1.2 效果图
3.2 参数
属性名
类型
描述
默认值
width
数字
组件的宽度
auto
listWidth
数字
下拉列表的宽度
null
listHeight
数字
下拉列表的高度
null
valueField
字符串
基础数据值名称绑定到这个组合框
value
textField
字符串
基础数据的字段的名称绑定到这个组合框
text
editable
布尔
定义是否可以直接到文本域中键入文本
true
url
字符串
加载列表数据的远程URL
null
3.3 事件
事件名
参数
描述
onLoadSuccess
none
当远程数据成功加载时触发
onLoadError
none
当远程数据加载失败时触发
onSelect
record
当用户选择了一个列表项时触发
onChange
newValue, oldValue
当文本域字段的值改变时触发
3.4 方法
方法名
参数
描述
select
value
选择下拉列表中的一项
setValue
param
设定指定值到文本域,参数可以是一个字符串,也可以是一个Javascript对象,如果是对象,必须包含两个属性各对应valueField和TextField属性。
getValue
none
获取字段值
reload
url
请求远程列表数据.
4 Dialog(对话框)
4.1 实例
4.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#dd').dialog({
title:'对话框',
collapsible:true,
minimizable:true,
maximizable:true,
resizable:true,
toolbar:[{
text:'Add',
iconCls:'icon-add',
handler:function(){
alert('add');
}
},'-',{
text:'Save',
iconCls:'icon-save',
handler:function(){
alert('save');
}
}],
buttons:[{
text:'Ok',
iconCls:'icon-ok',
handler:function(){
alert('ok');
}
},{
text:'Cancel',
handler:function(){
$('#dd').dialog('close');
}
}]
});
});
function open1(){
$('#dd').dialog('open');
}
function close1(){
$('#dd').dialog('close');
}
</script>
</head>
<body>
<h1>Dialog</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="open1()">open1</a>
<a href="#" onclick="close1()">close1</a></div>
<div id="dd" icon="icon-save"
style="padding: 5px; width: 400px; height: 200px;">
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
<p>dialog content.</p>
</div>
</body>
</html>
4.1.2 效果图
4.2 参数
属性名
类型
描述
默认值
title
字符串
对话框的标题文本
New Dialog
collapsible
布尔
定义是否显示可折叠按钮
false
minimizable
布尔
定义是否显示最小化按钮
false
maximizable
布尔
定义是否显示最大化按钮
false
resizable
布尔
定义对话框是否可编辑大小
false
toolbar
数组
对话框上的工具条,每个工具条包括:
text,
iconCls,
disabled,
handler
etc.
null
buttons
数组
对话框底部的按钮,每个按钮包括:
text,
iconCls,
handler
etc.
null
4.3 事件
Dialog的事件和窗口(Window)的事件相同。
4.4 方法
Dialog的函数方法和窗口(Window)的相同。
5 Messager(提示框)
5.1 实例
5.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function show1(){
$.messager.show({
title:'My Title',
msg:'Message will be closed after 4 seconds.',
showType:'show'
});
}
function show2(){
$.messager.show({
title:'My Title',
msg:'Message will be closed after 5 seconds.',
timeout:5000,
showType:'slide'
});
}
function show3(){
$.messager.show({
title:'My Title',
msg:'Message never be closed.',
timeout:0,
showType:'fade'
});
}
function alert1(){
$.messager.alert('My Title','Here is a message!');
}
function alert2(){
$.messager.alert('My Title','Here is a error message!','error');
}
function alert3(){
$.messager.alert('My Title','Here is a info message!','info');
}
function alert4(){
$.messager.alert('My Title','Here is a question message!','question');
}
function alert5(){
$.messager.alert('My Title','Here is a warning message!','warning');
}
function confirm1(){
$.messager.confirm('My Title','Are you confirm this?', function(r){
if (r){
alert('confirmed:'+r);
location.href = 'http://www.google.com';
}
});
}
function prompt1(){
$.messager.prompt('My Title', 'Please type something', function(r){
if (r){
alert('you type:'+r);
}
});
}
$(function(){
$.messager.defaults={ok:"确定",cancel:"取消"};
});
</script>
</head>
<body>
<h1>Messager</h1>
<div><a href="javascript:void(0)" onclick="show1()">show</a> |<a
href="#" onclick="show2()">slide</a> |<a href="#" onclick="show3()">fade</a>
|</div>
<div><a href="#" onclick="alert1()">alert</a> |<a href="#"
onclick="alert2()">alert(error)</a> |<a href="#" onclick="alert3()">alert(info)</a>
| <a href="#" onclick="alert4()">alert(question)</a> |<a href="#"
onclick="alert5()">alert(warning)</a></div>
<div><a href="#" onclick="confirm1();">confirm</a></div>
<div><a href="#" onclick="prompt1()">prompt</a></div>
<div style="height: 600px;"></div>
</body>
</html>
5.1.2 效果图
5.2 方法
方法名
参数
描述
$.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):用户点击按钮后的回调函,参数是用户输入的内容。
5.3 扩展
可以通过$.messager.defaults方法自定义alert框的ok按钮和cancel按钮上显示的文字。
名字
类型
描述
默认值
ok
字符串
Ok
按钮上的文本
Ok
cancel
字符串
Cancel
按钮上的文本
Cancel
6 NumberBox(数字框)
6.1 实例
6.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function disable(){
$('#nn').numberbox('disable');
}
function enable(){
$('#nn').numberbox('enable');
}
$(function(){
$('#nn').numberbox({min:5.5,max:20,precision:2});
});
</script>
</head>
<body>
<h1>NumberBox</h1>
<p>The Box can only input number.</p>
<div style="margin-bottom: 10px;"><a href="#" onclick="disable()">disable</a>
<a href="#" onclick="enable()">enable</a></div>
<input id="nn" required="true" />
</body>
</html>
6.1.2 效果图
6.2 参数
选项名
类型
描述
默认值
min
数字
文本框中可允许的最小值
null
max
数字
文本框中可允许的最大值
null
precision
数字
最高可精确到小数点后几位
0
7 ValidateBox(验证框)
7.1 实例
7.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<style type="text/css">
input,textarea {
width: 200px;
border: 1px solid #ccc;
padding: 2px;
}
</style>
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function valid(){
alert($('#dfe').validatebox('isValid'));
}
$(function(){
$.extend($.fn.validatebox.defaults.rules, {
minLength: {
validator: function(value, param){
return value.length >= param[0];
},
message: 'Please enter at least {0} characters.'
}
});
});
</script>
</head>
<body>
<h1>ValidateBox<a href="#0" onclick="valid();">EmailisValid</a></h1>
<div>
<table>
<tr>
<td>Name:</td>
<td><input class="easyui-validatebox" required="true"
validType="length[1,3]"></td>
</tr>
<tr>
<td>Email:</td>
<td><input id="dfe" class="easyui-validatebox"
invalidMessage="email格式错误" validType="email"></td>
</tr>
<tr>
<td>URL:</td>
<td><input class="easyui-validatebox" required="true"
validType="url"></td>
</tr>
<tr>
<td>testr:</td>
<td><input class="easyui-validatebox" validType="minLength[5]"
invalidMessage="至少5个字符"></td>
</tr>
<tr>
<td>Note:</td>
<td><textarea class="easyui-validatebox" required="true"
missingMessage="必填" style="height: 100px;"></textarea></td>
</tr>
</table>
</div>
</body>
</html>
7.1.2 效果图
7.2 参数
属性名
类型
描述
默认值
required
布尔
定义文本域是否为必填项
false
validType
字符串
定义字段的验证类型
url(匹配电子邮件正则表达式规则), email(匹配URL正则表达式规则),length[0,100](允许字符串长度的范围)etc.null
missingMessage
字符串
当文本框为空时提示的文本信息
This field is required.
invalidMessage
字符串
当文本框内容不合法时提示的文本信息
null
7.3 方法
方法名
参数
描述
destroy
none
删除并且销毁组件
validate
none
做验证以确定文本框的内容是否是有效的。
isValid
none
调用验证方法并返回验证结果,true或者false
7.4 扩展
当然也可以自定义验证规则,重写$.fn.validatebox.defaults.rules可以定义一个校验器的功能和无效的显示消息。例如,要定义一个minLength有效的类型:
$.extend($.fn.validatebox.defaults.rules, {
minLength: {
validator: function(value, param){
return value.length >= param[0];
},
message: 'Please enter at least {0} characters.'
}
});定义好以后我们就可以使用了,下面的代码表示输入的最小长度是5个字符:
<input class="easyui-validatebox" validType="minLength[5]">
8 Pagination(分页)
8.1 实例
8.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#pp').pagination({
total:114,
pageSize:15,
pageNumber:2,
pageList:[10,15,20,30,50,100],
loading:false,
showPageList:true,
showRefresh:true,
beforePageText:'第',
afterPageText:'页,共{pages}页',
displayMsg:'{from}-{to}/{total}',
buttons:[{
iconCls:'icon-add',
handler:function(){
alert('add');
}
},{
iconCls:'icon-cut',
handler:function(){
alert('cut');
}
},{
iconCls:'icon-save',
handler:function(){
alert('save');
}
}],
onSelectPage:function(pageNumber, pageSize){
$(this).pagination('loading');
alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
$(this).pagination('loaded');
}
});
});
</script>
</head>
<body>
<h1>Pagination</h1>
<div style="margin: 10px 0;"><a href="#"
onclick="javascript:$('#pp').pagination({loading:false})">loaded</a> <a
href="#" onclick="javascript:$('#pp').pagination({loading:true})">loading</a>
</div>
<div id="pp"
style="width: 500px; background: #efefef; border: 1px solid #ccc;"></div>
</body>
</html>
8.1.2 效果图
8.2 参数
属性名
类型
描述
默认值
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
8.3 事件
事件名
参数
描述
onSelectPage
pageNumber, pageSize
当用户选择一个新页时触发,回调函数包含两个参数:pageNumber: 新页面的页数pageSize:新页面的大小
onBeforeRefresh
ageNumber, pageSize
刷新按钮被点击之前触发,如果返回false则取消刷新操作
onRefresh
ageNumber, pageSize
刷新以后触发
onChangePageSize
ageSize
改变页面大小时触发
9 Window(窗口)
窗口的主要用法和面板(panel)用法差不多
9.1 实例
9.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html style="height:100%;width:100%;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function resize(){
$('#w').window({
title: 'yewen2',
width: 600,
collapsible:false,
minimizable:false,
maximizable:false,
closable:false,
closed: false,
height: 300,
draggable:false,
resizable:false,
shadow:false,
modal:true
});
}
function open1(){
$('#w').window('open');
}
function close1(){
$('#w').window('close');
}
function test(){
$('#test').window('open');
}
</script>
</head>
<body style="height: 100%; width: 100%; overflow: hidden; border: none;">
<h1>Window</h1>
<div><a href="javascript:void(0)" onclick="resize()">resize</a> <a
href="javascript:void(0)" onclick="open1()">open</a> <a
href="javascript:void(0)" onclick="close1()">close</a></div>
<div id="w" class="easyui-window" title="My Window" icon="icon-save"
style="width: 500px; height: 200px; padding: 5px; background: #fafafa;">
<div class="easyui-layout" fit="true">
<div region="center" border="false"
style="padding: 10px; background: #fff; border: 1px solid #ccc;">
jQuery EasyUI framework help you build your web page easily. <br />
<br />
click <a href="#" onclick="test()">here</a> topopup another window.</div>
<div region="south" border="false"
style="text- align: right; height: 30px; line-height: 30px;"><a
class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)"
onclick="resize()">Ok</a> <a class="easyui-linkbutton"
icon="icon-cancel" href="javascript:void(0)" onclick="resize()">Cancel</a>
</div>
</div>
</div>
<div id="test" class="easyui-window" closed="true" modal="true"
title="Test Window" style="width: 300px; height: 100px;"></div>
</body>
</html>
9.1.2 效果图
9.2 参数
大多数的属性和面板(panel)的属性是相同的,下面列出一些Window私有的属性:
属性名
类型
描述
默认值
zIndex
数字
窗口的z-index属性,可以通过这个属性来增加
9000
draggable
布尔
定义窗口是否可被拖动
true
resizable
布尔
定义窗口是否可以被改变大小
true
shadow
布尔
如果设置为true,窗口的阴影也将显示。
true
modal
布尔
定义窗口是否是一个模式窗口。
false
Window也重写了Panel里的一些属性
属性名
类型
描述
默认值
title
字符串
窗口的标题文本
New Window
collapsible
布尔
定义是否显示可折叠定义按钮
true
minimizable
布尔
定义是否显示最小化按钮
true
maximizable
布尔
定义是否显示最大化按钮
true
closable
布尔
定义是否显示关闭按钮
true
9.3 事件
Window的事件和面板(panel)的事件相同
9.4 方法
除了”header”和”body”以外,Window的函数方法和面板(panel)的相同
10 Panel(面板)
10.1 实例
10.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
function open1(){
$('#p').panel('open');
}
function close1(){
$('#p').panel('close');
}
function load1(){
$('#p').panel({
href:'tabs_href_test.html'
});
$('#p').panel('open');
}
</script>
</head>
<body style="background: #fafafa;">
<h1>Panel</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="open1()">open</a>
<a href="#" onclick="close1()">close</a> <a href="#" onclick="load1()">load</a>
</div>
<div
style="width: 600px; height: 300px; border: 1px solid red; padding: 5px;">
<div id="p" class="easyui-panel" title="My Title" icon="icon-save"
collapsible="true" minimizable="true" maximizable=true closable="true"
style="width: 500px; height: 150px; padding: 10px; background: #fafafa;">
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
<p>panel</p>
</div>
</div>
</body>
</html>
10.1.2 效果图
10.2 参数
名字
类型
描述
默认值
title
字符串
在面板头部显示的标题文本
null
iconCls
字符串
一个CSS类来显示在面板中的16x16图标
null
width
数字
设置面板的宽度
auto
height
数字
设置面板的高度
auto
left
数字
设置面板左侧位置
null
top
数字
设置面板的顶部位置
null
cls
字符串
给面板添加一个CSS类
null
headerCls
字符串
给面板头部添加一个CSS类
null
bodyCls
字符串
给面板主体添加一个CSS类
null
style
对象
给面板自定义样式
{}
fit
布尔
当设置为true,面板尺寸将适合它的父容器。
false
border
布尔
定义面板的边框
true
doSize
布尔
当设置为true,面板载创建的时候将被调整和重新布局
true
collapsible
布尔
定义是否显示可折叠定义按钮
false
minimizable
布尔
定义是否显示最小化按钮
false
maximizable
布尔
定义是否显示最大化按钮
false
closable
布尔
定义是否显示关闭按钮
false
tools
数组
自定义工具,每个工具可以包含两个属性:iconCls and handler
[]
collapsed
布尔
定义在初始化的时候折叠面板
false
minimized
布尔
定义在初始化的时候最小化面板
false
maximized
布尔
定义在初始化的时候最大化面板
false
closed
布尔
定义在初始化的时候关闭面板
false
href
字符串
一个远程的URL加载数据,然后显示在面板中
null
loadingMessage
字符串
当加载远程数据时,在面板中显示的信息
Loading…
10.3 事件
名字
参数
描述
onLoad
none
当远程数据加载时触发
onBeforeOpen
none
当面板打开之前触发
onOpen
none
当面板打开之后触发
onBeforeClose
none
当面板关闭之前触发
onClose
none
当面板关闭之后触发
onBeforeDestroy
none
当面板销毁之前触发
onDestroy
none
当面板关闭之后触发
onBeforeCollpase
none
当面板折叠之前触发
onCollapse
none
当面板折叠之后触发
onBeforeExpand
none
当面板展开之前触发
onExpand
none
当面板展开之后触发
onResize
width, height
当面板调整大小之后触发width: 新的宽度;height:新的高度
onMove
left,top
当面板移动之后触发left: 新的左侧位置top:新的顶部位置
onMaximize
none
当窗口最大化的时候被触发
onRestore
none
当窗口恢复到原来的大小时被触发
onMinimize
none
当窗口最小化的时候被触发
10.4 方法
名字
参数
描述
options
none
返回设置的属性值
panel
none
返回面板对象
header
none
返回面板头部对象
body
none
返回面板主体对象
setTitle
title
设置面板头部标题
open
forceOpen
当forceOpen设置为true,面板被打开的时候忽略onBeforeOpen回调函数
close
forceClose
当forceClose设置为true,面板被关闭的时候忽略onBeforeClose回调函数
destroy
forceDestroy
当forceDestroy设置为true,面板被销毁的时候忽略onBeforeDestroy回调函数
refresh
none
当设置了href值时,刷新面板来加载远程数据
resize
options
设置面板的大小和布局,这些选项包含以下的属性:width: 新面板的宽度; height:新面板的高度; left:新面板的左侧位置; top:新面板的顶部位置
move
options
移动面板到一个新的位置,这些选项包含以下属性: left: 新面板的左侧位置;top:新面板的顶部位置
11 Tabs(标签)
11.1 实例
11.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
var index = 0;
function addTab(){
index++;
$('#tt').tabs('add',{
title:'New Tab ' + index,
content:'Tab Body ' + index,
closable:true
});
}
</script>
</head>
<body>
<h1>Tabs</h1>
<div>
<a class="easyui-linkbutton" icon="icon-add" href="javascript:void(0)" onclick="addTab()">add tab</a>
</div>
<br/>
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;display:none;">
</div>
<div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;" cache="false" href="tabs_href_test.html"> This is Tab2 width close
button.</div>
<div title="Tab3" icon="icon-reload" closable="true" style="padding:20px;display:none;">
<table id="test" class="easyui-datagrid" fit="true">
<thead>
<tr>
<th field="f1" width="60">field1</th>
<th field="f2" width="60">field2</th>
<th field="f3" width="60">field3</th>
</tr>
</thead>
<tbody>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
</tr>
<tr>
<td>d11</td>
<td>d21</td>
<td>d31</td>
</tr>
</tbody>
</table>
</div>
<div title="Tab4 with iframe" closable="true" style="width:100%;height:100%;display:none;">
<iframe scrolling="yes" frameborder="0" src="http://www.google.com" style="width:100%;height:100%;"></iframe>
</div>
<div title="Tab5 with sub tabs" closable="true" icon="icon-cut" style="padding:10px;display:none;">
<div class="easyui-tabs" fit="true" plain="true" style="height:100px;width:300px;">
<div title="Title1">Content 1</div>
<div title="Title2">Content 2</div>
<div title="Title3">Content 3</div>
</div>
</div>
</div>
</body>
</html>
11.1.2 效果图
11.2 参数
参数名
参数
描述
默认值
width
数字
标签容器的宽度
auto
height
数字
标签容器的高度
auto
idSeed
数字
The base id seed to generate tab panel’s DOM id attribute.
0
plain
布尔
如果为ture标签没有背景图片
false
fit
布尔
如果为ture则设置标签的大小以适应它的容器的父容器
false
border
布尔
如果为true则显示标签容器的边框
true
scrollIncrement
数字
滚动按钮每次被按下时滚动的像素值
100
scrollDuration
数字
每次滚动持续的毫秒数
400
11.3 事件
事件名
参数
描述
onLoad
arguments
当一个AJAX标签加载远程数据完成时被触发,参数和jQuery.ajax成功返回的回调函数相同
onSelect
title
当用户选择一个标签面板时被触发
onClose
title
当用户关闭一个标签面板时被触发
11.4 方法
方法名
参数
描述
resize
none
调整标签容器的大小和布局
add
options
添加新标签面板,可选参数是一个配置对象,详细信息可以查看下面的标签面板属性
close
title
关闭一个标签面板,标题参数表明被关闭的面板
select
title
选择一个标签面板
exists
title
指示特定的标签是否存在
11.5 标签面板属性
属性名
类型
描述
默认值
id
字符串
标签面板的ID属性
null
title
字符串
标签面板的文本标题
content
字符串
标签面板的主体内容
href
字符串
填充标签内容的远程URL地址
null
cache
布尔
如果为true,当设置href时,对标签面板进行缓存
true
icon
字符串
标签面板上标题的图标CSS类
null
closable
布尔
如果为true,标签面板会显示出关闭按钮,点击可以关闭选项卡面板。
false
selected
布尔
如果为true,标签标签面板将被选中
false
width
数字
标签面板的宽度
auto
height
数字
标签面板的高度
auto
12 Tree(树)
12.1 实例
12.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
$('#tt1').tree({
animate:true,
onClick:function(node){
alert('you click '+node.text);
}
});
$('#tt2').tree({
checkbox: true,
url: 'tree_data.json',
onClick:function(node){
alert('you click '+node.text);
}
});
});
function reload(){
$('#tt2').tree('reload');
}
function getChecked(){
var nodes = $('#tt2').tree('getChecked');
var s = '';
for(var i=0; i<nodes.length; i++){
if (s != '') s += ',';
s += nodes[i].text;
}
alert(s);
}
function getSelected(){
var node = $('#tt2').tree('getSelected');
alert(node.text);
}
function collapse(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('collapse',node.target);
}
function expand(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('expand',node.target);
}
function append(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('append',{
parent: node.target,
data:[{
text:'new1'
},{
text:'new2',
state:'closed',
children:[{
text:'subnew1'
},{
text:'subnew2'
}]
}]
});
}
function remove(){
var node = $('#tt2').tree('getSelected');
$('#tt2').tree('remove', node.target);
}
function isLeaf(){
var node = $('#tt2').tree('getSelected');
var b = $('#tt2').tree('isLeaf', node.target);
alert(b)
}
</script>
</head>
<body>
<h1>Tree</h1>
<p>Create from HTMLmarkup</p>
<ul id="tt1" class="easyui-tree">
<li><span>Folder</span>
<ul>
<li><span>Sub Folder 1</span>
<ul>
<li><span><a href="#">File 11</a></span></li>
<li><span>File 12</span></li>
<li><span>File 13</span></li>
</ul>
</li>
<li><span>File 2</span></li>
<li><span>File 3</span></li>
</ul>
</li>
<li><span>File21</span></li>
</ul>
<hr></hr>
<p>Create from JSON data</p>
<div style="margin: 10px;"><a href="#" onclick="reload()">reload</a>
<a href="#" onclick="getChecked()">getChecked</a> <a href="#"
onclick="getSelected()">getSelected</a> <a href="#"
onclick="collapse()">collapse</a> <a href="#" onclick="expand()">expand</a>
<a href="#" onclick="append()">append</a> <a href="#" onclick="remove()">remove</a>
<a href="#" onclick="isLeaf()">isLeaf</a></div>
<ul id="tt2"></ul>
</body>
</html>
12.1.2 效果图
12.2 参数
选项名
类型
描述
默认值
url
字符串
一个网址retrive远程数据。
null
animate
布尔
当节点展开或折叠是否显示动画效果。
false
checkbox
布尔
是否带复选框
False
12.3 事件
事件名
参数
描述
onClick
node
用户点击一个节点时触发。,该节点参数包含以下属性:
id:节点ID
text:节点的文本
attributes:节点自定义属性
target:点击DOM对象的目标
onDblClick
node
用户双击一个节点时触发,参数同onclick事件
onLoadSuccess
arguments
加载数据成功时触发,参数arguments类似jQuery.ajax.的success函数
onLoadError
arguments
加载数据成功时触发,参数arguments类似jQuery.ajax.的error函数
12.4 方法
方法名
参数
描述
options
none
返回树的所有参数对象
loadData
data
加载树的数据
reload
none
重新加载树的数据
getRoot
none
返回树的root节点
getRoots
none
返回树的所有root节点
getParent
target
返回某个节点的父节点
getChildren
target
返回某个节点的孩子节点
getChecked
none
获取被勾选的节点
getSelected
none
获取选中的节点,并返回它,如果没有节点选择返回null。
isLeaf
target
判断某个节点是否叶子节点
select
target
选择一个节点,目标参数表明该节点的DOM对象。
collapse
target
折叠节点,目标参数表明该节点的DOM对象。
expand
target
展开一个节点,目标参数表明该节点的DOM对象。
collapseAll
none
折叠所有节点
expandAll
none
展开所有节点
append
param
一些子节点追加到父节点。参数有两个属性:
parent: DOM对象,父节点追加。
data:数组,节点数据。
toggle
target
绑定某个节点的展开或者折叠状态,使之不能再改变。
remove
target
删除一个节点和它的子节点,目标参数表明该节点的DOM对象。
update
param
更新指定的节点,参数param包含如下属性:
Target:目标节点;
id,text,iconCls,checked,etc.
13 Layout(布局)
13.1 实例
此例最外层写在了body上,也可以写在某个div上。
13.1.1 代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
var p = $('body').layout('panel','west').panel({
onCollapse:function(){
alert('collapse');
}
});
setTimeout(function(){
$('body').layout('collapse','east');
},0);
});
</script>
</head>
<body class="easyui-layout">
<div region="north" border="false" style="height:60px;background:#B3DFDA;">north region</div>
<div region="west" split="true" title="West" style="width:150px;padding:10px;">west content</div>
<div region="east" split="true" title="East" style="width:100px;padding:10px;">east region</div>
<div region="south" border="false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div region="center" title="Main Title">
</div>
</body>
</html>
13.1.2 效果图
13.2 参数
所有属性都必须定义在布局面板创建的<div/>标记上。
名称
类型
描述
默认值
title
字符串
布局面板的标题文本
null
region
字符串
定义布局面板的位置,该值是下列之一: north, south, east, west, center.
border
布尔
如果为ture则显示布局面板的边框
true
split
布尔
如果为ture则显示分隔栏,用户可以用它来改变布局面板的大小
false
icon
字符串
在面板头部显示图标的CSS
null
href
字符串
从远程地址加载数据的URL
null
13.3 方法
方法名
参数
描述
panel
region
返回某个方位的面板,参数region取值可以是:north,south,east,west,center
collapse
region
收缩某个方位的面板,参数region取值可以是:north,south,east,west
expand
region
展开某个方位的面板,参数region取值可以是:north,south,east,west
14 Datagrid(数据表)
14.1 实例
14.1.1 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#test').datagrid({
title:'My Title',
iconCls:'icon-save',
width:800,
height:450,
nowrap: true,
striped: true,
url:'datagrid_data.json',
sortName: 'code',
sortOrder: 'desc',
idField:'code',
frozenColumns:[[
{field:'ck',checkbox:true},
{title:'code',field:'code',width:80,sortable:true}
]],
columns:[[
{title:'Base Information',colspan:3},
{field:'opt',title:'Operation',width:100,align:'center', rowspan:2,
formatter:function(value,rec){
return '<span style="color:red">Edit Delete</span>';
}
}
],[
{field:'name',title:'Name',width:120},
{field:'addr',title:'Address',width:120,rowspan:2,sortable:true},
{field:'col4',title:'Col41',width:150,rowspan:2}
]],
pagination:true,
rownumbers:true,
singleSelect:true,
toolbar:[{
text:'Add',
iconCls:'icon-add',
handler:function(){
alert('add')
}
},{
text:'Cut',
iconCls:'icon-cut',
disabled:true,
handler:function(){
alert('cut')
}
},'-',{
text:'Save',
iconCls:'icon-save',
handler:function(){
alert('save')
}
}]
});
var p = $('#test').datagrid('getPager');
if (p){
$(p).pagination({
onBeforeRefresh:function(){
alert('before refresh');
}
});
}
});
function resize(){
$('#test').datagrid({
title: 'New Title',
striped: true,
width: 650,
queryParams:{
p:'param test',
name:'My Name'
}
});
}
function getSelected(){
var selected = $('#test').datagrid('getSelected');
alert(selected.code+":"+selected.name);
}
function getSelections(){
var ids = [];
var rows = $('#test').datagrid('getSelections');
for(var i=0;i<rows.length;i++){
ids.push(rows[i].code);
}
alert(ids.join(':'))
}
function clearSelections(){
$('#test').datagrid('clearSelections');
}
function selectRow(){
$('#test').datagrid('selectRow',2);
}
function selectRecord(){
$('#test').datagrid('selectRecord','002');
}
function unselectRow(){
$('#test').datagrid('unselectRow',2);
}
</script>
</head>
<body>
<h1>DataGrid</h1>
<div style="margin-bottom: 10px;"><a href="#" onclick="resize()">resize</a>
<a href="#" onclick="getSelected()">getSelected</a> <a href="#"
onclick="getSelections()">getSelections</a> <a href="#"
onclick="clearSelections()">clearSelections</a> <a href="#"
onclick="selectRow()">selectRow</a> <a href="#"
onclick="selectRecord()">selectRecord</a> <a href="#"
onclick="unselectRow()">unselectRow</a></div>
<table id="test"></table>
</body>
</html>
14.1.2 效果图
14.2 参数
Name
Type
Description
Default
title
字符串
标题文字
null
iconCls
字符串
一个css类,将提供一个背景图片作为标题图标
null
border
布尔
是否显示面板的边界。
true
width
数字
表格的宽度
auto
height
数字
表格的高度
auto
columns
数组
表格的列的配置对象,详见下面column属性介绍。
null
frozenColumns
数组
与columns属性相通,但这些列将固定在左侧,不得变动。
null
striped
布尔
是否显示斑马线
false
method
字符串
远程数据的获取类型,可取值为post或get
post
nowrap
布尔
是否在一行显示数据
true
idField
字符串
指定哪些字段时标识字段
null
url
字符串
从远程请求数据的地址
null
loadMsg
字符串
当远程加载数据时,现实的等待信息提示
Processing, please wait …
pagination
布尔
是否显示底部分页工具栏
false
rownumbers
布尔
是否显示行号列
false
singleSelect
布尔
是否允许只选择一行
false
fit
布尔
是否允许表格自动缩放,以适应父容器
false
pageNumber
数字
初始化页码
1
pageSize
数字
初始化页面大小
10
pageList
数组
初始化页面大小选择清单
[10,20,30,40,50]
queryParams
对象
当请求远程数据时,发送的额外的参数
{}
sortName
字符串
定义哪一列可以排序
null
sortOrder
字符串
定义列排序的方式,递增(asc)或递减(desc)
asc
editors
对象
定义当编辑某行数据时的编辑器
predefined editors
14.3 Column参数
Name
Type
Description
Default
title
字符串
列标题文字
undefined
field
字符串
列字段名称
undefined
width
数字
列宽度
undefined
rowspan
数字
该列占几行单元格
undefined
colspan
数字
该列占几列单元格
undefined
align
字符串
数据对其方式,可选值有left,right,center
undefined
sortable
布尔
是否允许该列排序
undefined
checkbox
布尔
是否显示选择框
undefined
formatter
函数
包含三个参数:
value: the field value.
rowData: the row record data
rowIndex: the row index.
undefined
editor
string,object
Indicate the edit type. When string indicates the edit type, when object contains two properties:
type: string, the edit type, possible type is: text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree.
options: object, the editor options corresponding to the edit type.
undefined
14.4 事件
Name
Parameters
Description
onLoadSuccess
data
远程数据加载成功时触发
onLoadError
none
远程数据加载失败时触发
onBeforeLoad
data
请求发出去,加载数据前触发。如果返回false,加载数据动作则退出
onClickRow
rowIndex, rowData
当用户点击某行时触发, the parameters contains:
rowIndex: the clicked row index, start with 0
rowData: the record corresponding to the clicked row
onDblClickRow
rowIndex, rowData
当用户双击某行时触发, the parameters contains:
rowIndex: the clicked row index, start with 0
rowData: the record corresponding to the clicked row
onSortColumn
sort, order
当用户排序某列时触发, the parameters contains:
sort: the sort column field name
order: the sort column order
onSelect
rowIndex, rowData
当用户选择某行时触发, the parameters contains:
rowIndex: the selected row index, start with 0
rowData: the record corresponding to the selected row
onUnselect
rowIndex, rowData
当用户取消选择某行时触发, the parameters contains:
rowIndex: the unselected row index, start with 0
rowData: the record corresponding to the unselected row
onBeforeEdit
rowIndex, rowData
当用户开始编辑某行时触发, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row
onAfterEdit
rowIndex, rowData, changes
当用户完成编辑某行时触发, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row
changes: the changed field/value pairs
onCancelEdit
rowIndex, rowData
当用户退出编辑某行时触发, the parameters contains:
rowIndex: the editing row index, start with 0
rowData: the record corresponding to the editing row
14.5 方法
Name
Parameter
Description
options
none
返回所有参数的对象
getPager
none
返回分页对象
resize
none
调整表格大小
reload
param
重新加载行
fixColumnSize
none
固定列的大小
loadData
param
加载本地数据,旧行将被删除
getData
none
返回已加载的数据
getRows
none
返回当前页的行数
getSelected
none
返回第一次选择的行记录
getSelections
none
返回所有选定行,如果没选择记录,则返回空数组
clearSelections
none
取消所有选择
selectAll
none
选择当前页所有行
selectRow
index
选择某行,行索引以0开始
selectRecord
idValue
通过id值选择一行
unselectRow
index
取消选择某行
beginEdit
index
开始编辑某行
endEdit
index
结束编辑某行
cancelEdit
index
退出编辑某行
refreshRow
index
刷新一行的数据
appendRow
row
添加新行
deleteRow
index
删除一行
getChanges
type
Get changed rows since the last commit. The type parameter indicate which type changed rows, possible value is: inserted,deleted,updated,etc. When the type parameter is not assigned, return all changed rows.
acceptChanges
none
Commits all the changes data since it was loaded or since the last time acceptChanges was called.
rejectChanges
none
Rolls back all the changes data since it was created, or since the last time acceptChanges was called.
var s = v.getSeconds();
var s = v.getSeconds();
var s = v.getSeconds();var s = v.getSeconds();
var s = v.getSeconds();var s = v.getSeconds();
var s = v.getSeconds();var s = v.getSeconds();