最近在學習jQuery EasyUI，發現中文的文檔好少，部分文檔不錯但它是鳥語的，為了大家也為了自己學習吧，漢化做一下筆記。
有沒有說清楚的，或者翻譯不正確的地方還請大家諒解指出。。
由於工作時間原因，每天翻譯一點，最后會整理出一套幫助文檔發布給大家，一起期待哈。。
還有。。。贊一下了哈~打字很累的。。(*^_^*)
DataGrid
繼承自 $.fn.panel.defaults，覆蓋默認值 $.fn.datagrid.defaults.
DataGrid控件顯示數據以表格的形式提供了豐富的選擇，支持排序，組和編輯數據。
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>標簽定義。
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”，當用戶准確點擊復選框時，選中/取消選中 該復選框。 |
true |
| selectOnCheck | boolean | 如果設置為True，點擊復選框將總會選擇行。 如果設置為False，選中行將不會選中該復選框。 |
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”可以終止這個請求。 這個函數需要以下參數： |
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 | 插入一個新行，該參數包含以下屬性： 代碼示例如下： 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 | 隱藏指定的列。 |
[原創漢化，歡迎轉載學習，請注明出處：]
Ｑ空間：http://778078163.qzone.qq.com
博客園：http://www.cnblogs.com/LonelyShadow