1 Accordion（可摺疊標籤）
1.1 實例
1.1.1 代碼
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<linkrel="stylesheet"type="text/css" href="../themes/default/easyui.css">
<linkrel="stylesheet"type="text/css"href="../themes/icon.css">
<scripttype="text/javascript"src="../jquery-1.4.2.min.js"></script>
<scripttype="text/javascript"src="../jquery.easyui.min.js"></script>
<scripttype="text/javascript">
$( function() {
$('#aa').accordion( {
width : 400,
height : 200,
fit : false
});
});
</script>
</head>
<body>
<divid="aa"border="true">
<divtitle="Title1"icon="icon-save"style="overflow: auto; padding: 10px;">
<h3style="color: #0099FF;">Accordion for jQuery</h3>
<p>Accordion is a partof easyui framework for jQuery. It lets you define your accordion component onweb page more easily.</p>
</div>
<divtitle="Title2"icon="icon-reload"selected="true"
style="padding:10px;">content2</div>
<divtitle="Title3">content3</div>
</div>
</body>
</html>
1.1.2 效果圖
1.1.3 擴展
實例html代碼中
<divid="aa"border="true">
此行也可寫成
<divid="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 代碼
<!DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=gb2312">
<title>jQueryEasyUI</title>
<linkrel="stylesheet"type="text/css"
href="../themes/default/easyui.css">
<linkrel="stylesheet"type="text/css"href="../themes/icon.css">
<scripttype="text/javascript"src="../jquery-1.4.2.min.js"></script>
<scripttype="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>
<divstyle="margin-bottom:10px;"><ahref="#"onclick=
disable();
>disable</a>
<ahref="#"onclick=
enable();
>enable</a></div>
<inputid="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>
<metahttp-equiv="Content-Type"content="text/html; charset=gb2312">
<title>jQueryEasyUI</title>
<linkrel="stylesheet"type="text/css"
href="../themes/default/easyui.css">
<linkrel="stylesheet"type="text/css"href="../themes/icon.css">
<scripttype="text/javascript"src="../jquery-1.4.2.min.js"></script>
<scripttype="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>
<divstyle="margin-bottom:10px;"><ahref="#"onclick="loadData()">loadData</a>
<ahref="#"onclick="setValue()">setValue</a><a href="#"
onclick="getValue()">getValue</a><a href="#"onclick="disable()">disable</a>
<ahref="#"onclick="enable()">enable</a></div>
<span>Options:</span>
<selectid="cc"name="dept"required="true">
<optionvalue="">==請選擇==</option>
<optionvalue="0">蘋果</option>
<optionvalue="1">香蕉</option>
<optionvalue="2">鴨梨</option>
<optionvalue="3">西瓜</option>
<optionvalue="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>
<metahttp-equiv="Content-Type"content="text/html; charset=gb2312">
<title>jQueryEasyUI</title>
<linkrel="stylesheet"type="text/css"
href="../themes/default/easyui.css">
<linkrel="stylesheet"type="text/css"href="../themes/icon.css">
<scripttype="text/javascript"src="../jquery-1.4.2.min.js"></script>
<scripttype="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>
<divstyle="margin-bottom:10px;"><ahref="#"onclick="open1()">open1</a>
<ahref="#"onclick="close1()">close1</a></div>
<divid="dd"icon="icon-save"
style="padding: 5px; width: 400px; height: 200px;">
<p>dialogcontent.</p>
<p>dialogcontent.</p>
<p>dialogcontent.</p>
<p>dialogcontent.</p>
<p>dialogcontent.</p>
<p>dialog content.</p>
<p>dialogcontent.</p>
<p>dialogcontent.</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 代碼
<!DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=gb2312">
<title>jQueryEasyUI</title>
<linkrel="stylesheet"type="text/css"
href="../themes/default/easyui.css">
<linkrel="stylesheet"type="text/css"href="../themes/icon.css">
<scripttype="text/javascript"src="../jquery-1.4.2.min.js"></script>
<scripttype="text/javascript"src="../jquery.easyui.min.js"></script>
<script>
function show1(){
$.messager.show({
title:'My Title',
msg:'Message will beclosed after 4 seconds.',
showType:'show'
});
}
function show2(){
$.messager.show({
title:'My Title',
msg:'Message will beclosed after 5 seconds.',
timeout:5000,
showType:'slide'
});
}
function show3(){
$.messager.show({
title:'My Title',
msg:'Message never beclosed.',
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('youtype:'+r);
}
});
}
$(function(){
$.messager.defaults={ok:"確定",cancel:"取消"};
});
</script>
</head>
<body>
<h1>Messager</h1>
<div><ahref="javascript:void(0)"onclick="show1()">show</a> | <a
href="#"onclick="show2()">slide</a> |<a href="#" onclick="show3()">fade</a>
|</div>
<div><ahref="#"onclick="alert1()">alert</a> | <a href="#"
onclick="alert2()">alert(error)</a> | <a href="#"onclick="alert3()">alert(info)</a>
| <ahref="#"onclick="alert4()">alert(question)</a> |<a href="#"
onclick="alert5()">alert(warning)</a></div>
<div><ahref="#"onclick="confirm1();">confirm</a></div>
<div><ahref="#"onclick="prompt1()">prompt</a></div>
<divstyle="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>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>jQueryEasyUI</title>
<linkrel="stylesheet"type="text/css"
href="../themes/default/easyui.css">
<linkrel="stylesheet"type="text/css"href="../themes/icon.css">
<scripttype="text/javascript"src="../jquery-1.4.2.min.js"></script>
<scripttype="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 canonly input number.</p>
<divstyle="margin-bottom:10px;"><ahref="#"onclick="disable()">disable</a>
<ahref="#"onclick="enable()">enable</a></div>
<inputid="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>
<metahttp-equiv="Content-Type"content="text/html; charset=gb2312">
<title>jQueryEasyUI</title>
<linkrel="stylesheet"type="text/css"
href="../themes/default/easyui.css">
<linkrel="stylesheet"type="text/css"href="../themes/icon.css">
<styletype="text/css">
input,textarea {
width: 200px;
border: 1px solid #ccc;
padding: 2px;
}
</style>
<scripttype="text/javascript"src="../jquery-1.4.2.min.js"></script>
<scripttype="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><inputclass="easyui-validatebox"required="true"
validType="length[1,3]"></td>
</tr>
<tr>
<td>Email:</td>
<td><inputid="dfe"class="easyui-validatebox"
invalidMessage="email格式錯誤"validType="email"></td>
</tr>
<tr>
<td>URL:</td>
<td><inputclass="easyui-validatebox"required="true"
validType="url"></td>
</tr>
<tr>
<td>testr:</td>
<td><inputclass="easyui-validatebox"validType="minLength[5]"
invalidMessage="至少5個字符"></td>
</tr>
<tr>
<td>Note:</td>
<td><textareaclass="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個字符：
<inputclass="easyui-validatebox" validType="minLength[5]">
8 Pagination（分頁）
8.1 實例
8.1.1 代碼
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=gb2312">
<title>jQueryEasyUI</title>
<linkrel="stylesheet"type="text/css"
href="../themes/default/easyui.css">
<linkrel="stylesheet"type="text/css"href="../themes/icon.css">
<scripttype="text/javascript"src="../jquery-1.4.2.min.js"></script>
<scripttype="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>
<divstyle="margin: 10px0;"><ahref="#"
onclick="javascript:$('#pp').pagination({loading:false})">loaded</a><a
href="#"onclick="javascript:$('#pp').pagination({loading:true})">loading</a>
</div>
<divid="pp"
style="width: 500px; background: #efefef; border: 1pxsolid #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 代碼
<!DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<htmlstyle="height:100%;width:100%;">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>Insert titlehere</title>
<linkrel="stylesheet"type="text/css"
href="../themes/default/easyui.css">
<linkrel="stylesheet"type="text/css"href="../themes/icon.css">
<scripttype="text/javascript"src="../jquery-1.4.2.min.js"></script>
<scripttype="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>
<bodystyle="height: 100%;width: 100%; overflow: hidden; border: none;">
<h1>Window</h1>
<div><ahref="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>
<divid="w"class="easyui-window"title="My Window"icon="icon-save"
style="width: 500px; height: 200px; padding: 5px;background: #fafafa;">
<divclass="easyui-layout"fit="true">
<divregion="center"border="false"
style="padding: 10px; background: #fff; border: 1px solid#ccc;">
jQuery EasyUI framework helpyou build your web page easily. <br />
<br/>
click <ahref="#"onclick="test()">here</a> topopupanother window.</div>
<divregion="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>
<divid="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>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>jQueryEasyUI</title>
<linkrel="stylesheet"type="text/css"
href="../themes/default/easyui.css">
<linkrel="stylesheet"type="text/css"href="../themes/icon.css">
<scripttype="text/javascript"src="../jquery-1.4.2.min.js"></script>
<scripttype="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>
<bodystyle="background:#fafafa;">
<h1>Panel</h1>
<divstyle="margin-bottom:10px;"><ahref="#"onclick="open1()">open</a>
<ahref="#"onclick="close1()">close</a><a href="#"onclick="load1()">load</a>
</div>
<div
style="width: 600px; height: 300px; border: 1px solid red;padding: 5px;">
<divid="p"class="easyui-panel"title="My Title"icon="icon-save"
collapsible="true"minimizable="true"maximizable=trueclosable="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>
<metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>jQuery EasyUI</title>
<linkrel="stylesheet" type="text/css"href="../themes/default/easyui.css">
<linkrel="stylesheet" type="text/css" href="../themes/icon.css">
<scripttype="text/javascript" src="../jquery-1.4.2.min.js"></script>
<scripttype="text/javascript"src="../jquery.easyui.min.js"></script>
<script>
varindex = 0;
functionaddTab(){
index++;
$('#tt').tabs('add',{
title:'NewTab ' + index,
content:'TabBody ' + index,
closable:true
});
}
</script>
</head>
<body>
<h1>Tabs</h1>
<div>
<aclass="easyui-linkbutton" icon="icon-add"href="javascript:void(0)" οnclick="addTab()">addtab</a>
</div>
<br/>
<divid="tt" class="easyui-tabs"style="width:500px;height:250px;">
<divtitle="Tab1" style="padding:20px;display:none;">
</div>
<divtitle="Tab2" closable="true"style="overflow:auto;padding:20px;display:none;"cache="false" href="tabs_href_test.html"> This is Tab2 widthclose
button.</div>
<divtitle="Tab3" icon="icon-reload" closable="true"style="padding:20px;display:none;">
<tableid="test" class="easyui-datagrid" fit="true">
<thead>
<tr>
<thfield="f1" width="60">field1</th>
<thfield="f2" width="60">field2</th>
<thfield="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>
<divtitle="Tab4 with iframe" closable="true"style="width:100%;height:100%;display:none;">
<iframescrolling="yes" frameborder="0" src="http://www.google.com"style="width:100%;height:100%;"></iframe>
</div>
<divtitle="Tab5 with sub tabs" closable="true"icon="icon-cut" style="padding:10px;display:none;">
<divclass="easyui-tabs" fit="true" plain="true"style="height:100px;width:300px;">
<divtitle="Title1">Content 1</div>
<divtitle="Title2">Content 2</div>
<divtitle="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 代碼
<!DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>jQueryEasyUI</title>
<linkrel="stylesheet"type="text/css"
href="../themes/default/easyui.css">
<linkrel="stylesheet"type="text/css"href="../themes/icon.css">
<scripttype="text/javascript"src="../jquery-1.4.2.min.js"></script>
<scripttype="text/javascript"src="../jquery.easyui.min.js"></script>
<scripttype="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 fromHTMLmarkup</p>
<ulid="tt1"class="easyui-tree">
<li><span>Folder</span>
<ul>
<li><span>Sub Folder 1</span>
<ul>
<li><span><ahref="#">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 fromJSON data</p>
<divstyle="margin:10px;"><ahref="#"onclick="reload()">reload</a>
<ahref="#"onclick="getChecked()">getChecked</a><a href="#"
onclick="getSelected()">getSelected</a><a href="#"
onclick="collapse()">collapse</a><a href="#"onclick="expand()">expand</a>
<ahref="#"onclick="append()">append</a><a href="#"onclick="remove()">remove</a>
<ahref="#"onclick="isLeaf()">isLeaf</a></div>
<ulid="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>
<metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>jQuery EasyUI</title>
<linkrel="stylesheet" type="text/css"href="../themes/default/easyui.css">
<scripttype="text/javascript" src="../jquery-1.4.2.min.js"></script>
<scripttype="text/javascript"src="../jquery.easyui.min.js"></script>
<script>
$(function(){
varp = $('body').layout('panel','west').panel({
onCollapse:function(){
alert('collapse');
}
});
setTimeout(function(){
$('body').layout('collapse','east');
},0);
});
</script>
</head>
<body class="easyui-layout">
<divregion="north" border="false"style="height:60px;background:#B3DFDA;">north region</div>
<divregion="west" split="true" title="West"style="width:150px;padding:10px;">west content</div>
<divregion="east" split="true" title="East"style="width:100px;padding:10px;">east region</div>
<divregion="south" border="false"style="height:50px;background:#A9FACD;padding:10px;">southregion</div>
<divregion="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 代碼
<!DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>jQueryEasyUI</title>
<linkrel="stylesheet"type="text/css"
href="../themes/default/easyui.css">
<linkrel="stylesheet"type="text/css"href="../themes/icon.css">
<scripttype="text/javascript"src="../jquery-1.4.2.min.js"></script>
<scripttype="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'<spanstyle="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('beforerefresh');
}
});
}
});
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>
<divstyle="margin-bottom:10px;"><ahref="#"onclick="resize()">resize</a>
<ahref="#"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>
<tableid="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. |
