jQuery EasyUI DataGrid API 中文文檔

 

 

擴展自$.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	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：此行相應的記錄。	span>
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）像下面這樣定義：

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	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	隱藏指定的列。