jQuery EasyUI API 中文文檔 - 資料表格（DataGrid）

擴充自 $.fn.panel.defaults ，用 $.fn.datagrid.defaults 重寫了 defaults 。

依賴

panel

resizable

linkbutton

pagination

用法

1. <table id="tt"></table>

1. $('#tt').datagrid({  

2.     url:'datagrid_data.json',  

3.     columns:[[  

4.         {field:'code',title:'Code',width:100},  

5.         {field:'name',title:'Name',width:100},  

6.         {field:'price',title:'Price',width:100,align:'right'}  

7.     ]]  

8. }); 

資料表格（DataGrid）的特性

其特性擴充自 panel，下列是為 datagrid 增加的特性。

名稱

類型

說明

預設值

columns

array

datagrid 的 column 的配置對象，更多詳細請參見 column 的特性。

null

frozenColumns

和列的特性一樣，但是這些列将被當機在左邊。

fitColumns

boolean

True 就會自動擴大或縮小列的尺寸以适應表格的寬度并且防止水準滾動。

false

striped

True 就把行條紋化。（即奇偶行使用不同背景色）

method

string

請求遠端資料的 method 類型。

post

nowrap

True 就會把資料顯示在一行裡。

true

idField

辨別字段。

url

從遠端站點請求資料的 URL。

loadMsg

當從遠端站點加載資料時，顯示的提示資訊。

Processing, please wait …

True 就會在 datagrid 的底部顯示分頁欄。

rownumbers

True 就會顯示行号的列。

singleSelect

True 就會隻允許選中一行。

pageNumber

number

當設定了 pagination 特性時，初始化頁碼。

1

pageSize

當設定了 pagination 特性時，初始化頁碼尺寸。

10

pageList

當設定了 pagination 特性時，初始化頁面尺寸的選擇清單。

[10,20,30,40,50]

queryParams

object

當請求遠端資料時，發送的額外參數。

{}

sortName

定義可以排序的列。

sortOrder

定義列的排序順序，隻能用 'asc' 或 'desc'。

asc

remoteSort

定義是否從伺服器給資料排序。

showFooter

定義是否顯示一行頁腳。

rowStyler

function

傳回例如 'background:red' 的樣式，該函數需要兩個參數：

rowIndex： 行的索引，從 0 開始。

rowData： 此行相應的記錄。

loadFilter

傳回過濾的資料去顯示。這個函數需要一個參數 'data' ，表示原始資料。

你可以把原始資料變成标準資料格式，此函數必須傳回标準資料對象，含有 'total' 和 'rows' 特性。

editors

定義編輯行時的 editor 。

預定義的 editor

view

定義 datagrid 的 view 。

預設的 view

列（Column）的特性

DataGrid 的 Column 是一個數組對象，它的每個元素也是一個數組。數組元素的元素是一個配置對象，它定義了每個列的字段。

代碼示例：

1. columns:[[  

2.     {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},  

3.     {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},  

4.     {title:'Item Details',colspan:4}  

5. ],[  

6.     {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},  

7.     {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},  

8.     {field:'attr1',title:'Attribute',width:100},  

9.     {field:'status',title:'Status',width:60}  

10. ]] 

title

列的标題文字。

undefined

field

列的字段名。

width

列的寬度。

rowspan

指一個單元格占據多少行。

colspan

指一個單元格占據多少列。

align

指如何對齊此列的資料，可以用 'left'、'right'、'center'。

sortable

True 就允許此列被排序。

True 就允許此列被調整尺寸。

hidden

True 就隐藏此列。

checkbox

True 就顯示 checkbox。

formatter

單元格的格式化函數，需要三個參數：

value： 字段的值。

rowData： 行的記錄資料。

rowIndex： 行的索引。

styler

單元格的樣式函數，傳回樣式字元串來自定義此單元格的樣式，例如 'background:red' 。此函數需要三個參數：

sorter

自定義字段的排序函數，需要兩個參數：

a： 第一個字段值。

b： 第二個字段值。

editor

string,object

指編輯類型。當是 string 時指編輯類型，當 object 時包含兩個特性：

type：string，編輯類型，可能的類型是：

text、textarea、checkbox、numberbox、validatebox、datebox、combobox、combotree。

options：對象，編輯類型對應的編輯器選項。

編輯器（Editor）

用 $.fn.datagrid.defaults.editors 重寫了 defaults。

每個編輯器有下列行為：

參數

init

container, options

初始化編輯器并且傳回目标對象。

destroy

target

如果必要就銷毀編輯器。

getValue

從編輯器的文本傳回值。

setValue

target , value

給編輯器設定值。

resize

target , width

如果必要就調整編輯器的尺寸。

例如，文本編輯器（text editor）像下面這樣定義：

1. $.extend($.fn.datagrid.defaults.editors, {  

2.     text: {  

3.         init: function(container, options){  

4. var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);  

5. return input;  

6.         },  

7.         getValue: function(target){  

8. return $(target).val();  

9.         },  

10.         setValue: function(target, value){  

11.             $(target).val(value);  

12.         },  

13.         resize: function(target, width){  

14. var input = $(target);  

15. if ($.boxModel == true){  

16.                 input.width(width - (input.outerWidth() - input.width()));  

17.             } else {  

18.                 input.width(width);  

19.             }  

20.         }  

21.     }  

22. }); 

資料表格視圖（DataGrid View）

用 $.fn.datagrid.defaults.view 重寫了 defaults。

view 是一個對象，它告訴 datagrid 如何呈現行。這個對象必須定義下列方法。

render

target, container, frozen

當資料加載時調用。

target：DOM 對象，datagrid 對象。

container：行的容器。

frozen：表示是否呈現當機容器。

renderFooter

這是呈現行腳選項的函數。

renderRow

target, fields, frozen, rowIndex, rowData

這是選項的函數，将會被 render 函數調用。

refreshRow

target, rowIndex

定義如何重新整理指定的行。

onBeforeRender

target, rows

視圖被呈現前觸發。

onAfterRender

視圖被呈現後觸發。

事件

其事件擴充自 panel，下列是為 datagrid 增加的事件。

onLoadSuccess

data

當資料加載成功時觸發。

onLoadError

none

加載遠端資料發生某些錯誤時觸發。

onBeforeLoad

param

發送加載資料的請求前觸發，如果傳回 false加載動作就會取消。

onClickRow

rowIndex, rowData

當使用者點選一行時觸發，參數包括：

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

rowData：被點選行對應的記錄。

onDblClickRow

當使用者輕按兩下一行時觸發，參數包括：

rowIndex：被輕按兩下行的索引，從 0 開始。

rowData：被輕按兩下行對應的記錄。

onClickCell

rowIndex, field, value

當使用者單擊一個單元格時觸發。

onDblClickCell

當使用者輕按兩下一個單元格時觸發。

onSortColumn

sort, order

當使用者對一列進行排序時觸發，參數包括：

sort：排序的列的字段名

order：排序的列的順序

onResizeColumn

field, width

當使用者調整列的尺寸時觸發。

onSelect

當使用者選中一行時觸發，參數包括：

rowIndex：選中行的索引，從 0 開始

rowData：選中行對應的記錄

onUnselect

當使用者取消選擇一行時觸發，參數包括：

rowIndex：取消選中行的索引，從 0 開始

rowData：取消選中行對應的記錄

onSelectAll

rows

當使用者選中全部行時觸發。

onUnselectAll

當使用者取消選中全部行時觸發。

onBeforeEdit

當使用者開始編輯一行時觸發，參數包括：

rowIndex：編輯行的索引，從 0 開始

rowData：編輯行對應的記錄

onAfterEdit

rowIndex, rowData, changes

當使用者完成編輯一行時觸發，參數包括：

changes：更改的字段/值對

onCancelEdit

當使用者取消編輯一行時觸發，參數包括：

onHeaderContextMenu

e, field

當 datagrid 的頭部被右鍵單擊時觸發。

onRowContextMenu

e, rowIndex, rowData

當右鍵點選行時觸發。

方法

options

傳回 options 對象。

getPager

傳回 pager 對象。

getPanel

傳回 panel 對象。

getColumnFields

frozen

傳回列的字段，如果 frozen 設定為 true，當機列的字段被傳回。

getColumnOption

傳回指定列的選項。

調整尺寸和布局。

load

加載并顯示第一頁的行，如果指定 param 參數，它将替換 queryParams 特性。

reload

重新加載行，就像 load 方法一樣，但是保持在目前頁。

reloadFooter

footer

重新加載腳部的行。

loading

顯示正在加載狀态。

loaded

隐藏正在加載狀态。

使列自動展開/折疊以适應 datagrid 的寬度。

fixColumnSize

固定列的尺寸。

fixRowHeight

index

固定指定行的高度。

loadData

加載本地資料，舊的行會被移除。

getData

傳回加載的資料。

getRows

傳回目前頁的行。

getFooterRows

傳回腳部的行。

getRowIndex

row

傳回指定行的索引，row 參數可以是一個行記錄或者一個 id 字段的值。

getSelected

傳回第一個選中的行或者 null。

getSelections

傳回所有選中的行，當沒有選中的記錄時，将傳回空數組。

clearSelections

清除所有的選擇。

selectAll

選中目前頁所有的行。

unselectAll

取消選中目前頁所有的行。

selectRow

選中一行，行索引從 0 開始。

selectRecord

idValue

通過 id 的值做參數選中一行。

unselectRow

取消選中一行。

beginEdit

開始對一行進行編輯。

endEdit

結束對一行進行編輯。

cancelEdit

取消對一行進行編輯。

getEditors

擷取指定行的編輯器們。每個編輯器有下列特性：

actions：編輯器能做的動作們。

target：目标編輯器的 jQuery 對象。

field：字段名。

type：編輯器的類型。

getEditor

擷取指定的編輯器， options 參數包含兩個特性：

index：行的索引。

重新整理一行。

validateRow

驗證指定的行，有效時傳回 true。

updateRow

更新指定的行， param 參數包含下列特性：

index：更新行的索引。

row：行的新資料。

appendRow

追加一個新行。

insertRow

插入一個新行， param 參數包括下列特性：

index：插入進去的行的索引，如果沒有定義，就追加此新行。

row：行的資料。

deleteRow

删除一行。

getChanges

type

擷取最後一次送出以來更改的行，type 參數表示更改的行的類型，可能的值是：inserted、deleted、updated，等等。

當 type 參數沒有配置設定時，傳回所有改變的行。

acceptChanges

送出自從被加載以來或最後一次調用acceptChanges以來所有更改的資料。

rejectChanges

復原自從建立以來或最後一次調用acceptChanges以來所有更改的資料。

mergeCells

把一些單元格合并為一個單元格，options 參數包括下列特性：

index：列的索引。

rowspan：合并跨越的行數。

colspan：合并跨越的列數。

showColumn

顯示指定的列。

hideColumn

隐藏指定的列。