數據表格(DataGrid)的特性
其特性擴展自 panel,下列是為 datagrid 增加的特性。
名稱
類型
說明
默認值
columns
array
datagrid 的 column 的配置對象,更多詳細請參見 column 的特性。
null
frozenColumns
array
和列的特性一樣,但是這些列將被凍結在左邊。
null
fitColumns
boolean
True 就會自動擴大或縮小列的尺寸以適應表格的寬度並且防止水平滾動。
false
striped
boolean
True 就把行條紋化。(即奇偶行使用不同背景色)
false
method
string
請求遠程數據的 method 類型。
post
nowrap
boolean
True 就會把數據顯示在一行裡。
true
idField
string
標識字段。
null
url
string
從遠程站點請求數據的 URL。
null
loadMsg
string
當從遠程站點加載數據時,顯示的提示信息。
Processing, please wait …
pagination
boolean
True 就會在 datagrid 的底部顯示分頁欄。
false
rownumbers
boolean
True 就會顯示行號的列。
false
singleSelect
boolean
True 就會只允許選中一行。
false
pageNumber
number
當設置了 pagination 特性時,初始化頁碼。
1
pageSize
number
當設置了 pagination 特性時,初始化頁碼尺寸。
10
pageList
array
當設置了 pagination 特性時,初始化頁面尺寸的選擇列表。
[10,20,30,40,50]
queryParams
object
當請求遠程數據時,發送的額外參數。
{}
sortName
string
定義可以排序的列。
null
sortOrder
string
定義列的排序順序,只能用 'asc' 或 'desc'。
asc
remoteSort
boolean
定義是否從服務器給數據排序。
true
showFooter
boolean
定義是否顯示一行頁腳。
false
rowStyler
function
返回例如 'background:red' 的樣式,該函數需要兩個參數:
rowIndex: 行的索引,從 0 開始。
rowData: 此行相應的記錄。
loadFilter
function
返回過濾的數據去顯示。這個函數需要一個參數 'data' ,表示原始數據。
你可以把原始數據變成標准數據格式,此函數必須返回標准數據對象,含有 'total' 和 'rows' 特性。
editors
object
定義編輯行時的 editor 。
預定義的 editor
view
object
定義 datagrid 的 view 。
默認的 view
名稱
類型
說明
默認值
title
string
列的標題文字。
undefined
field
string
列的字段名。
undefined
width
number
列的寬度。
undefined
rowspan
number
指一個單元格占據多少行。
undefined
colspan
number
指一個單元格占據多少列。
undefined
align
string
指如何對齊此列的數據,可以用 'left'、'right'、'center'。
undefined
sortable
boolean
True 就允許此列被排序。
undefined
resizable
boolean
True 就允許此列被調整尺寸。
undefined
hidden
boolean
True 就隱藏此列。
undefined
checkbox
boolean
True 就顯示 checkbox。
undefined
formatter
function
單元格的格式化函數,需要三個參數:
value: 字段的值。
rowData: 行的記錄數據。
rowIndex: 行的索引。
undefined
styler
function
單元格的樣式函數,返回樣式字符串來自定義此單元格的樣式,例如 'background:red' 。此函數需要三個參數:
value: 字段的值。
rowData: 行的記錄數據。
rowIndex: 行的索引。
undefined
sorter
function
自定義字段的排序函數,需要兩個參數:
a: 第一個字段值。
b: 第二個字段值。
undefined
editor
string,object
指編輯類型。當是 string 時指編輯類型,當 object 時包含兩個特性:
type:string,編輯類型,可能的類型是:
text、textarea、checkbox、numberbox、validatebox、datebox、combobox、combotree。
options:對象,編輯類型對應的編輯器選項。
undefined
名稱
參數
說明
init
container, options
初始化編輯器並且返回目標對象。
destroy
target
如果必要就銷毀編輯器。
getValue
target
從編輯器的文本返回值。
setValue
target , value
給編輯器設置值。
resize
target , width
如果必要就調整編輯器的尺寸。
名稱
參數
說明
render
target, container, frozen
當數據加載時調用。
target:DOM 對象,datagrid 對象。
container:行的容器。
frozen:表示是否呈現凍結容器。
renderFooter
target, container, frozen
這是呈現行腳選項的函數。
renderRow
target, fields, frozen, rowIndex, rowData
這是選項的函數,將會被 render 函數調用。
refreshRow
target, rowIndex
定義如何刷新指定的行。
onBeforeRender
target, rows
視圖被呈現前觸發。
onAfterRender
target
視圖被呈現後觸發。
名稱
參數
說明
onLoadSuccess
data
當數據加載成功時觸發。
onLoadError
none
加載遠程數據發生某些錯誤時觸發。
onBeforeLoad
param
發送加載數據的請求前觸發,如果返回 false加載動作就會取消。
onClickRow
rowIndex, rowData
當用戶點擊一行時觸發,參數包括:
rowIndex:被點擊行的索引,從 0 開始。
rowData:被點擊行對應的記錄。
onDblClickRow
rowIndex, rowData
當用戶雙擊一行時觸發,參數包括:
rowIndex:被雙擊行的索引,從 0 開始。
rowData:被雙擊行對應的記錄。
onClickCell
rowIndex, field, value
當用戶單擊一個單元格時觸發。
onDblClickCell
rowIndex, field, value
當用戶雙擊一個單元格時觸發。
onSortColumn
sort, order
當用戶對一列進行排序時觸發,參數包括:
sort:排序的列的字段名
order:排序的列的順序
onResizeColumn
field, width
當用戶調整列的尺寸時觸發。
onSelect
rowIndex, rowData
當用戶選中一行時觸發,參數包括:
rowIndex:選中行的索引,從 0 開始
rowData:選中行對應的記錄
onUnselect
rowIndex, rowData
當用戶取消選擇一行時觸發,參數包括:
rowIndex:取消選中行的索引,從 0 開始
rowData:取消選中行對應的記錄
onSelectAll
rows
當用戶選中全部行時觸發。
onUnselectAll
rows
當用戶取消選中全部行時觸發。
onBeforeEdit
rowIndex, rowData
當用戶開始編輯一行時觸發,參數包括:
rowIndex:編輯行的索引,從 0 開始
rowData:編輯行對應的記錄
onAfterEdit
rowIndex, rowData, changes
當用戶完成編輯一行時觸發,參數包括:
rowIndex:編輯行的索引,從 0 開始
rowData:編輯行對應的記錄
changes:更改的字段/值對
onCancelEdit
rowIndex, rowData
當用戶取消編輯一行時觸發,參數包括:
rowIndex:編輯行的索引,從 0 開始
rowData:編輯行對應的記錄
onHeaderContextMenu
e, field
當 datagrid 的頭部被右鍵單擊時觸發。
onRowContextMenu
e, rowIndex, rowData
當右鍵點擊行時觸發。
方法
名稱
參數
說明
options
none
返回 options 對象。
getPager
none
返回 pager 對象。
getPanel
none
返回 panel 對象。
getColumnFields
frozen
返回列的字段,如果 frozen 設定為 true,凍結列的字段被返回。
getColumnOption
field
返回指定列的選項。
resize
param
調整尺寸和布局。
load
param
加載並顯示第一頁的行,如果指定 param 參數,它將替換 queryParams 特性。
reload
param
重新加載行,就像 load 方法一樣,但是保持在當前頁。
reloadFooter
footer
重新加載腳部的行。
loading
none
顯示正在加載狀態。
loaded
none
隱藏正在加載狀態。
fitColumns
none
使列自動展開/折疊以適應 datagrid 的寬度。
fixColumnSize
none
固定列的尺寸。
fixRowHeight
index
固定指定行的高度。
loadData
data
加載本地數據,舊的行會被移除。
getData
none
返回加載的數據。
getRows
none
返回當前頁的行。
getFooterRows
none
返回腳部的行。
getRowIndex
row
返回指定行的索引,row 參數可以是一個行記錄或者一個 id 字段的值。
getSelected
none
返回第一個選中的行或者 null。
getSelections
none
返回所有選中的行,當沒有選中的記錄時,將返回空數組。
clearSelections
none
清除所有的選擇。
selectAll
none
選中當前頁所有的行。
unselectAll
none
取消選中當前頁所有的行。
selectRow
index
選中一行,行索引從 0 開始。
selectRecord
idValue
通過 id 的值做參數選中一行。
unselectRow
index
取消選中一行。
beginEdit
index
開始對一行進行編輯。
endEdit
index
結束對一行進行編輯。
cancelEdit
index
取消對一行進行編輯。
getEditors
index
獲取指定行的編輯器們。每個編輯器有下列特性:
actions:編輯器能做的動作們。
target:目標編輯器的 jQuery 對象。
field:字段名。
type:編輯器的類型。
getEditor
options
獲取指定的編輯器, options 參數包含兩個特性:
index:行的索引。
field:字段名。
refreshRow
index
刷新一行。
validateRow
index
驗證指定的行,有效時返回 true。
updateRow
param
更新指定的行, param 參數包含下列特性:
index:更新行的索引。
row:行的新數據。
appendRow
row
追加一個新行。
insertRow
param
插入一個新行, param 參數包括下列特性:
index:插入進去的行的索引,如果沒有定義,就追加此新行。
row:行的數據。
deleteRow
index
刪除一行。
getChanges
type
獲取最後一次提交以來更改的行,type 參數表示更改的行的類型,可能的值是:inserted、deleted、updated,等等。
當 type 參數沒有分配時,返回所有改變的行。
acceptChanges
none
提交自從被加載以來或最後一次調用acceptChanges以來所有更改的數據。
rejectChanges
none
回滾自從創建以來或最後一次調用acceptChanges以來所有更改的數據。
mergeCells
options
把一些單元格合並為一個單元格,options 參數包括下列特性:
index:列的索引。
field:字段名。
rowspan:合並跨越的行數。
colspan:合並跨越的列數。
showColumn
field
顯示指定的列。
hideColumn
field
隱藏指定的列。