DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery EasyUI API 中文文檔 - DataGrid數據表格
jQuery EasyUI API 中文文檔 - DataGrid數據表格
編輯:JQuery特效代碼     
擴展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重寫了 defaults 。
依賴
panel
resizable
linkbutton
pagination
用法
代碼如下:
<table id="tt"></table>

代碼如下:
$('#tt').datagrid({
url:'datagrid_data.json',
columns:[[
{field:'code',title:'Code',width:100},
{field:'name',title:'Name',width:100},
{field:'price',title:'Price',width:100,align:'right'}
]]
});

數據表格(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

列(Column)的特性
DataGrid 的 Column 是一個數組對象,它的每個元素也是一個數組。數組元素的元素是一個配置對象,它定義了每個列的字段。
代碼示例:
代碼如下:
columns:[[
{field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},
{field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},
{title:'Item Details',colspan:4}
],[
{field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
{field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
{field:'attr1',title:'Attribute',width:100},
{field:'status',title:'Status',width:60}
]]

名稱

類型

說明

默認值

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

編輯器(Editor)

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

每個編輯器有下列行為:

名稱

參數

說明

init

container, options

初始化編輯器並且返回目標對象。

destroy

target

如果必要就銷毀編輯器。

getValue

target

從編輯器的文本返回值。

setValue

target , value

給編輯器設置值。

resize

target , width

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

例如,文本編輯器(text editor)像下面這樣定義:
代碼如下:
$.extend($.fn.datagrid.defaults.editors, {
text: {
init: function(container, options){
var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
return input;
},
getValue: function(target){
return $(target).val();
},
setValue: function(target, value){
$(target).val(value);
},
resize: function(target, width){
var input = $(target);
if ($.boxModel == true){
input.width(width - (input.outerWidth() - input.width()));
} else {
input.width(width);
}
}
}
});

數據表格視圖(DataGrid View)
用 $.fn.datagrid.defaults.view 重寫了 defaults。
view 是一個對象,它告訴 datagrid 如何呈現行。這個對象必須定義下列方法。

名稱

參數

說明

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

視圖被呈現後觸發。

事件

其事件擴展自 panel,下列是為 datagrid 增加的事件。

名稱

參數

說明

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

隱藏指定的列。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved