目 录
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="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( {
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; 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 |
在屏幕的右下角显示一个消息窗口。这些选项的参数可以是一下的一个配置对象: |
$.messager.alert |
title, msg, icon, fn |
显示一个警告窗口。参数如下: |
$.messager.confirm |
title, msg, fn |
显示一个含有确定和取消按钮的确认消息窗口。参数如下: |
$.messager.prompt |
title, msg, fn |
显示一个确定和取消按钮的信息提示窗口,提示用户输入一些文本。参数如下: |
|
|
|
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 {
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=" 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%;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',
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%; 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=" 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> to popup 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=" 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=" 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=" 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 |
当面板调整大小之后触发 新的宽度;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 |
设置面板的大小和布局,这些选项包含以下的属性: 新面板的宽度; 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="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="100%;height:100%;display:none;">
<iframe scrolling="yes" frameborder="0" src="http://www.google.com" style="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;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 HTML markup</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="150px;padding:10px;">west content</div>
<div region="east" split="true" title="East" style="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',
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',80,sortable:true}
]],
columns:[[
{title:'Base Information',colspan:3},
{field:'opt',title:'Operation',100,align:'center', rowspan:2,
formatter:function(value,rec){
return '<span style="color:red">Edit Delete</span>';
}
}
],[
{field:'name',title:'Name',120},
{field:'addr',title:'Address',120,rowspan:2,sortable:true},
{field:'col4',title:'Col41',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,
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: |
undefined |
14.4 事件
Name |
Parameters |
Description |
onLoadSuccess |
data |
远程数据加载成功时触发 |
onLoadError |
none |
远程数据加载失败时触发 |
onBeforeLoad |
data |
请求发出去,加载数据前触发。如果返回false,加载数据动作则退出 |
onClickRow |
rowIndex, rowData |
当用户点击某行时触发, the parameters contains: |
onDblClickRow |
rowIndex, rowData |
当用户双击某行时触发, the parameters contains: |
onSortColumn |
sort, order |
当用户排序某列时触发, the parameters contains: |
onSelect |
rowIndex, rowData |
当用户选择某行时触发, the parameters contains: |
onUnselect |
rowIndex, rowData |
当用户取消选择某行时触发, the parameters contains: |
onBeforeEdit |
rowIndex, rowData |
当用户开始编辑某行时触发, the parameters contains: |
onAfterEdit |
rowIndex, rowData, changes |
当用户完成编辑某行时触发, the parameters contains: |
onCancelEdit |
rowIndex, rowData |
当用户退出编辑某行时触发, the parameters contains: |
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. |
End