jQuery EasyUI API - Grid - DataGrid [原創漢化官方API]

時間 2019-11-13

標籤 jquery easyui api grid datagrid 原創官方欄目 JQuery 简体版

原文原文鏈接

最近在學習jQuery EasyUI，發現中文的文檔好少，部分文檔不錯但它是鳥語的，爲了你們也爲了本身學習吧，漢化作一下筆記。json

有沒有說清楚的，或者翻譯不正確的地方還請你們諒解指出。。數組

因爲工做時間緣由，天天翻譯一點，最後會整理出一套幫助文檔發佈給你們，一塊兒期待哈。。服務器

還有。。。贊一下了哈~打字很累的。。(*^_^*)app

DataGrid

　　繼承自 $.fn.panel.defaults，覆蓋默認值 $.fn.datagrid.defaults.編輯器

　　DataGrid控件顯示數據以表格的形式提供了豐富的選擇，支持排序，組和編輯數據。ide

　　DataGrid控件被設計來減小開發時間和要求開發商沒有特定的知識。它是輕量級的和功能豐富的。合併單元格，多列標題，凍結列和頁腳是僅有的幾個特色。函數

[依賴於]工具

panel
resizable
linkbutton
pagination

[使用實例]

在HTML標籤中，從現有的元素建立表元素、定義列、行中的數據：佈局

 1 <table class="easyui-datagrid">  
 2     <thead>  
 3         <tr>  
 4             <th data-options="field:'code'">Code</th>  
 5             <th data-options="field:'name'">Name</th>  
 6             <th data-options="field:'price'">Price</th>  
 7         </tr>  
 8     </thead>  
 9     <tbody>  
10         <tr>  
11             <td>001</td><td>name1</td><td>2323</td>  
12         </tr>  
13         <tr>  
14             <td>002</td><td>name2</td><td>4612</td>  
15         </tr>  
16     </tbody>  
17 </table>

經過<table>標籤建立DataGrid，在table表格裏嵌套<th>標籤訂義。post

 1 <table class="easyui-datagrid" style="width:400px;height:250px"  
 2  data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">  
 3     <thead>  
 4         <tr>  
 5             <th data-options="field:'code',width:100">Code</th>  
 6             <th data-options="field:'name',width:100">Name</th>  
 7             <th data-options="field:'price',width:100,align:'right'">Price</th>  
 8         </tr>  
 9     </thead>  
10 </table>

使用Javascript也能夠建立DataGrid：

1 <table id="dg"></table>

1 $('#dg').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 });

使用一些參數查詢數據：

1 $('#dg').datagrid('load', { 2     name: 'easyui', 3     address: 'ho'  
4 });

改變數據到服務器後，更新以前的數據：

1 $('#dg').datagrid('reload');    // 從新加載當前頁的數據

[DataGrid 屬性]

屬性繼承自 panel 面板，下面是從 panel 新增的屬性列表：

名稱	類型	描述	默認值
columns	array	DataGrid列的配置對象，更多詳細請參見列屬性。	undefined
frozenColumns	array	相同列的屬性，可是這些列會被凍結在左邊。	undefined
fitColumns	boolean	爲「true」則自動展開/收縮列的大小，爲了自動填充Grid的寬度，防止出現水平滾動條。	false
autoRowHeight	boolean	定義是否基於行的內容設置行高，設置「false」能夠提升加載性能。	true
toolbar	array,selector	DataGrid面板頂部的 ToolBar 工具條，能夠設置的值以下： 1) 一個數組，每一個options項是相同的LinkButton。 2) 一個 selector 選擇器指定 ToolBar 工具條。使用<div>標籤訂義 ToolBar 工具條： 1 $('#dg').datagrid({ 2 toolbar: '#tb' 3 }); 4 <div id="tb"> 5 　　<a href="#" 6 class="easyui-linkbutton" 7 data-options="iconCls:'icon-edit',plain:true"></a> 8 　　<a href="#" 9 class="easyui-linkbutton" 10 data-options="iconCls:'icon-help',plain:true"></a> 11 </div> 經過數組定義 ToolBar： 1 $('#dg').datagrid({ 2 toolbar: [{ 3 iconCls: 'icon-edit', 4 handler: function(){alert('edit')} 5 },'-',{ 6 iconCls: 'icon-help', 7 handler: function(){alert('help')} 8 }] 9 });	null
striped	boolean	設置「True」實現各行變色的功能。	false
method	string	這個方法須要遠程數據類型。	post
nowrap	boolean	設置爲「True」則將數據顯示在一行內，設置爲「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
checkOnSelect	boolean	若是設置爲「True」，當用戶點擊一行時選中/取消選中該複選框。若是設置爲「False」，當用戶準確點擊複選框時，選中/取消選中該複選框。這個屬性時1.3版本以後可用的。	true
selectOnCheck	boolean	若是設置爲True，點擊複選框將總會選擇行。若是設置爲False，選中行將不會選中該複選框。這個屬性在1.3版本後可用。	true
pagePosition	string	定義分頁工具條的位置，有效值是：'top','bottom','both'。這個屬性在1.3版本後可用。	bottom
pageNumber	number	當設置分頁的屬性時，初始化頁面數量。	1
pageSize	number	當設置分頁屬性時，初始化頁面大小。	10
pageList	array	當設置分頁屬性時，初始化頁面大小選擇列表、	[10,20,30,40,50]
queryParams	object	當請求遠程數據時，附帶發送額外的參數。代碼示例： 1 $('#dg').datagrid({ 2 queryParams: { 3 name: 'easyui', 4 subject: 'datagrid' 5 } 6 });	{}
sortName	string	定義哪些列能夠被排序。	null
sortOrder	string	定義列的排序方式，只能是升序「asc」或降序「desc」。	asc
remoteSort	boolean	定義是否接受來自遠程服務器的排序數據。	true
showHeader	boolean	定義是否顯示行的頁眉。	true
showFooter	boolean	定義是否顯示行的頁腳。	false
scrollbarSize	number	滾動條的款(當是垂直滾動條時) 或者高(當是水平滾動條的時候)	18
rowStyler	function	返回例如 'background:red' 同樣的風格樣式，這個方法帶兩個參數： rowIndex: 行的下標索引，從0開始 rowData: 符合記錄數的行代碼示例： 1 $('#dg').datagrid({ 2 rowStyler: function(index,row){ 3 if (row.listprice>80){ 4 return 'background-color:#6293BB;color:#fff;'; 5 } 6 } 7 });
loader	function	定義如何從遠程服務器加載數據，返回「false」能夠終止這個請求。這個函數須要如下參數： param: 向遠程服務器傳遞的參數對象。 success(data): 這個回調函數會在檢索數據成功後調用。 error(): 這個函數會在檢索數據失敗時調用。	json loader
loadFilter	function	顯示返回過濾後的數據。這個函數帶一個參數 'data'，它表示原始數據。你能夠將原始數據源更改成標準的數據格式。這個函數必須返回一個包含「total」和「rows」屬性的標準數據對象。代碼示例： 1 // 從 ASP.NET Web Service Json 輸出中刪除「d」對象 2 $('#dg').datagrid({ 3 loadFilter: function(data){ 4 if (data.d){ 5 return data.d; 6 } else { 7 return data; 8 } 9 } 10 });
editors	object	定義編輯行時的編輯器。	predefined editors
view	object	定義DataGrid的View視圖。	default view

[列屬性]

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

代碼示例：

 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」則顯示一個複選框，該複選框有固定的寬度。	undefined
formatter	function	單元格格式化的函數，帶有三個參數： value: 字段值 rowData: 行數據記錄 rowIndex: 行下標代碼示例： 1 $('#dg').datagrid({ 2 columns:[[ 3 {field:'userId',title:'User', width:80, 4 formatter: function(value,row,index){ 5 if (row.user){ 6 return row.user.name; 7 } else { 8 return value; 9 } 10 } 11 } 12 ]] 13 });	undefined
styler	function	單元格樣式函數，返回例如 'background:red' 同樣的用戶自定義的樣式字符串。這個函數帶有三個參數： value: 字段值 rowData: 行數據記錄 rowIndex: 行下標代碼示例： 1 $('#dg').datagrid({ 2 columns:[[ 3 {field:'listprice',title:'List Price', width:80, align:'right', 4 styler: function(value,row,index){ 5 if (value < 20){ 6 return 'background-color:#ffee00;color:red;'; 7 } 8 } 9 } 10 ]] 11 });	undefined
sorter	function	用來作局部排序的自定義字段的排序功能，帶有兩個參數： a: 第一個字段值 b: 第二個字段值代碼示例： 1 $('#dg').datagrid({ 2 remoteSort: false, 3 columns: [[ 4 {field:'date',title:'Date',width:80,sortable:true,align:'center', 5 sorter:function(a,b){ 6 a = a.split('/'); 7 b = b.split('/'); 8 if (a[2] == b[2]){ 9 if (a[0] == b[0]){ 10 return (a[1]>b[1]?1:-1); 11 } else { 12 return (a[0]>b[0]?1:-1); 13 } 14 } else { 15 return (a[2]>b[2]?1:-1); 16 } 17 } 18 } 19 ]] 20 });	undefined
editor	string,object	顯示編輯類型，當字符串指明瞭編輯類型，對象包含兩個屬性： type: string，編輯的類型，能夠是的值：text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree. options: object, 對應於編輯類型的編輯器選項。	undefined

Editor

重寫默認值 $.fn.datagrid.defaults.editors.

每一個 editor 編輯器都有如下行爲：

名稱	參數	描述
init	container, options	初始化 Editor 編輯器，並返回目標對象。
destroy	target	若是有必要則摧毀 Editor 編輯器。
getValue	target	從 Editor 編輯器獲取數據值。
setValue	target , value	設置 Editor 編輯器的數據值。
resize	target , width	若是須要則調整 Editor 編輯器。

例如，在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.

該視圖是一個對象，它會告訴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	視圖Render前觸發。
onAfterRender	target	視圖在Render後觸發。

[事件]

這個時間繼承自 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	當用戶雙擊單元格時觸發。代碼示例： 1 // 當雙擊一個單元格時，賦予Editor編輯器焦點，以開始編輯 2 $('#dg').datagrid({ 3 onDblClickCell: function(index,field,value){ 4 $(this).datagrid('beginEdit', index); 5 var ed = $(this).datagrid('getEditor', {index:index,field:field}); 6 $(ed.target).focus(); 7 } 8 });
onSortColumn	sort, order	當用戶排序一列時觸發，這些參數包括： sort: 排序的列的字段名稱 order: 排序列的順序
onResizeColumn	field, width	當用戶調整列大小時觸發。
onSelect	rowIndex, rowData	當用戶選擇一行時觸發，這些參數包括： rowIndex: 選擇行的索引，從0開始 rowData: 對應着所選擇的行記錄
onUnselect	rowIndex, rowData	當用戶取消選擇行時觸發，這些參數包括： rowIndex: 取消選擇的行下標，從0開始 rowData: 對應的取消選擇的行記錄。
onSelectAll	rows	當用戶選擇全部行時觸發。
onUnselectAll	rows	當用戶取消選中全部行時觸發。
onCheck	rowIndex,rowData	當用戶勾選一行時觸發，這些參數包括： rowIndex: 勾選的行下標，從0開始 rowData: 對應着勾選的行記錄這個事件在1.3版本後有效。
onUncheck	rowIndex,rowData	當用戶取消勾選一行時觸發，這些參數包括： rowIndex: 取消選中的行下標，從0開始 rowData: 取消選中的行記錄這個事件在1.3版本後生效
onCheckAll	rows	當用戶勾選全部行時觸發，這個事件在1.3版本後有效。
onUncheckAll	rows	當用戶取消勾選全部行時觸發，這個事件在1.3版本後生效
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	返回paper頁面對象。
getPanel	none	返回panel面板對象、
getColumnFields	frozen	返回列字段。若是凍結設置爲true，則凍結列字段返回。代碼示例： 1 var opts = $('#dg').datagrid('getColumnFields'); // 獲取非凍結列 2 var opts = $('#dg').datagrid('getColumnFields', true); // 獲取凍結列
getColumnOption	field	返回指定列的選項option設置。
resize	param	作調整，作佈局。
load	param	加載並顯示在第一頁的行，若是‘param’指定了，那麼它便會隨着QueryParams屬性取代。一般經過傳遞一個參數作一個查詢，這個方法能夠成爲從服務器加載新數據。 1 $('#dg').datagrid('load',{ 2 code: '01', 3 name: 'name01' 4 });
reload	param	從新加載行，和「load」方法同樣，可是停留在當前頁面。
reloadFooter	footer	從新加載頁腳行，代碼示例： 1 // update footer row values and then refresh 2 var rows = $('#dg').datagrid('getFooterRows'); 3 rows[0]['name'] = 'new name'; 4 rows[0]['salary'] = 60000; 5 $('#dg').datagrid('reloadFooter'); 6 7 // update footer rows with new data 8 $('#dg').datagrid('reloadFooter',[ 9 {name: 'name1', salary: 60000}, 10 {name: 'name2', salary: 65000} 11 ]);
loading	none	顯示加載狀態。
loaded	none	隱藏加載狀態。
fitColumns	none	使列自動展開/收縮以適應網格的寬度。
fixColumnSize	field	固定列的大下，若是‘field’參數沒有被分配，則全部列大小都將是固定的。代碼示例： 1 $('#dg').datagrid('fixColumnSize', 'name'); // 固定‘name’列的大小 2 $('#dg').datagrid('fixColumnSize'); // 固定全部列大小
fixRowHeight	index	固定指定的行高，若是「index」參數沒有分配，則全部行高都將是固定的。
autoSizeColumn	field	調整列寬度以適應其內容，這個方法在1.3版本以後可用。
loadData	data	加載本地數據，舊的行會被刪除。
getData	none	返回加載的數據。
getRows	none	返回當前頁的行。
getFooterRows	none	返回頁腳行。
getRowIndex	row	返回指定行的索引，row行參數能夠是一個行記錄或一個id字段值。
getChecked	none	返回複選框被選中的全部行，這個方法在1.3版本後可用。
getSelected	none	返回第一個選定行的記錄或null。
getSelections	none	返回全部選定的行，當沒有選中記錄的時候，將返回一個空數組。
clearSelections	none	清除全部的選擇。
selectAll	none	選擇當前頁面全部的行。
unselectAll	none	取消選擇當前頁面的全部行。
selectRow	index	選擇一行，行下標從0開始。
selectRecord	idValue	經過id值參數選中一行。
unselectRow	index	取消選中行。
checkAll	none	選中當前頁面全部行，這個方法從1.3版本以後可用。
uncheckAll	none	取消選中當前頁全部行，這個方法從1.3版本以後可用。
checkRow	index	選中一行，行下標從0開始，這個方法從1.3版本以後可用。
uncheckRow	index	取消選中一行，行下標從0開始，該方法從1.3版本以後可用。
beginEdit	index	開始編輯行。
endEdit	index	結束編輯行。
cancelEdit	index	取消編輯行
getEditors	index	獲取指定的行編輯器，每一個編輯器具備如下屬性： actions: 該編輯器能夠作的action動做，和編輯器定義同樣。 target: 目標編輯器的jQuery對象。 field: 字段名稱。 type: 編輯器類型，例如'text','combobox','datebox', 等.
getEditor	options	獲取指定的編輯器，該選項包含兩個屬性： index: 行下標索引 field: 字段名稱代碼示例： 1 // 獲取 DateBox 編輯器，而且更改它的值 2 var ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'}); 3 $(ed.target).datebox('setValue', '5/4/2012');
refreshRow	index	刷新行。
validateRow	index	驗證指定的行，返回「true」時有效。
updateRow	param	更新指定的行，該參數包含如下屬性： index: 要更新的行下標索引。 row: 新行的數據。代碼示例： 1 $('#dg').datagrid('updateRow',{ 2 index: 2, 3 row: { 4 name: 'new name', 5 note: 'new note message' 6 } 7 });
appendRow	row	拼接一個新行，這個新行將會被追加在最後的位置： 1 $('#dg').datagrid('appendRow',{ 2 name: 'new name', 3 age: 30, 4 note: 'some messages' 5 });
insertRow	param	插入一個新行，該參數包含如下屬性： index: 要插入新行的下標索引位置，若是沒有指定，則在後面拼接新增。 row: 要新增的行數據，代碼示例以下： 1 // 在第二行插入新行 2 $('#dg').datagrid('insertRow',{ 3 index: 1, // index start with 0 4 row: { 5 name: 'new name', 6 age: 30, 7 note: 'some messages' 8 } 9 });
deleteRow	index	刪除一行。
getChanges	type	獲取自從上次提交後的產生更改的行。這個類型參數指明哪些類型更改了行，可能的值以下：inserted,deleted,updated,等. 當類型參數沒有指定時，返回全部更改的行。
acceptChanges	none	提交全部的更改，從它被加載或者上次 acceptChanges 被調用。
rejectChanges	none	回滾自其建立後全部更改的數據，或者從最近一次 acceptChanges 被調用。
mergeCells	options	合併某個列爲一個列，這個選項包含如下屬性： index: 行下標 field: 字段名稱 rowspan: 要合併的行數 colspan: 要合併的列數
showColumn	field	顯示指定的列。
hideColumn	field	隱藏指定的列。