目 录
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 = '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 {
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 |
|
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> 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="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: |
|
onMove |
left,top |
当面板移动之后触发left: |
|
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
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="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, |
|
|
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 |
undefined |
14.4
事件
|
Name |
Parameters |
Description |
|
onLoadSuccess |
data |
远程数据加载成功时触发 |
|
onLoadError |
none |
远程数据加载失败时触发 |
|
onBeforeLoad |
data |
请求发出去，加载数据前触发。如果返回false，加载数据动作则退出 |
|
onClickRow |
rowIndex, rowData |
当用户点击某行时触发, |
|
onDblClickRow |
rowIndex, rowData |
当用户双击某行时触发, |
|
onSortColumn |
sort, order |
当用户排序某列时触发, |
|
onSelect |
rowIndex, rowData |
当用户选择某行时触发, |
|
onUnselect |
rowIndex, rowData |
当用户取消选择某行时触发, |
|
onBeforeEdit |
rowIndex, rowData |
当用户开始编辑某行时触发, |
|
onAfterEdit |
rowIndex, rowData, changes |
当用户完成编辑某行时触发, |
|
onCancelEdit |
rowIndex, rowData |
当用户退出编辑某行时触发, |
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. |
|
acceptChanges |
none |
Commits all the changes data since it was |
|
rejectChanges |
none |
Rolls back all the changes data since it |