div easyui-window 視窗樣式

屬性如下：

1.modal:是否生成模態視窗。true[是] false[否]

2.shadow:是否顯示視窗陰影。true[顯示] false[不顯示]

div easyui-panel 面板

屬性如下：

1.title:該標題文字顯示在面板頭部。

2.iconCls:在面板上通過一個CSS類顯示16x16圖示。

3.width:設定面板寬度。預設auto。

4.height:設定面板高度。預設auto。

5.left:設定面板左邊距。

6.top:設定面板頂部位置。

7.cls:在面板中增加一個Class類。

8.headerCls:在面板頭部中增加一個Class類。

9.bodyCls:在面板內容中增加一個Class類。

10.style:在面板中增加一個指定樣式。

11.fit:當True時設定該面板尺寸適合於它的父容器。預設false。

12.border:當定義時顯示面板邊界。預設true。

13.doSize:如果設定為True，該面板將重繪大小，並重建佈局。預設true。

14.collapsible:當定義時顯示可摺疊面板的按鈕。預設false。

15.minimizable:當定義時顯示最小化面板的按鈕。預設false。

16.maximizable:當定義時顯示最大化面板的按鈕。預設false。

17.closable:當定義時顯示關閉面板的按鈕。預設false。

18.tools:自定義工具欄，每個工具都包含兩個屬性:iconCls、handler。

19.collapsed:當定義時該面板初始化時處於收縮狀態。預設false。

20.minimized:當定義時該面板初始化時處於最小化狀態。預設false。

21.maximized:當定義時該面板初始化時處於最大化狀態。預設false。

22.closed：當定義時該面板初始化時處於關閉狀態。預設false。

23.href:一個url，載入遠端資料並顯示在面板中。

24.loadingMessage:當載入遠端資料時，在面板中顯示一個訊息。預設Loading…

事件如下:

1.onLoad:當遠端資料載入完畢後啟用。

2.onBeforeOpen:當面板開啟前啟用。

3.onOpen:當面板開啟後啟用。

4.onBeforeClose:當面板關閉前啟用。

5.onClose:當面板關閉後啟用。

6.onBeforeDestroy:當面板銷燬前啟用。

7.onDestroy:當面板銷燬後啟用。

8.onBeforeCollpase:當面板收縮前啟用。

9.onCollapse:當面板收縮後啟用。

10.onBeforeExpand:當面板擴充套件前啟用。

11.onExpand:當面板擴充套件後啟用。

12.onResize:當面板重繪後啟用。

width:新建的外部寬度

height:新建的外部高度

13.onMove:當面板移動後啟用。

left:左側新位置。

top:頂部新位置。

14.onMaximize:當視窗最大化後啟用。

15.onRestore:當視窗恢復到原來大小時啟用。

16.onMinimize:當視窗最小化後啟用。

方法如下：

1.options:返回options屬性。

2.panel:返回面板物件。

3.header:返回面板頭部物件。

4.body:返回面板主體物件。

5.setTitle:設定頭部的標題文字。

6.open:當forceOpen引數設定為true時，面板開啟時繞過onBeforeOpen回撥函式。

7.close:當forceClose引數設定為true時，該面板關閉時繞過onBeforeClose回撥函式。

8.destroy:當forceDestroy引數設定為true時該面板銷燬時繞過onBeforeDestroy回撥函式。

9.refresh:當href屬性設定後重新整理該面板以載入遠端資料。

10.resize:設定面板的大小和佈局。該options物件包含以下屬性:

width：新的面板寬度。

height：新的面板高度。

left：新的面板左側位置。

top：新的面板頂部位置。

11.move:移動面板到一個新的位置。該options物件包含以下屬性：

left：新的面板左側位置。

top：新的面板頂部位置。

a easyui-linkbutton  連結型別的按鈕

屬性如下：

1.disabled:當True時禁用該按鈕。預設false。

2.plain:當True時顯示一個普通效果。預設false。

input/textarea easyui-validatebox    欄位驗證

屬性如下：

1.required:true[必需] false[不必需] 預設false

2.validType:

a、length[a,b].欄位長度控制在a至b之間。

b、email.驗證Email。

c、url.驗證網路地址。

3.missingMessage：當文字時出現空時彈出該工具提示，系統有預設[英文]，自定義可覆蓋它。

4.invalidMessage：當文字內容無效後彈出該工具提示，系統有預設[英文]，自定義可覆蓋它。

ul easyui-tree 樹形結構

屬性如下：

5.url:一個獲取遠端資料的地址。

6.animate:當展開或摺疊節點時是否定義動畫效果。true[是] false[否] 預設false

節點屬性如下：

1.text:節點的顯示文字。

2.id:節點ID，對於載入遠端資料時非常重要。

3.state:節點狀態，'open'或'closed'，預設為'open'。當設定為'關閉'，該節點包含子節點，並

4.attributes:為節點新增自定義屬性。

5.children:以陣列節點的方式定義一些位元組點。

事件如下：

1.onClick:當用戶點選一個節點時啟用，該節點引數包含如下屬性：

2.id：節點ID

3.text:節點文字

4.attributes:節點自定義屬性。

5.target:目標點選的DOM物件。

6.onLoadSuccess:當資料成功載入資料時啟用，該引數跟jQuery.ajax的'success'函式效果相同。

7.onLoadError:當資料載入資料失敗時啟用，該引數跟jQuery.ajax的'error'函式效果相同。

方法如下:

1.reload:重新載入樹資料。

2.getSelected:獲取選中的節點並返回它，如果沒有選擇節點將返回null。

3.collapse:摺疊一個節點，該目標引數是該節點的DOM物件。

4.expand:展開一個節點，該目標引數是該節點的DOM物件。

5.append:在一個父節點追加一些子節點。

param有兩個屬性：

parent:DOM物件，把它作為父節點追加(它們)。

data:array，或者節點資料。

6.remove:刪除它以及它以下的子節點，該目標引數是該節點的DOM物件。

table easyui-datagrid 表格

屬性如下：

7.title:該DataGrid面板的標題文字。

8.iconCls:一個CSS類，將提供一個背景圖片作為標題圖示。

9.border：當true時，顯示該datagrid面板的邊框。

10.width:面板寬度，自動列寬。

11.height:面板高度，自動列高。

12.columns:該DataGrid列配置物件，檢視column屬性可獲取更多資訊。

13.frozenColumns:跟Columns屬性相同，但是這些列將會被固定在左邊。

14.striped:當true時，單元格顯示條紋。預設false。

15.method:通過該方法型別請求遠端資料。預設post。

16.nowrap:當true時，顯示資料在同一行上。預設true。

17.idField:說明哪個欄位是一個標識欄位。

18.url:一個URL，從遠端站點獲取資料。

19.loadMsg:當從遠端站點載入資料時，顯示一個提示資訊。預設"Processing,please wait …"。自定義覆蓋。

20.pagination:當true時在DataGrid底部顯示一個分頁工具欄。預設false。

21.rownumbers:當true時顯示行號。預設false。

22.singleSelect:當true時只允許當前選擇一行。預設false。

23.fit:當true時，設定大小以適應它的父容器。預設false。

24.pageNumber:當設定分頁屬性時，初始化的頁碼編號。預設從1開始

25.pageSize:當設定分頁屬性是，初始化的頁面大小。預設10行

26.pageList:當設定分頁屬性時，初始化頁面的大小選擇清單。預設[10,20,30,40,50]

27.queryParams:當請求遠端資料時，也可以傳送額外的引數。

28.sortName:定義哪列可以排序。

29.sortOrder:定義列的排列順序，只能是'asc'或'desc'。預設asc。

Column屬性如下：

1.title:該列標題文字。

2.field:該列對應的欄位名稱。

3.width：列寬。

4.rowspan:說明該單元格需要多少行數。

5.colspan:說明該單元格需要多少列數。

6.align:說明Column資料的對齊方式。'left'，'right'，'center' 都可以使用。

7.sortable:當true時，允許該列進行排序。

8.checkbox:當true時，允許該列出現checkbox。

事件如下：

1.onLoadSuccess:當遠端資料載入成功是啟用。

2.onLoadError:當遠端資料載入發現一些錯誤時啟用。

3.onClickRow:當用戶點選某行時啟用，引數包含：

rowIndex: 點選的行索引，從0開始。

rowData: 點選行時對應的記錄。

4.onDblClickRow:當用戶雙擊某行時啟用，引數包含：

rowIndex: 點選的行索引，從0開始。

rowData: 點選行時對應的記錄。

5.onSortColumn:當用戶對某列排序時啟用，引數包含：

sort:排序欄位名稱。

• order:排序欄位型別。

6.onSelect:當用戶選擇某行時啟用，引數包含:

rowIndex: 點選的行索引，從0開始。

rowData: 點選行時對應的記錄。

7.onUnselect:當用戶取消選擇某行時啟用，引數包含:

rowIndex: 點選的行索引，從0開始。

rowData: 點選行時對應的記錄。

方法如下：

1.options:返回選擇物件。

2.resize:重調大小，生成佈局。

3.reload:重新載入資料。

4.fixColumnSize:固定列大小。

5.loadData:載入本地資料，過去的行會被刪除。

6.getSelected:返回第一個選中行的記錄，若未選返回null。

7.getSelections:返回選中的所有行，當沒有選擇記錄時將返回空陣列。

8.clearSelections:清除所有選項的選擇狀態。

9.selectRow:選擇一行，行索引從0開始。

10.selectRecord:通過傳遞一個ID值引數，選擇一行。

11.unselectRow:取消選擇一行。

div easyui-tabs tab容器

屬性如下：

30.width:容器寬度，自動列寬。

31.height:容器高度，自動列高。

32.idSeed:該根id衍生成標籤面板DOM id屬性。預設0

33.plain：當true時，該Tab渲染不使用容器背景圖片。預設false

34.fit:當true時，設定該Tab大小以適應它的父容器。預設false

35.border:當true時，顯示該Tab邊框。

36.scrollIncrement:

37.scrollDuration:

事件如下：

1.onLoad:當一個ajax Tab面板需要載入遠端資料時啟用。該引數跟jQuery.ajax的'success'函式效果相同。

2.onSelect:當用戶選擇一個Tab面板時啟用。

3.onClose:當用戶關閉一個Tab面板時啟用。

方法如下:

1.resize:重繪該Tab容器的佈局。

2.add:新增加一個Tab面板，該選項引數是一個配置物件，看Tab面板屬性可獲取更多資訊。

3.close：關閉該Tab面板，標題引數顯示你要關閉的物件。

4.select:選擇一個Tab面板。

5.exists:如果該Tab面板存在即顯示。

Tab面板屬性如下：

1.id:該Tab面板DOM id屬性。

2.text:該Tab面板標題文字。

3.content:該Tab面板內容。

4.href:一個URL，載入遠端內容以填充Tab面板。

5.cache:當true時，快取Tab面板，當href 屬性設定後有效。預設true

6.icon:增加一個CSS class圖示以顯示在Tab面板的標題旁。

7.closable:當true時，該Tab面板將顯示可關閉按鈕，點選能關閉該Tab面板。預設false

8.selected:當true時，該Tab面板將被選中。預設false

9.width:面板寬度，自動列寬。

10.height:面板高度，自動列高。

div menu-sep 選單分隔線

a easyui-splitbutton 選單列

div easyui-accordion  手風琴式下拉框

繼承自panel

select easyui-combobox 組合下拉框

屬性如下：

38.width:容器寬度，自動列寬。

39.listWidth:該組合下拉框的寬度。

40.listHeight:該組合下拉框的高度。

41.valueField：把該基礎資料的值名稱繫結到組合下拉框中[value]。

42.textField:把該基礎資料的欄位名稱繫結到組合下拉框中[text]。

43.editable:當True時，可直接在文字域中鍵入文字。預設true。

44.url:一個URL，從遠端載入列表資料。

事件如下：

1.onLoadSuccess:當遠端資料載入成功是啟用。

2.onLoadError:當遠端資料載入發現一些錯誤時啟用。

3.onSelect:當用戶選擇一個列表選項時啟用。

4.onChange:當該欄位的值發生改變時啟用。

方法如下:

1.select: 在下拉列表中選擇一個值。

2.setValue: 設定指定值到該欄位。在'param' 引數可以是一個字串或者一個JS物件。注:JS物件包含的屬性對應valueField和TextField兩個屬性。

3.getValue: 獲取該欄位的值。

4.reload:重新請求遠端列表資料。

select easyui-combotree 組合樹形框

屬性如下：

45.width:容器寬度，自動列寬。

46.treeWidth:該樹形下拉框的寬度。

47.treeHeight:該樹形下拉框的高度。

48.url:一個URL，從遠端載入樹形資料。

事件如下：

1.onSelect:當用戶選擇一個樹形節點時啟用。

2.onChange:當該欄位的值發生改變時啟用。

方法如下:

1.setValue: 設定指定值到該欄位。在'param' 引數可以是一個樹形節點ID值或者一個JS物件。注:JS物件包含的屬性對應id和text兩個屬性。

2.getValue: 獲取該欄位的值。

3.reload:重新請求遠端列表資料。

body[div] easyui-layout  佈局

屬性如下：

49.title:該面板標題文字。

50.region:定義佈局面板的位置，包含下列值:north,south, east, west, center。

51.border:當True時顯示佈局面板的邊框。預設為True。

52.split: 當True時顯示一個分割符以使使用者改變面板的尺寸。預設false。

53.icon:一個圖示CSS類，在面板頭部顯示一個圖示。

54.href:一個URL,以從遠端站點載入資料。      

div easyui-menu  選單

屬性如下：

55.zIndex: Menu z-index樣式。註釋：z-index 屬性設定元素的堆疊順序。

56.left:選單左起位置。預設0。

57.top: 選單頂部位置。預設0。

58.href:當點選選單項時能在當前瀏覽器視窗顯示不同的網址。

事件如下:

1.onShow:啟用後顯示選單。

2.onHide:啟用後隱藏選單。

方法如下:

1.show:在指定的位置顯示一個選單。該位置上包含兩個引數：

2.left:新的左起位置。

3.top:新的頂部位置。

4.hide:隱藏一個選單。

a easyui-menubutton  選單按鈕

屬性如下：

59.disabled:當True時禁用該按鈕。預設false。

60.plain:當True時顯示一個普通效果。預設false。

61.menu:一個選擇器名稱，用來建立相應的選單。

62.duration: 當懸停該按鈕時，定義選單的持續顯示時間，單位為毫秒。預設

input easyui-numberbox 數字輸入框

選項如下:

63.min:允許的最小值。當輸入值小於最小值時，顯示最小值。

64.max:允許的最大值。當輸入值大於最大值時，顯示最大值。

65.precision:分隔符後能精確的小數點位數。整數預設會追加小數點位數。

JS定義：

window視窗

.tree 樹形結構

.datagrid 表格

.combobox 組合下拉框

.combotree 組合樹形框

.dialog 對話方塊

繼承自window

私有屬性如下：

1.title:該對話方塊標題文字。預設"New Dialog"。

2.collapsible:當True時可顯示摺疊按鈕。預設false。

3.minimizable:當True時可顯示最小化按鈕。預設false。

4.maximizable:當True時可顯示最大化按鈕。預設false。

5.resizable:當True時能重繪對話方塊大小。預設false。

6.toolbar:該工具欄置於對話方塊的頂部，每個工具欄包含:text, iconCls, disabled, handler等屬性。

7.buttons:這個按鈕置於對話方塊的底部，每個按鈕包含:text, iconCls, handler等屬性。

.draggable 可自由拖動的塊

屬性如下:

1.handle:選擇"#id"進行拖動。

2.disabled:當True時停止自由拖動。預設false。

3.edge:開始拖動拖動塊時的寬度。預設0。

4.axis:當拖動塊移動時定義軸，可選值是'v'或者'h',當超出'v'和'h'的方位時將設定為null。

事件如下：

1.onStartDrag:當目標物件開始拖動時啟用。

2.onDrag:在拖動期間啟用。返回false將不會實際拖動它(的位置)。

3.onStopDrag:當目標物件停止拖動時啟用。

.linkbutton 鏈式按鈕

.messager  訊息框

選項如下：

1.ok:顯示確定按鈕文字。

2.cancel:顯示取消按鈕文字。

方法如下

1.show:在螢幕的右下角出現一個訊息框。該選項引數是一個配置物件，它包括：

showType:定義訊息框顯示的模式，可選值包括:null,slide,fade,show.預設slide.

showSpeed: 定義訊息框完成顯示的時間。預設600毫秒。

width: 定義訊息框的寬度。預設250。

height:定義訊息框的高度。預設100。

msg:定義訊息框顯示的文字。

title: 在訊息框面板頭部顯示標題文字。

timeout: 如果定義為0,訊息框將不會自動關閉，除非使用者手動關閉它。如果定義為非0值，訊息框會在超時結束時自動關閉它。單位毫秒。

2.alert:顯示一個列印視窗。它的引數如下:

title: 在頭部顯示標題文字。

msg:顯示文字內容。

icon: 顯示圖示。可選值:error,question,info,warning。

fn: 當視窗關閉後觸發回撥函式。

3.confirm:顯示一個包含確定和取消按鈕的確認訊息框。引數包括:

title:在頭部顯示標題文字。

msg: 顯示文字內容。

fn(b):回撥函式，當用戶點選OK按鈕，返回True,才會處理該函式，其它按鈕返回false,不處理。

4.prompt:顯示一個訊息框，包含OK和Cancel按鈕並提示使用者輸入一些文字。引數包括:

title:在頭部顯示標題文字。

msg:顯示文字內容。

fn(val):該回調函式處理使用者輸入的引數值。

.pagination 頁碼工具條

屬性如下：

1.total:當分頁條建立後設置的記錄數。預設1。

2.pageSize:頁面大小。預設10。

3.pageNumber:當分頁建立後顯示的頁碼。預設1。

4.pageList:使用者能更改頁面的大小。您也可以改變該屬性定義的預設大小。預設[10,20,30,50]。

5.loading:定義是否正在載入。預設false。

6.buttons:定義自定義按鈕，每個按鈕都包含兩個屬性:

iconCls: 該CSS類將顯示一個背景圖示。

handler: 當按鈕點選時觸發一個處理函式。

7.beforePageText:當輸入元件前顯示一個標籤文字。

8.afterPageText:當輸入元件後顯示一個標籤文字。

9.displayMsg:顯示一個頁面資訊。

方法如下:

1.onSelectPage:當用戶選擇一個新頁面時啟用。該回調函式包括兩個引數:

2.pageNumber: 該新頁面的頁碼。

3.pageSize:該新頁面的大小。