jquery easyui DataGrid 数据表格 属性
擴展自?$.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'?的樣式，該函數需要兩個參數： | ? |
| 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 | 單元格的格式化函數，需要三個參數：? | undefined |
| styler | function | 單元格的樣式函數，返回樣式字符串來自定義此單元格的樣式，例如?'background:red'?。此函數需要三個參數： | undefined |
| sorter | function | 自定義字段的排序函數，需要兩個參數： | undefined |
| editor | string,object | 指編輯類型。當是?string?時指編輯類型，當?object?時包含兩個特性：? ?text、textarea、checkbox、numberbox、validatebox、datebox、combobox、combotree。 | 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 | 當數據加載時調用。 |
| 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 | 當用戶點擊一行時觸發，參數包括：? |
| onDblClickRow | rowIndex, rowData | 當用戶雙擊一行時觸發，參數包括：? |
| onClickCell | rowIndex, field, value | 當用戶單擊一個單元格時觸發。 |
| onDblClickCell | rowIndex, field, value | 當用戶雙擊一個單元格時觸發。 |
| onSortColumn | sort, order | 當用戶對一列進行排序時觸發，參數包括：? |
| onResizeColumn | field, width | 當用戶調整列的尺寸時觸發。 |
| onSelect | rowIndex, rowData | 當用戶選中一行時觸發，參數包括：? |
| onUnselect | rowIndex, rowData | 當用戶取消選擇一行時觸發，參數包括：? |
| onSelectAll | rows | 當用戶選中全部行時觸發。 |
| onUnselectAll | rows | 當用戶取消選中全部行時觸發。 |
| onBeforeEdit | rowIndex, rowData | 當用戶開始編輯一行時觸發，參數包括：? |
| onAfterEdit | rowIndex, rowData, changes | 當用戶完成編輯一行時觸發，參數包括：? |
| onCancelEdit | rowIndex, 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 | 獲取指定行的編輯器們。每個編輯器有下列特性： |
| getEditor | options | 獲取指定的編輯器，?options?參數包含兩個特性：? |
| refreshRow | index | 刷新一行。 |
| validateRow | index | 驗證指定的行，有效時返回?true。 |
| updateRow | param | 更新指定的行，?param?參數包含下列特性： |
| appendRow | row | 追加一個新行。 |
| insertRow | param | 插入一個新行，?param?參數包括下列特性： |
| deleteRow | index | 刪除一行。 |
| getChanges | type | 獲取最后一次提交以來更改的行，type?參數表示更改的行的類型，可能的值是：inserted、deleted、updated，等等。 當?type?參數沒有分配時，返回所有改變的行。 |
| acceptChanges | none | 提交自從被加載以來或最后一次調用acceptChanges以來所有更改的數據。 |
| rejectChanges | none | 回滾自從創建以來或最后一次調用acceptChanges以來所有更改的數據。 |
| mergeCells | options | 把一些單元格合并為一個單元格，options?參數包括下列特性： |
| showColumn | field | 顯示指定的列。 |
| hideColumn | field | 隱藏指定的列。 |
總結
以上是生活随笔為你收集整理的jquery easyui DataGrid 数据表格 属性的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python可以下载百度文库_百度文库随
- 下一篇： 2017将转行进行到底