jquery+easyui开发、培训文档
目? 錄
1.... Accordion（可折疊標簽）....................................................................................... 2
1.1????????? 實例........................................................................................................... 2
1.2????????? 參數........................................................................................................... 3
2.... DateBox（日期框）................................................................................................. 4
2.1????????? 實例........................................................................................................... 4
2.2????????? 參數........................................................................................................... 6
2.3????????? 事件........................................................................................................... 6
2.4????????? 方法........................................................................................................... 6
3.... ComboBox(組合框).................................................................................................. 7
3.1????????? 實例........................................................................................................... 7
3.2????????? 參數........................................................................................................... 9
3.3????????? 事件........................................................................................................... 9
3.4????????? 方法........................................................................................................... 9
4.... Dialog（對話框）.................................................................................................. 10
4.1????????? 實例......................................................................................................... 10
4.2????????? 參數......................................................................................................... 12
4.3????????? 事件......................................................................................................... 12
4.4????????? 方法......................................................................................................... 12
5.... Messager（提示框）.............................................................................................. 12
5.1????????? 實例......................................................................................................... 12
5.2????????? 方法......................................................................................................... 15
5.3????????? 擴展......................................................................................................... 16
6.... NumberBox（數字框）.......................................................................................... 16
6.1????????? 實例......................................................................................................... 16
6.2????????? 參數......................................................................................................... 17
7.... ValidateBox（驗證框）.......................................................................................... 18
7.1????????? 實例......................................................................................................... 18
7.2????????? 參數......................................................................................................... 20
7.3????????? 方法......................................................................................................... 20
7.4????????? 擴展......................................................................................................... 20
8.... Pagination（分頁）............................................................................................... 20
8.1????????? 實例......................................................................................................... 20
8.2????????? 參數......................................................................................................... 22
8.3????????? 事件......................................................................................................... 23
9.... Window（窗口）................................................................................................... 23
9.1????????? 實例......................................................................................................... 23
9.2????????? 參數......................................................................................................... 25
9.3????????? 事件......................................................................................................... 26
9.4????????? 方法......................................................................................................... 26
10... Panel（面板）....................................................................................................... 26
10.1??????? 實例......................................................................................................... 26
10.2??????? 參數......................................................................................................... 28
10.3??????? 事件......................................................................................................... 29
10.4??????? 方法......................................................................................................... 29
11... Tabs（標簽）......................................................................................................... 30
11.1??????? 實例......................................................................................................... 30
11.2??????? 參數......................................................................................................... 32
11.3??????? 事件......................................................................................................... 32
11.4??????? 方法......................................................................................................... 33
11.5??????? 標簽面板屬性.......................................................................................... 33
12... Tree（樹）............................................................................................................. 33
12.1??????? 實例......................................................................................................... 33
12.2??????? 參數......................................................................................................... 36
12.3??????? 事件......................................................................................................... 37
12.4??????? 方法......................................................................................................... 37
13... Layout（布局）..................................................................................................... 38
13.1??????? 實例......................................................................................................... 38
13.2??????? 參數......................................................................................................... 39
13.3??????? 方法......................................................................................................... 39
14... Datagrid（數據表）............................................................................................... 39
14.1??????? 實例......................................................................................................... 39
14.2??????? 參數......................................................................................................... 43
14.3??????? Column參數............................................................................................. 44
14.4??????? 事件......................................................................................................... 45
14.5??????? 方法......................................................................................................... 46
?
?
?
1??????????????? Accordion（可折疊標簽）
1.1???????? 實例
1.1.1??? 代碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"? href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript">
??? $( function() {
??????? $('#aa').accordion( {
??????????? width : 400,
??????????? height : 200,
??????????? fit : false
??????? });
??? });
</script>
</head>
<body>
?
<div id="aa" border="true" >
<div title="Title1" icon="icon-save" style="overflow: auto; padding: 10px;">
<h3 style="color: #0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Title2" icon="icon-reload" selected="true"
??? style="padding: 10px;">content2</div>
<div title="Title3">content3</div>
</div>
?
</body>
</html>
?
1.1.2??? 效果圖
?
?
1.1.3? 擴展
實例html代碼中
<div id="aa" border="true" >
此行也可寫成
<div id="aa" class="easyui-accordion" style="width:300px;height:200px;" fit="false" border="false">
，并且將js代碼全部去掉，效果圖是一樣的。
1.2???????? 參數
1.2.1??? 容器參數
| 參數名稱 | 參數類型 | 描述 | 默認值 |
| width | 數字 | 可折疊標簽的寬度。 | auto |
| height | 數字 | 可折疊標簽的高度。 | auto |
| fit | 布爾 | 是否使可折疊標簽自動縮放以適應父容器的大小，當為true時width和height參數將失效。 | false |
| border | 布爾 | 是否顯示邊界線。 | true |
1.2.2??? 面板參數
可折疊標簽面板繼承自面板（panel）,許多屬性定義在<div />標簽里，下面的屬性就是如此：
| 參數名稱 | 參數類型 | 描述 | 默認值 |
| selected | 布爾 | 設置可折疊標簽中默認展開的標簽頁 | false |
?
2??????????????? DateBox（日期框）
2.1???????? 實例
2.1.1??????? 代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
??? href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
??? function disable() {
?????? $('#dd').datebox('disable');
??? }
??? function enable() {
?????? $('#dd').datebox('enable');
??? }
?
??? /*?
??? ?將Date/String類型,解析為String類型.?
??? ?傳入String類型,則先解析為Date類型?
??? ?不正確的Date,返回 ''?
??? ?如果時間部分為0,則忽略,只返回日期部分.?
??? ?*/
??? function formatDate(v) {
?????? if (v instanceof Date) {
?????????? var y = v.getFullYear();
?????????? var m = v.getMonth() + 1;
?????????? var d = v.getDate();
?????????? var h = v.getHours();
?????????? var i = v.getMinutes();
?????????? var s = v.getSeconds();
?????????? var ms = v.getMilliseconds();
?????????? if (ms > 0)
????????????? return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s
???????????????????? + '.' + ms;
?????????? if (h > 0 || i > 0 || s > 0)
????????????? return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;
?????????? return y + '-' + m + '-' + d;
?????? }
?????? return '';
??? }
?
??? $( function() {
?????? $('#dd').datebox( {
?????????? currentText : '今天',
?????????? closeText : '關閉',
?????????? disabled : false,
?????????? required : true,
?????????? missingMessage : '必填',
?????????? formatter : formatDate
?
?????? });
??? });
</script>
</head>
<body>
<h1>DateBox</h1>
<div style="margin-bottom: 10px;"><a href="#" οnclick=
??? disable();
>disable</a>
<a href="#" οnclick=
??? 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="#" οnclick="loadData()">loadData</a>
<a href="#" οnclick="setValue()">setValue</a> <a href="#"
??? οnclick="getValue()">getValue</a> <a href="#" οnclick="disable()">disable</a>
<a href="#" οnclick="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 |
| mode | 字符串 | remote 加載遠程數據 local 本地 遠程接收的url ?是q 接收的時候必須進行URL解碼 | local |
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="#" οnclick="open1()">open1</a>
<a href="#" οnclick="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)" οnclick="show1()">show</a> | <a
??? href="#" οnclick="show2()">slide</a> | <a href="#" οnclick="show3()">fade</a>
|</div>
?
<div><a href="#" οnclick="alert1()">alert</a> | <a href="#"
??? οnclick="alert2()">alert(error)</a> | <a href="#" οnclick="alert3()">alert(info)</a>
| <a href="#" οnclick="alert4()">alert(question)</a> | <a href="#"
??? οnclick="alert5()">alert(warning)</a></div>
<div><a href="#" οnclick="confirm1();">confirm</a></div>
<div><a href="#" οnclick="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="#" οnclick="disable()">disable</a>
<a href="#" οnclick="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" οnclick="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="#"
??? οnclick="javascript:$('#pp').pagination({loading:false})">loaded</a> <a
??? href="#" οnclick="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">
<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)" οnclick="resize()">resize</a> <a
??? href="javascript:void(0)" οnclick="open1()">open</a> <a
??? href="javascript:void(0)" οnclick="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="#" οnclick="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)"
??? οnclick="resize()">Ok</a> <a class="easyui-linkbutton"
??? icon="icon-cancel" href="javascript:void(0)" οnclick="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="#" οnclick="open1()">open</a>
<a href="#" οnclick="close1()">close</a> <a href="#" οnclick="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: 新的寬度;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>
<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)" οnclick="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="#" οnclick="reload()">reload</a>
<a href="#" οnclick="getChecked()">getChecked</a> <a href="#"
??? οnclick="getSelected()">getSelected</a> <a href="#"
??? οnclick="collapse()">collapse</a> <a href="#" οnclick="expand()">expand</a>
<a href="#" οnclick="append()">append</a> <a href="#" οnclick="remove()">remove</a>
<a href="#" οnclick="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, center. | ? |
| border | 布爾 | 如果為ture則顯示布局面板的邊框 | true |
| split | 布爾 | 如果為ture則顯示分隔欄，用戶可以用它來改變布局面板的大小 | false |
| icon | 字符串 | 在面板頭部顯示圖標的CSS | null |
| href | 字符串 | 從遠程地址加載數據的URL | null |
?
13.3??? 方法
| 方法名 | 參數 | 描述 |
| panel | region | 返回某個方位的面板，參數region取值可以是：north,south,east,west,center |
| collapse | region | 收縮某個方位的面板，參數region取值可以是：north,south,east,west |
| expand | region | 展開某個方位的面板，參數region取值可以是：north,south,east,west |
| ? | ? | ? |
?
14????????? Datagrid（數據表）
14.1??? 實例
14.1.1??? 代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css"
??? href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
?????? $(function(){
?????????? $('#test').datagrid({
?????????? ??? title:'My Title',
????????????? iconCls:'icon-save',
????????????? 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="#" οnclick="resize()">resize</a>
<a href="#" οnclick="getSelected()">getSelected</a> <a href="#"
??? οnclick="getSelections()">getSelections</a> <a href="#"
??? οnclick="clearSelections()">clearSelections</a> <a href="#"
??? οnclick="selectRow()">selectRow</a> <a href="#"
??? οnclick="selectRecord()">selectRecord</a> <a href="#"
??? οnclick="unselectRow()">unselectRow</a></div>
?
<table id="test"></table>
?
</body>
</html>
14.1.2??? 效果圖
?
14.2??? 參數
| Name | Type | Description | Default |
| title | 字符串 | 標題文字 | null |
| iconCls | 字符串 | 一個css類，將提供一個背景圖片作為標題圖標 | null |
| border | 布爾 | 是否顯示面板的邊界。 | true |
| width | 數字 | 表格的寬度 | auto |
| height | 數字 | 表格的高度 | auto |
| columns | 數組 | 表格的列的配置對象，詳見下面column屬性介紹。 | null |
| frozenColumns | 數組 | 與columns屬性相通，但這些列將固定在左側，不得變動。 | null |
| striped | 布爾 | 是否顯示斑馬線 | false |
| method | 字符串 | 遠程數據的獲取類型，可取值為post或get | post |
| nowrap | 布爾 | 是否在一行顯示數據 | true |
| idField | 字符串 | 指定哪些字段時標識字段 | null |
| url | 字符串 | 從遠程請求數據的地址 | null |
| loadMsg | 字符串 | 當遠程加載數據時，現實的等待信息提示 | Processing, please wait … |
| pagination | 布爾 | 是否顯示底部分頁工具欄 | false |
| rownumbers | 布爾 | 是否顯示行號列 | false |
| singleSelect | 布爾 | 是否允許只選擇一行 | false |
| fit | 布爾 | 是否允許表格自動縮放，以適應父容器 | false |
| pageNumber | 數字 | 初始化頁碼 | 1 |
| pageSize | 數字 | 初始化頁面大小 | 10 |
| pageList | 數組 | 初始化頁面大小選擇清單 | [10,20,30,40,50] |
| queryParams | 對象 | 當請求遠程數據時，發送的額外的參數 | {} |
| sortName | 字符串 | 定義哪一列可以排序 | null |
| sortOrder | 字符串 | 定義列排序的方式，遞增（asc）或遞減（desc） | asc |
| editors | 對象 | 定義當編輯某行數據時的編輯器 | predefined editors |
?
14.3??? Column參數
| Name | Type | Description | Default |
| title | 字符串 | 列標題文字 | undefined |
| field | 字符串 | 列字段名稱 | undefined |
| width | 數字 | 列寬度 | undefined |
| rowspan | 數字 | 該列占幾行單元格 | undefined |
| colspan | 數字 | 該列占幾列單元格 | undefined |
| align | 字符串 | 數據對其方式，可選值有left,right,center | undefined |
| sortable | 布爾 | 是否允許該列排序 | undefined |
| checkbox | 布爾 | 是否顯示選擇框 | undefined |
| formatter | 函數 | 包含三個參數： value: the field value. rowData: the row record data rowIndex: the row index. | undefined |
| editor | string,object | Indicate the edit type. When string indicates the edit type, when object contains two properties: | undefined |
?
14.4??? 事件
| Name | Parameters | Description |
| onLoadSuccess | data | 遠程數據加載成功時觸發 |
| onLoadError | none | 遠程數據加載失敗時觸發 |
| onBeforeLoad | data | 請求發出去，加載數據前觸發。如果返回false，加載數據動作則退出 |
| onClickRow | rowIndex, rowData | 當用戶點擊某行時觸發, the parameters contains: |
| onDblClickRow | rowIndex, rowData | 當用戶雙擊某行時觸發, the parameters contains: |
| onSortColumn | sort, order | 當用戶排序某列時觸發, the parameters contains: |
| onSelect | rowIndex, rowData | 當用戶選擇某行時觸發, the parameters contains: |
| onUnselect | rowIndex, rowData | 當用戶取消選擇某行時觸發, the parameters contains: |
| onBeforeEdit | rowIndex, rowData | 當用戶開始編輯某行時觸發, the parameters contains: |
| onAfterEdit | rowIndex, rowData, changes | 當用戶完成編輯某行時觸發, the parameters contains: |
| onCancelEdit | rowIndex, rowData | 當用戶退出編輯某行時觸發, the parameters contains: |
?
14.5??? 方法
| Name | Parameter | Description |
| options | none | 返回所有參數的對象 |
| getPager | none | 返回分頁對象 |
| resize | none | 調整表格大小 |
| reload | param | 重新加載行 |
| fixColumnSize | none | 固定列的大小 |
| loadData | param | 加載本地數據，舊行將被刪除 |
| getData | none | 返回已加載的數據 |
| getRows | none | 返回當前頁的行數 |
| getSelected | none | 返回第一次選擇的行記錄 |
| getSelections | none | 返回所有選定行，如果沒選擇記錄，則返回空數組 |
| clearSelections | none | 取消所有選擇 |
| selectAll | none | 選擇當前頁所有行 |
| selectRow | index | 選擇某行，行索引以0開始 |
| selectRecord | idValue | 通過id值選擇一行 |
| unselectRow | index | 取消選擇某行 |
| beginEdit | index | 開始編輯某行 |
| endEdit | index | 結束編輯某行 |
| cancelEdit | index | 退出編輯某行 |
| refreshRow | index | 刷新一行的數據 |
| appendRow | row | 添加新行 |
| deleteRow | index | 刪除一行 |
| getChanges | type | Get changed rows since the last commit. The type parameter indicate which type changed rows, possible value is: inserted,deleted,updated,etc. When the type parameter is not assigned, return all changed rows. |
| acceptChanges | none | Commits all the changes data since it was loaded or since the last time acceptChanges was called. |
| rejectChanges | none | Rolls back all the changes data since it was created, or since the last time acceptChanges was called. |
轉載于:https://www.cnblogs.com/huangf714/p/7080187.html
總結
以上是生活随笔為你收集整理的jquery+easyui开发、培训文档的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： windbg + sos 调试w3wp进
- 下一篇： cocoapods安装