碼上歡樂
相關內容    簡體    繁體

mini.DataGrid使用說明

本文轉載自   查看原文   2018-10-12 13:10   9757    MiniUI/ MiniUI-DataGrid

mini.DataGrid
表格。實現分頁加載、自定義列、單元格渲染、行編輯器、鎖定列、過濾行、匯總行等功能。
Extend
    mini.Panel
Usage

<div id="datagrid1" class="mini-datagrid" style="width:700px;height:250px;" 
    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

Base Example Pagination Filter Row FixedColumns Data Summary
CRUD： Row Edit EditForm Popup EditForm
Master-Detail： Detail Form Detail Grid Detail Tabs Inline Form Inline Grid Inline Tabs Popup Form

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 數字格式化。如：
  • 小數點和千分位：format="n"
  • 貨幣格式：format="c"。
  • 百分比格式：format="p"。
  • 自定義格式：format="¥#,0.00"。
  
vtype String 驗證規則，如required,email,url等。具體參考這里。 false
summaryType count|min|max|sum|avg 匯總計算類型。  
summaryRenderer Function 匯總單元格渲染函數。  
autoEscape false 是否自動轉義Html。  
decimalPlaces Number 保留的小數位數，默認2位。  


來自：http://miniui.com/docs/api/index.html#ui=datagrid


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Mini學習之mini.DataGrid使用說明 Windows下LimeSDR Mini使用說明 Ubuntu下LimeSDR Mini使用說明 1-移遠GSM/GPRS M26 模塊 Mini板 開發板(使用說明) 1.0-Air302(NB-IOT)-硬件使用說明,下載和運行第一個lua程序(Mini板) Shadows 使用說明 htmlcleaner 使用說明 VRTK使用說明 jgit使用說明 Podfile使用說明
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM