參考：http://miniui.com/docs/api/index.html#ui=datagrid
mini.DataGrid
表格。實現分頁加載、自定義列、單元格渲染、行編輯器、鎖定列、過濾行、匯總行等功能。
Extend
mini.Panel
Usage
<
div
id="datagrid1" class="mini-datagrid"
url="../data/AjaxService.aspx?method=SearchEmployees"
>
<
div
property="columns">
<
div
type="indexcolumn"></
div
>
<
div
field="loginname" width="120" headerAlign="center" allowSort="true">員工帳號</
div
>
<
div
field="name" width="120" headerAlign="center" allowSort="true">姓名</
div
>
<
div
header="工作信息">
<
div
property="columns">
<
div
field="dept_name" width="120">所屬部門</
div
>
<
div
field="position_name" width="100">職位</
div
>
<
div
field="salary" width="100" allowSort="true">薪資</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
|
Screenshots
Examples
Properties
| Name | Type | Description | Default | Set? | Get? | Tag? |
|---|---|---|---|---|---|---|
| data | Array | 數據對象 | √ | √ | √ | |
| columns | Array | 列集合對象 | √ | √ | √ | |
| url | String | 數據加載地址 | √ | √ | √ | |
| ajaxType | String | ajax類型：get/post。 | √ | √ | √ | |
| ajaxOptions | Object | ajax配置對象。如：ajaxOptions="{type:'post', async: true, data: {a:1, b: true}, dataType: 'text', contentType: 'application/x-www-form-urlencoded;charset=utf-8'}"。 | √ | √ | √ | |
| idField | String | 行數據唯一字段。 | √ | √ | √ | |
| virtualScroll | Boolean | 是否虛擬滾動。當顯示的數據超過500以上時，請設置此屬性，能極大提升性能。 | false | √ | √ | √ |
| virtualColumns | Boolean | 是否虛擬滾動列，在列較多時有用，提高性能。 | false | √ | √ | √ |
| pageIndex | Number | 頁碼 | 0 | √ | √ | √ |
| pageSize | Number | 每頁多少條 | 10 | √ | √ | √ |
| sizeList | Array | 頁尺寸集合，比如[5,10,100] | [5,10,20,50,100] | √ | √ | √ |
| sortField | String | 排序字段 | √ | √ | √ | |
| sortOrder | asc,desc | 排序方向 | √ | √ | √ | |
| sortMode | client | 排序模式。設置為"client"后則時客戶端排序 | √ | √ | √ | |
| totalCount | Number | 總記錄數 | √ | √ | √ | |
| defaultColumnWidth | Number | 默認列寬 | 100 | √ | √ | √ |
| showColumns | Boolean | 顯示表頭 | true | √ | √ | √ |
| showPager | Boolean | 顯示分頁 | true | √ | √ | √ |
| showHGridLines | Boolean | 顯示橫向表格線條 | true | √ | √ | √ |
| showVGridLines | Boolean | 顯示豎向表格線條 | true | √ | √ | √ |
| showFilterRow | Boolean | 顯示過濾行 | false | √ | √ | √ |
| showSummaryRow | Boolean | 顯示匯總行 | false | √ | √ | √ |
| showGroupSummary | Boolean | 是否顯示分組匯總 | false | √ | √ | √ |
| summaryPosition | String | 分組匯總位置。top|bottom。 | bottom | √ | √ | √ |
| allowEmptyContextMenu | Boolean | 是否右鍵點擊空白處也顯示右鍵菜單 | false | √ | √ | √ |
| showCellTip | Boolean | 允許單元格提示框（當寬度變小有省略號時） | true | √ | √ | √ |
| allowCellWrap | Boolean | 允許單元格換行 | false | √ | √ | √ |
| allowHeaderWrap | Boolean | 允許表頭文本換行 | false | √ | √ | √ |
| allowSortColumn | Boolean | 允許列排序 | true | √ | √ | √ |
| allowMoveColumn | Boolean | 允許移動列 | true | √ | √ | √ |
| allowResizeColumn | Boolean | 允許拖拽調節列寬度 | true | √ | √ | √ |
| enableHotTrack | Boolean | 移動到行時高亮顯示 | true | √ | √ | √ |
| allowCellSelect | Boolean | 允許選擇單元格 | false | √ | √ | √ |
| allowCellEdit | Boolean | 允許單元格編輯。此模式下，行編輯API將失效。 | false | √ | √ | √ |
| editNextOnEnterKey | Boolean | 按回車鍵進入下一個單元格編輯。 | false | √ | √ | √ |
| editNextRowCell | Boolean | 按回車鍵進入下一行同列的單元格編輯。 | false | √ | √ | √ |
| cellEditAction | String | 激發單元格編輯的事件，默認是cellclick，也可以配置成celldblclick。 | cellclick | √ | √ | √ |
| allowCellValid | Boolean | 是否自動驗證，當編輯單元格時。 | false | √ | √ | √ |
| allowRowSelect | Boolean | 允許選擇行 | true | √ | √ | √ |
| onlyCheckSelection | Boolean | 是否只通過checkcolumn列選擇 | false | √ | √ | √ |
| multiSelect | Boolean | 允許多選行 | false | √ | √ | √ |
| allowUnselect | Boolean | 允許反選。設置true后，點擊任意單元格都會選中行，以及取消選中行。 | false | √ | √ | √ |
| allowAlternating | Boolean | 顯示斑馬紋 | false | √ | √ | √ |
| frozenStartColumn | Number | 鎖定開始列 | -1 | √ | √ | √ |
| frozenEndColumn | Number | 鎖定截至列 | -1 | √ | √ | √ |
| showPageIndex | Boolean | 顯示頁碼 | true | √ | √ | √ |
| showPageSize | Boolean | 顯示頁尺寸 | true | √ | √ | √ |
| showLoading | Boolean | 顯示Loading遮罩效果 | true | √ | √ | √ |
| allowResize | Boolean | 允許拖拽調節表格尺寸 | false | √ | √ | √ |
| selectOnLoad | Boolean | 加載完是否自動選中 | false | √ | √ | √ |
| collapseGroupOnLoad | Boolean | 加載完是否折疊分組 | false | √ | √ | √ |
| showEmptyText | Boolean | 數據為空時顯示提示文本 | false | √ | √ | √ |
| emptyText | String | 數據為空時的提示文本 | √ | √ | √ | |
| alwaysShowEmptyText | Boolean | 是否總是顯示空文本 | false | √ | √ | √ |
| pageIndexField | String | 分頁索引字段名 | "pageIndex" | √ | √ | √ |
| pageSizeField | String | 分頁條數字段名 | "pageSize" | √ | √ | √ |
| sortFieldField | String | 排序字段的字段名 | "sortField" | √ | √ | √ |
| sortOrderField | String | 排序方向字段名 | "sortOrder" | √ | √ | √ |
| totalField | String | 總記錄數字段名 | "total" | √ | √ | √ |
| dataField | String | 數據字段名 | "data" | √ | √ | √ |
| showPageInfo | Boolean | 顯示分頁文本信息 | true | √ | √ | √ |
| showReloadButton | Boolean | 顯示"刷新"分頁按鈕 | true | √ | √ | √ |
| autoHideRowDetail | Boolean | 展開詳細行時，自動隱藏其他詳細行 | true | √ | √ | √ |
| showModified | Boolean | 是否顯示修改的紅色小三角 | true | √ | √ | √ |
| showColumnsMenu | Boolean | 顯示列菜單。實現顯示、隱藏列。 | false | √ | √ | √ |
| showPagerButtonText | Boolean | 顯示分頁按鈕文本 | false | √ | √ | √ |
| showPagerButtonIcon | Boolean | 顯示分頁按鈕圖標 | true | √ | √ | √ |
| sizeText | String | 分頁控件分頁文字。 | "" | √ | √ | √ |
| pageSizeWidth | Number | 分頁控件pageSize選擇框的寬度。 | √ | √ | √ | |
| enableGroupOrder | Boolean | 分組時是否應用排序。 | true | √ | √ | √ |
| skipReadOnlyCell | Boolean | tab導航編輯時非編輯直接跳過。 | false | √ | √ | √ |
| showSortIcon | Boolean | 顯示可派序列的提示圖標。 | false | √ | √ | √ |
| sortDblClick | Boolean | 雙擊表頭列排序。 | false | √ | √ | √ |
| selectOnRightClick | Boolean | 是否允許右鍵點擊選擇。 | true | √ | √ | √ |
| navEditMode | Boolean | 導航編輯模式。true時，按tab/enter鍵在導航切換時進入單元格編輯。 | false | √ | √ | √ |
| autoLoad | Boolean | 是否自動加載數據。 | false | √ | √ | √ |
Methods
| Name | Parameter | Description | Return |
|---|---|---|---|
| load ( params, success, fail ) | params：Object。參數對象。 success：Function。成功回調函數。 fail：Function。失敗回調函數。 |
加載數據。 比如，grid.load({key: "普加"})。 后台接收如下信息： {
key: "普加", //自定義
pageIndex: 0,
pageSize: 10,
sortField: "",
sortOrder: "asc"
}
使用：String key = request. |
|
| reload ( ) | 重新加載數據。 | ||
| getLoadParams ( ) | 獲取查詢參數對象。 | Object。 | |
| gotoPage ( index, size ) | 跳轉頁碼。 | ||
| sortBy ( sortField, sortOrder ) | 排序字段 | ||
| clearSort ( ) | 取消排序。 | ||
| groupBy ( field, dir ) | 分組。比如：grid.groupBy("city", "desc") | ||
| getResultObject ( ) | 獲取加載的服務端數據對象。一般在onload事件中調用。 | Object | |
| loading ( ) | 顯示加載遮罩。 | ||
| unmask ( ) | 取消遮罩。 | ||
| frozenColumns ( start, end ) | 鎖定列。比如：grid.frozenColumns(0, 2) | ||
| unFrozenColumns ( ) | 取消鎖定列。 | ||
| clearGroup ( ) | 取消分組。 | ||
| collapseGroups ( ) | 折疊所有分組。 | ||
| expandGroups ( ) | 展開所有分組。 | ||
| mergeCells ( cells ) | 合並單元格。比如： var cells = [
{ rowIndex: 1, columnIndex: 0, rowSpan: 1, colSpan: 2 },
{ rowIndex: 3, columnIndex: 0, rowSpan: 4, colSpan: 3 }
];
grid.mergeCells(cells);
|
||
| mergeColumns ( columns ) | 自動合並相同值單元格。比如： grid.mergeColumns(["company"]);//company是某列的name |
||
| setCurrentCell ( cell ) | cell: [row, column] | 設置當前選中單元格。 | |
| getCurrentCell ( ) | 獲取當前選中單元格。 | ||
| isChanged ( ) | 是否已修改。 | Boolean | |
| getChanges ( state, onlyField ) | state: added|modified|removed。如傳遞null，則獲取增刪改數據。 onlyField：Boolean。傳遞true，modified的行數據將只返回修改的字段。 |
獲取增加、刪除、修改后的數據集合。row._state為added/modified/removed。 | |
| beginEditCell ( ) | 對當前選中單元格啟動編輯。 | ||
| cancelEdit ( ) | 取消所有行編輯。 | ||
| commitEditRow ( row ) | 提交指定行編輯。 | ||
| commitEdit ( ) | 提交所有行編輯。 | ||
| beginEditRow ( row ) | 啟動行編輯。 | ||
| cancelEditRow ( row ) | 取消指定行編輯。 | ||
| isEditing ( ) | 是否有行編輯。 | Boolean | |
| isEditingRow ( row ) | 指定行是否處於編輯狀態。 | Boolean | |
| getCellEditor ( column, row ) | 獲取指定列和行的編輯器控件對象。 | Control | |
| getEditorOwnerRow ( editor ) | 獲取編輯器屬於哪一行對象 | ||
| updateRow ( row, rowData ) | 更新行（JavaScript） | ||
| removeRow ( row, autoSelect ) | 刪除行（JavaScript）。autoSelect為true，則刪除記錄后，自動選擇下一條記錄。 | ||
| removeRows ( rows, autoSelect ) | 刪除多行（JavaScript）。autoSelect為true，則刪除記錄后，自動選擇下一條記錄。 | ||
| addRows ( rows, index ) | 增加多行（Javascript） | ||
| addRow ( row, index ) | 增加行（Javascript） | ||
| moveRow ( row, index ) | 移動行（Javascript） | ||
| moveUp ( Array ) | 上移 | ||
| moveDown ( Array ) | 下移 | ||
| clearRows ( ) | 清除所有行（Javascript） | ||
| accept ( ) | 清除所有行修改痕跡。 | ||
| acceptRecord ( row ) | 清除指定行修改痕跡。 | ||
| reject ( ) | 取消還原數據修改。 | ||
| rejectRecord ( row ) | 取消還原指定行修改。 | ||
| indexOf ( row ) | 獲取行索引號 | ||
| isSelected ( row ) | 是否選中行 | ||
| getSelecteds ( ) | 獲取所有選中的行 | ||
| getSelected ( ) | 獲取當前選中行 | ||
| setSelected ( row ) | 設置當前選中行 | ||
| select ( row, fireEvent ) | fireEvent: Boolean。是否激發選擇事件。 | 選中行 | |
| deselect ( row, fireEvent ) | fireEvent: Boolean。是否激發選擇事件。 | 取消選中行 | |
| selectAll ( fireEvent ) | fireEvent: Boolean。是否激發選擇事件。 | 選中所有行 | |
| deselectAll ( fireEvent ) | fireEvent: Boolean。是否激發選擇事件。 | 取消選中所有行 | |
| clearSelect ( fireEvent ) | fireEvent: Boolean。是否激發選擇事件。 | 取消選中所有行 | |
| selects ( rows, fireEvent ) | fireEvent: Boolean。是否激發選擇事件。 | 選中多行 | |
| deselects ( rows, fireEvent ) | fireEvent: Boolean。是否激發選擇事件。 | 取消選中多行 | |
| showAllRowDetail ( ) | 顯示所有行詳細 | ||
| hideAllRowDetail ( ) | 隱藏所有行詳細 | ||
| showRowDetail ( row ) | 顯示行詳細 | ||
| hideRowDetail ( row ) | 隱藏行詳細 | ||
| isShowRowDetail ( row ) | 是否顯示了行詳細 | ||
| getRowDetailCellEl ( row ) | 獲取行詳細DOM對象 | ||
| hideColumn ( column ) | 隱藏列 | ||
| showColumn ( column ) | 顯示列 | ||
| setColumnWidth ( column, Number ) | 設置列寬 | ||
| updateColumn ( column, Object ) | 更新列內容。例如：grid.updateColumn("name", {header: "姓名"}); | ||
| getRow ( index ) | 獲取行對象 | ||
| findRow ( Function ) | 通過查詢函數獲取行對象。如： var row = grid.findRow(function(row){
if(row.name == "張三") return true;
});
|
Object | |
| findRows ( Function ) | 通過查詢函數獲取行對象數組。如： var rows = grid.findRows(function(row){
if(row.age > 20) return true;
});
|
Array | |
| getColumn ( index/columnName ) | 獲取列對象 | ||
| getRowEl ( row, viewIndex ) | 獲取行DOM對象。viewIndex=1獲取鎖定行，viewIndex=2獲取內容行。 | ||
| getCellEl ( row, column ) | 獲取單元格DOM對象 | ||
| getHeaderCellEl (column ) | 獲取表頭單元格DOM對象 | ||
| addRowCls ( row, cls ) | 增加行樣式 | ||
| removeRowCls ( row, cls ) | 刪除行樣式 | ||
| getFilterCellEl ( column ) | 獲取過濾行單元格DOM對象 | ||
| getSummaryCellEl ( column ) | 獲取匯總行單元格DOM對象 | ||
| validate ( ) | 驗證表格所有單元格 | ||
| isValid ( ) | 是否驗證通過 | Boolean | |
| scrollIntoView ( row ) | 定位滾動條到行 | ||
| getBottomPager ( ) | 獲取分頁控件 | ||
| getColumnByEvent ( event ) | 根據事件對象獲取列 | ||
| getRowByEvent ( event ) | 根據事件對象獲取行 | ||
| getCellByEvent ( event ) | 根據事件對象獲取單元格。cell = [record, column ] | ||
| getBottomColumns ( ) | 獲取底部顯示的列數組 | ||
| getColumns ( ) | 獲取列集合 | ||
| getRowByUid ( uid ) | 根據uid獲取行對象 |
Events
| Name | EventObject | Description |
|---|---|---|
| columnschanged | 列改變時激發。如列顯示/隱藏、列寬調整、列增加/刪除等情況。 | |
| rowclick | {
sender: Object, //表格對象
record: Object //行對象
}
|
行點擊時發生 |
| rowdblclick | {
sender: Object, //表格對象
record: Object //行對象
}
|
行雙擊時發生 |
| rowmousedown | {
sender: Object, //表格對象
record: Object //行對象
}
|
行鼠標按下時發生 |
| cellclick | {
sender: Object, //表格對象
record: Object, //行對象
column: Object //列對象
}
|
單元格點擊時發生 |
| cellmousedown | {
sender: Object, //表格對象
record: Object, //行對象
column: Object //列對象
}
|
單元格鼠標按下時發生 |
| headercellclick | {
sender: Object, //表格對象
column: Object //列對象
}
|
表頭單元格點擊時發生 |
| headercellmousedown | {
sender: Object, //表格對象
column: Object //列對象
}
|
表頭單元格鼠標按下時發生 |
| headercellcontextmenu | {
sender: Object, //表格對象
column: Object //列對象
}
|
表頭單元格點擊右鍵時發生 |
| beforeload | {
sender: Object, //表格對象
data: Object //參數對象
cancel: Boolean
}
|
數據加載前發生 |
| preload | 數據加載，設置到Grid前發生 | |
| loaderror | {
sender: Object, //表格對象
xhr: Object, //ajax對象
errorMsg: String //錯誤信息
errorCode: int //錯誤碼
}
|
數據加載錯誤時發生 |
| load | {
sender: Object, //表格對象
xhr: Object, //ajax對象
data: Array //數據
}
|
數據加載成功時發生 |
| update | 表格渲染完畢事件 | |
| drawcell | {
sender: Object,
rowIndex: Number,
columnIndex: Number,
record: Object,
column: Object,
field: String,
value: String,
cellHtml: "",
rowCls: "",
cellCls: "",
rowStyle: "",
cellStyle: ""
}
|
繪制單元格時發生 |
| cellbeginedit | {
sender: Object,
rowIndex: Number,
record: Object,
column: Object,
field: String,
editor: Object,
value: String,
cancel: false
}
|
編輯開始前發生 |
| cellcommitedit | {
sender: Object,
rowIndex: Number,
record: Object,
column: Object,
field: String,
editor: Object,
oldValue: Object,
value: Object,
cancel: false
}
|
編輯值提交前發生 |
| cellendedit | {
sender: Object,
rowIndex: Number,
record: Object,
column: Object,
field: String,
editor: Object,
value: String
}
|
編輯結束時發生 |
| celleditenter | {
sender: Object,
record: Object
}
|
編輯器按回車時發生 |
| selectionchanged | 行選擇改變時發生 | |
| beforeselect | {
sender: Object,
record: Object,
cancel: Boolean
}
|
行選中前發生 |
| beforedeselect | {
sender: Object,
record: Object,
cancel: Boolean
}
|
行取消選中前發生 |
| select | {
sender: Object,
record: Object
}
|
行選中時發生 |
| deselect | {
sender: Object,
record: Object
}
|
行取消選中時發生 |
| cellvalidation | {
sender: Object,
record: Object,
column: Object,
field: String,
value: String,
isValid: Boolean, //是否驗證通過
errorText: "" //錯誤提示文本
}
|
單元格驗證時發生（一般在單元格編輯結束時） |
| drawsummarycell | {
sender: Object,
result: Object, //服務端返回的原始數據對象
records: Array, //行數組
column: Object,
field: String,
value: String,
cellHtml: "",
cellCls: "",
cellStyle: ""
}
|
繪制匯總單元格事件 |
| resize | 表格拖拽調節尺寸時發生 |
Columns
表格列配置集合：columns，是一個數組，如：[column, column, ...]。其中一個column的配置參數如下表：
| Name | Type | Description | Default |
|---|---|---|---|
| type | indexcolumn|checkcolumn|checkboxcolumn|comboboxcolumn|treeselectcolumn | 列類型。創建幾個特殊的列。 | |
| header | String | 表頭列文本 | |
| field | String | 單元格值字段 | |
| displayField | String | 單元格文本字段 | |
| sortField | String | 排序字段 | |
| name | String | 列標識名稱 | |
| width | Number | 列寬度 | |
| visible | Boolean | 是否顯示 | |
| hideable | Boolean | 是否在表頭菜單項顯示 | false |
| readOnly | Boolean | 是否只讀 | false |
| headerAlign | String | 表頭列文本位置。left/center/right。 | left |
| align | String | 單元格文本位置。left/center/right。 | left |
| headerCls | String | 表頭列樣式類。 | |
| cellCls | String | 單元格樣式類 | |
| headerStyle | String | 表頭列樣式 | |
| cellStyle | String | 單元格樣式 | |
| editor | Object | 單元格編輯器。 | |
| renderer | Function | 單元格繪制處理函數，同drawcell事件。 | |
| allowMove | Boolean | 是否可移動表頭列。 | true |
| allowResize | Boolean | 是否拖拽調節表頭列寬度。 | true |
| autoShowPopup | Boolean | 編輯時是否自動顯示下拉框。 | false |
| dataType | string|int|float|date|boolean|currency | 數據類型，為客戶端排序所用。 | string |
| currencyUnit | String | 貨幣單位。當dataType="currency"有用。如：￥432,432.00。 | |
| dateFormat | String | 日期格式化。如：yyyy-MM-dd HH:mm:ss。 | |
| numberFormat | String | 數字格式化。如：
|
|
| vtype | String | 驗證規則，如required,email,url等。具體參考這里。 | false |
| summaryType | count|min|max|sum|avg | 匯總計算類型。 | |
| summaryRenderer | Function | 匯總單元格渲染函數。 | |
| autoEscape | false | 是否自動轉義Html。 | |
| decimalPlaces | Number | 保留的小數位數，默認2位。 |