资源描述
jquery easyui参考文档
目 录
1 Accordion（可折叠标签） 2
1.1 实例 2
1.2 参数 3
2 DateBox（日期框） 4
2.1 实例 4
2.2 参数 6
2.3 事件 6
2.4 方法 6
3 ComboBox(组合框) 7
3.1 实例 7
3.2 参数 9
3.3 事件 9
3.4 方法 9
4 Dialog（对话框） 10
4.1 实例 10
4.2 参数 12
4.3 事件 12
4.4 方法 12
5 Messager（提示框） 12
5.1 实例 12
5.2 方法 15
5.3 扩展 16
6 NumberBox（数字框） 16
6.1 实例 16
6.2 参数 17
7 ValidateBox（验证框） 18
7.1 实例 18
7.2 参数 20
7.3 方法 20
7.4 扩展 20
8 Pagination（分页） 20
8.1 实例 20
8.2 参数 22
8.3 事件 23
9 Window（窗口） 23
9.1 实例 23
9.2 参数 25
9.3 事件 26
9.4 方法 26
10 Panel（面板） 26
10.1 实例 26
10.2 参数 28
10.3 事件 29
10.4 方法 29
11 Tabs（标签） 30
11.1 实例 30
11.2 参数 32
11.3 事件 32
11.4 方法 33
11.5 标签面板属性 33
12 Tree（树） 33
12.1 实例 33
12.2 参数 36
12.3 事件 37
12.4 方法 37
13 Layout（布局） 38
13.1 实例 38
13.2 参数 39
13.3 方法 39
14 Datagrid（数据表） 39
14.1 实例 39
14.2 参数 43
14.3 Column参数 44
14.4 事件 45
14.5 方法 46
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 = '';
}
});
}
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
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
