jquery easyui DataGrid 資料表格 屬性

深海藍山發表於2017-04-17
jQueryUI

用法

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

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 是一個陣列物件，它的每個元素也是一個陣列。陣列元素的元素是一個配置物件，它定義了每個列的欄位。

程式碼示例：

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

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, {   
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

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

隱藏指定的列。

 



相關文章