jquery_EasyUI的學習

本文轉載自查看原文 2013-08-01 19:10 6439

1 Accordion（可折疊標簽）

1.1 實例

1.1.1 代碼

<html>

<head>

<title>jQuery EasyUI</title>

$( function() {

$('#aa').accordion( {

width : 400,

height : 200,

fit : false

});

</script>

</head>

<body>

<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代碼中

此行也可寫成

，並且將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>

<title>jQuery EasyUI</title>

href="../themes/default/easyui.css">

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>

</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>

<title>jQuery EasyUI</title>

href="../themes/default/easyui.css">

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>

</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>

<title>jQuery EasyUI</title>

href="../themes/default/easyui.css">

$(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>

<a href="#" onclick="close1()">close1</a></div>

<div id="dd" icon="icon-save"

style="padding: 5px; width: 400px; height: 200px;">

<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>

<title>jQuery EasyUI</title>

href="../themes/default/easyui.css">

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>

</body>

</html>

5.1.2 效果圖

5.2 方法

方法名	參數	描述
$.messager.show	options	在屏幕的右下角顯示一個消息窗口。這些選項的參數可以是一下的一個配置對象： showType：定義如何將顯示消息窗口。可用的值是：null,slide,fade,show。默認值是slide。 showSpeed：定義消息窗口完成的時間（以毫秒為單位），默認值600。 width：定義消息窗口的寬度。默認值250。 height：定義消息窗口的高度。默認值100。 msg：定義顯示的消息文本。 title：定義顯示在標題面板顯示的標題文本。 timeout：如果定義為0，消息窗口將不會關閉，除非用戶關閉它。如果定義為非0值，當超時后消息窗口將自動關閉。
$.messager.alert	title, msg, icon, fn	顯示一個警告窗口。參數如下： title：顯示在標題面板的標題文本。 msg：提示框顯示的消息文本。 icon：提示框顯示的圖標。可用的值是：error,question,info,warning. fn：當窗口關閉時觸發的回調函數。
$.messager.confirm	title, msg, fn	顯示一個含有確定和取消按鈕的確認消息窗口。參數如下： title：顯示在標題面板的標題文本。 msg：確認消息窗口顯示的消息文本。 fn(b)：當用戶點擊按鈕后觸發的回調函數，如果點擊OK則給回調函數傳true,如果點擊cancel則傳false。
$.messager.prompt	title, msg, fn	顯示一個確定和取消按鈕的信息提示窗口，提示用戶輸入一些文本。參數如下： title：顯示在標題面板的標題文本。 msg：提示窗口顯示的消息文本。 fn(val)：用戶點擊按鈕后的回調函，參數是用戶輸入的內容。

5.3 擴展

可以通過$.messager.defaults方法自定義alert框的ok按鈕和cancel按鈕上顯示的文字。

名字	類型	描述	默認值
ok	字符串	Ok	按鈕上的文本	Ok
cancel	字符串	Cancel	按鈕上的文本	Cancel

6 NumberBox（數字框）

6.1 實例

6.1.1 代碼

<html>

<head>

<title>jQuery EasyUI</title>

href="../themes/default/easyui.css">

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>

</body>

</html>

6.1.2 效果圖

6.2 參數

選項名	類型	描述	默認值
min	數字	文本框中可允許的最小值	null
max	數字	文本框中可允許的最大值	null
precision	數字	最高可精確到小數點后幾位	0

7 ValidateBox（驗證框）

7.1 實例

7.1.1 代碼

<html>

<head>

<title>jQuery EasyUI</title>

href="../themes/default/easyui.css">

input,textarea {

width: 200px;

border: 1px solid #ccc;

padding: 2px;

}

</style>

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><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><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><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個字符：

8 Pagination（分頁）

8.1 實例

8.1.1 代碼

<html>

<head>

<title>jQuery EasyUI</title>

href="../themes/default/easyui.css">

$(function(){

$('#pp').pagination({

total:114,

pageSize:15,

pageNumber:2,

pageList:[10,15,20,30,50,100],

loading:false,

showPageList:true,

showRefresh:true,

beforePageText:'第',

afterPageText:'頁，共{pages}頁',

displayMsg:'{from}-{to}/{total}',

buttons:[{

iconCls:'icon-add',

handler:function(){

alert('add');

}

},{

iconCls:'icon-cut',

handler:function(){

alert('cut');

}

},{

iconCls:'icon-save',

handler:function(){

alert('save');

}

}],

onSelectPage:function(pageNumber, pageSize){

$(this).pagination('loading');

alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);

$(this).pagination('loaded');

}

});

</script>

</head>

<body>

<h1>Pagination</h1>

<div style="margin: 10px 0;"><a href="#"

onclick="javascript:$('#pp').pagination({loading:false})">loaded</a> <a

href="#" onclick="javascript:$('#pp').pagination({loading:true})">loading</a>

</div>

<div id="pp"

style="width: 500px; background: #efefef; border: 1px solid #ccc;"></div>

</body>

</html>

8.1.2 效果圖

8.2 參數

屬性名	類型	描述	默認值
total	數字	當分頁建立時設置記錄的總數量	1
pageSize	數字	每一頁顯示的數量	10
pageNumber	數字	當分頁建立時，顯示的頁數	1
pageList	數組	用戶可以修改每一頁的大小，pageList屬性定義了多少種大小可以改變.	[10,20,30,50]
loading	布爾	定義數據是否正在加載	false
buttons	數組	定義自定義按鈕，每個按鈕包含兩個屬性：iconCls: 顯示背景圖像的CSS類 handler: 當一個按鈕被點擊時的處理函數	null
showPageList	布爾	定義是否顯示頁面列表	true
showRefresh	布爾	定義是否顯示刷新按鈕	true
beforePageText	字符串	在輸入框組件前顯示的標簽	Page
afterPageText	字符串	在輸入框組件后顯示的標簽	Of {pages}
displayMsg	字符串	顯示一個頁面的信息。	Displaying {from} {to} of {total} items

8.3 事件

事件名	參數	描述
onSelectPage	pageNumber, pageSize	當用戶選擇一個新頁時觸發，回調函數包含兩個參數：pageNumber: 新頁面的頁數pageSize: 新頁面的大小
onBeforeRefresh	ageNumber, pageSize	刷新按鈕被點擊之前觸發，如果返回false則取消刷新操作
onRefresh	ageNumber, pageSize	刷新以后觸發
onChangePageSize	ageSize	改變頁面大小時觸發

9 Window（窗口）

窗口的主要用法和面板（panel）用法差不多

9.1 實例

9.1.1 代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<head>

<title>Insert title here</title>

href="../themes/default/easyui.css">

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>

<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 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 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>

<title>jQuery EasyUI</title>

href="../themes/default/easyui.css">

function open1(){

$('#p').panel('open');

}

function close1(){

$('#p').panel('close');

}

function load1(){

$('#p').panel({

href:'tabs_href_test.html'

});

$('#p').panel('open');

}

</script>

</head>

<h1>Panel</h1>

<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>

</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>

<title>jQuery EasyUI</title>

var index = 0;

function addTab(){

index++;

$('#tt').tabs('add',{

title:'New Tab ' + index,

content:'Tab Body ' + index,

closable:true

});

}

</script>

</head>

<body>

<div>

</div>

<br/>

</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>

<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>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

</div>

<div title="Title1">Content 1</div>

<div title="Title2">Content 2</div>

<div title="Title3">Content 3</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>

<title>jQuery EasyUI</title>

href="../themes/default/easyui.css">

$(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>

<p>Create from HTML markup</p>

<li><span>Folder</span>

<ul>

<li><span>Sub Folder 1</span>

<ul>

</ul>

</li>

</ul>

</li>

</ul>

<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>

</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>

<title>jQuery EasyUI</title>

$(function(){

var p = $('body').layout('panel','west').panel({

onCollapse:function(){

alert('collapse');

}

});

setTimeout(function(){

$('body').layout('collapse','east');

},0);

});

</script>

</head>

<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>

</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>

<title>jQuery EasyUI</title>

href="../themes/default/easyui.css">

$(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>

</body>

</html>

14.1.2 效果圖

14.2 參數

Name	Type	Description	Default
title	字符串	標題文字	null
iconCls	字符串	一個css類，將提供一個背景圖片作為標題圖標	null
border	布爾	是否顯示面板的邊界。	true
width	數字	表格的寬度	auto
height	數字	表格的高度	auto
columns	數組	表格的列的配置對象，詳見下面column屬性介紹。	null
frozenColumns	數組	與columns屬性相通，但這些列將固定在左側，不得變動。	null
striped	布爾	是否顯示斑馬線	false
method	字符串	遠程數據的獲取類型，可取值為post或get	post
nowrap	布爾	是否在一行顯示數據	true
idField	字符串	指定哪些字段時標識字段	null
url	字符串	從遠程請求數據的地址	null
loadMsg	字符串	當遠程加載數據時，現實的等待信息提示	Processing, please wait …
pagination	布爾	是否顯示底部分頁工具欄	false
rownumbers	布爾	是否顯示行號列	false
singleSelect	布爾	是否允許只選擇一行	false
fit	布爾	是否允許表格自動縮放，以適應父容器	false
pageNumber	數字	初始化頁碼	1
pageSize	數字	初始化頁面大小	10
pageList	數組	初始化頁面大小選擇清單	[10,20,30,40,50]
queryParams	對象	當請求遠程數據時，發送的額外的參數	{}
sortName	字符串	定義哪一列可以排序	null
sortOrder	字符串	定義列排序的方式，遞增（asc）或遞減（desc）	asc
editors	對象	定義當編輯某行數據時的編輯器	predefined editors

14.3 Column參數

Name	Type	Description	Default
title	字符串	列標題文字	undefined
field	字符串	列字段名稱	undefined
width	數字	列寬度	undefined
rowspan	數字	該列占幾行單元格	undefined
colspan	數字	該列占幾列單元格	undefined
align	字符串	數據對其方式，可選值有left,right,center	undefined
sortable	布爾	是否允許該列排序	undefined
checkbox	布爾	是否顯示選擇框	undefined
formatter	函數	包含三個參數： value: the field value. rowData: the row record data rowIndex: the row index.	undefined
editor	string,object	Indicate the edit type. When string indicates the edit type, when object contains two properties: type: string, the edit type, possible type is: text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree. options: object, the editor options corresponding to the edit type.	undefined

14.4 事件

Name	Parameters	Description
onLoadSuccess	data	遠程數據加載成功時觸發
onLoadError	none	遠程數據加載失敗時觸發
onBeforeLoad	data	請求發出去，加載數據前觸發。如果返回false，加載數據動作則退出
onClickRow	rowIndex, rowData	當用戶點擊某行時觸發, the parameters contains: rowIndex: the clicked row index, start with 0 rowData: the record corresponding to the clicked row
onDblClickRow	rowIndex, rowData	當用戶雙擊某行時觸發, the parameters contains: rowIndex: the clicked row index, start with 0 rowData: the record corresponding to the clicked row
onSortColumn	sort, order	當用戶排序某列時觸發, the parameters contains: sort: the sort column field name order: the sort column order
onSelect	rowIndex, rowData	當用戶選擇某行時觸發, the parameters contains: rowIndex: the selected row index, start with 0 rowData: the record corresponding to the selected row
onUnselect	rowIndex, rowData	當用戶取消選擇某行時觸發, the parameters contains: rowIndex: the unselected row index, start with 0 rowData: the record corresponding to the unselected row
onBeforeEdit	rowIndex, rowData	當用戶開始編輯某行時觸發, the parameters contains: rowIndex: the editing row index, start with 0 rowData: the record corresponding to the editing row
onAfterEdit	rowIndex, rowData, changes	當用戶完成編輯某行時觸發, the parameters contains: rowIndex: the editing row index, start with 0 rowData: the record corresponding to the editing row changes: the changed field/value pairs
onCancelEdit	rowIndex, rowData	當用戶退出編輯某行時觸發, the parameters contains: rowIndex: the editing row index, start with 0 rowData: the record corresponding to the editing row

14.5 方法

Name	Parameter	Description
options	none	返回所有參數的對象
getPager	none	返回分頁對象
resize	none	調整表格大小
reload	param	重新加載行
fixColumnSize	none	固定列的大小
loadData	param	加載本地數據，舊行將被刪除
getData	none	返回已加載的數據
getRows	none	返回當前頁的行數
getSelected	none	返回第一次選擇的行記錄
getSelections	none	返回所有選定行，如果沒選擇記錄，則返回空數組
clearSelections	none	取消所有選擇
selectAll	none	選擇當前頁所有行
selectRow	index	選擇某行，行索引以0開始
selectRecord	idValue	通過id值選擇一行
unselectRow	index	取消選擇某行
beginEdit	index	開始編輯某行
endEdit	index	結束編輯某行
cancelEdit	index	退出編輯某行
refreshRow	index	刷新一行的數據
appendRow	row	添加新行
deleteRow	index	刪除一行
getChanges	type	Get changed rows since the last commit. The type parameter indicate which type changed rows, possible value is: inserted,deleted,updated,etc. When the type parameter is not assigned, return all changed rows.
acceptChanges	none	Commits all the changes data since it was loaded or since the last time acceptChanges was called.
rejectChanges	none	Rolls back all the changes data since it was created, or since the last time acceptChanges was called.

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 學習 easyui 之二：jQuery 的 ready 函數和 easyloader 的加載回調函數學習Jquery EasyUI的添加，修改，刪除，查詢等基本操作 JQuery EasyUI Message Jquery EasyUI Datagrid的使用 JQuery EasyUI Combobox聯動 jquery easyui后台模板第 1 章 jQuery EasyUI 入門使用 JQuery EasyUI jquery easyui 全部圖標 jquery easyui dialog的使用