EasyUI_Datagrid學習總結
2016年7月25日星期一
一、簡介
Easyui中的datagrid從總的作用上講，就是在列表上顯示數據，類似於table，但是在table的基礎上，此控件更加方便、快捷的實現想要的功能，且能在此控件屬性中有分頁等控件，也就更好的對數據進行處理等。
二．基本的屬性介紹
1.Columns : 列的配置對象。
基本的用法是:
[[{field:'productid',title:’id’,width:100,align:'center',halign:'center',sortable:true}]]
上面的一行代碼表示的是一列field表示這一列的數據顯示的名稱，也就是后台傳回來數據的某一項屬性：如id、name等等屬性。title則表示這列的標題，相當於table中的<th>標簽。在datagrid中列類似的屬性有很多；下面說一些，我認為常用的屬性:（更多的查看api）
title：（String）表示標題文本
field:（String）列字段名稱
width：（number）寬度，不寫將自動擴充以便適應內容
rowspan：（number）（合並行）。
colspan：（number）（合並列）。
align：(‘left’|’right’|’ center’)如何對其數據
halign: (‘left’|’right’|’ center’)如何對其標題（title）
sortable：（true|false）是否允許排序
order：(asc|desc)排序方式；如果寫上了，傳遞參數的時候后自動傳入到后台去。
checkbox：（true|false）true顯示復選框。該復選框列固定寬度
editor：{'type':'numberbox','options':{precision:1}},對列中將要改變的數據做類型限制，共有
text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree。
后面的'options'做為相對應的類型屬性。
formatter：function（value,row,index）{
//單元格formatter(格式化器)函數，帶3個參數：
if (row.user){
return row.user.name;
} else {
return value;
}
}
以上是列的屬性，還有相關的沒有寫完，可以查看api
2.toolbar: 頂部工具欄的DataGrid面板。
在<div>標簽上定義工具欄
$('#dg').datagrid({
toolbar: '#tb'
});
<div id="tb">
<a href="#"class="easyui-linkbutton"data-options="iconCls:'icon-edit',plain:true"/a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>
</div>
通過數組定義工具欄：
$('#dg').datagrid({
toolbar: [{
iconCls: 'icon-edit',
handler: function(){alert('編輯按鈕')}
},'-',{
iconCls: 'icon-help',
handler: function(){alert('幫助按鈕')}
}]
});
3.striped:是否顯示斑馬線（true||false）
4.method：請求方式（String）
5. idField：指明那個字段是標識字段（主鍵）（String）
6. url：遠程請求的地址
7. data：加載數據
8. loadMsg:加載數據顯示的提示信息。（String）
9. pagination：是否需要分頁（false||true）
10. rownumbers：每行是否顯示行號列(false||true)
11. singleSelect: 如果為true，則只允許選擇一行。
12. checkOnSelect:當為true，當選中行時。復選框也被選中。
13. selectOnCheck：當為true，當選中復選框時。行也被選中
14.pagePosition:(‘top’||‘bottom’||‘both’)//分頁控件位置
15. pageNumber:(number)表示初始化。
16. pageSize:(number)//初始化頁面大小
17. pageList：(array[number])//[10,20,30,40,50]
18. queryParams:object//傳遞參數
19. multiSort：（false||true）//是否允許多列排序
注：還有其他一些屬性
三、事件(事件繼承自panel(面板)，以下是DataGrid新增的事件。)
| 事件名 |
參數 |
描述 |
| onLoadSuccess |
data |
在數據加載成功的時候觸發。 |
| onLoadError |
none |
在載入遠程數據產生錯誤的時候觸發。 |
| onBeforeLoad |
param |
在載入請求數據數據之前觸發，如果返回false可終止載入數據操作。 |
| onClickRow |
index, row |
在用戶點擊一行的時候觸發，參數包括： |
| onDblClickRow |
index, row |
在用戶雙擊一行的時候觸發，參數包括： |
| onClickCell |
index, field, value |
在用戶點擊一個單元格的時候觸發。 |
| onDblClickCell |
index, field, value |
在用戶雙擊一個單元格的時候觸發。 代碼示例： // 在雙擊一個單元格的時候開始編輯並生成編輯器，然后定位到編輯器的輸入框上 $('#dg').datagrid({ onDblClickCell: function(index,field,value){ $(this).datagrid('beginEdit', index); var ed = $(this).datagrid('getEditor', {index:index,field:field}); $(ed.target).focus(); } }); |
| onBeforeSortColumn |
sort, order |
在用戶排序一個列之前觸發，返回false可以取消排序。（該事件自1.3.6版開始可用） |
| onSortColumn |
sort, order |
在用戶排序一列的時候觸發，參數包括： |
| onResizeColumn |
field, width |
在用戶調整列大小的時候觸發。 |
| onBeforeSelect |
index, row |
在用戶選擇一行之前觸發，返回false則取消該動作。（該事件自1.4.1版開始可用） |
| onSelect |
index, row |
在用戶選擇一行的時候觸發，參數包括： |
| onBeforeUnselect |
index, row |
在用戶取消選擇一行之前觸發，返回false則取消該動作。（該事件自1.4.1版開始可用） |
| onUnselect |
index, row |
在用戶取消選擇一行的時候觸發，參數包括： |
| onSelectAll |
rows |
在用戶選擇所有行的時候觸發。 |
| onUnselectAll |
rows |
在用戶取消選擇所有行的時候觸發。 |
| onBeforeCheck |
index, row |
在用戶校驗一行之前觸發，返回false則取消該動作。（該事件自1.4.1版開始可用） |
| onCheck |
index, row |
在用戶勾選一行的時候觸發，參數包括： |
| onBeforeUncheck |
index, row |
在用戶取消校驗一行之前觸發，返回false則取消該動作。（該事件自1.4.1版開始可用） |
| onUncheck |
index, row |
在用戶取消勾選一行的時候觸發，參數包括： |
| onCheckAll |
rows |
在用戶勾選所有行的時候觸發。（該事件自1.3版開始可用） |
| onUncheckAll |
rows |
在用戶取消勾選所有行的時候觸發。（該事件自1.3版開始可用） |
| onBeforeEdit |
index, row |
在用戶開始編輯一行的時候觸發，參數包括： |
| onBeginEdit |
index, row |
在一行進入編輯模式的時候觸發。（該事件自1.3.6版開始可用） |
| onEndEdit |
index, row, changes |
在完成編輯但編輯器還沒有銷毀之前觸發。（該事件自1.3.6版開始可用） |
| onAfterEdit |
index, row, changes |
在用戶完成編輯一行的時候觸發，參數包括： |
| onCancelEdit |
index,row |
在用戶取消編輯一行的時候觸發，參數包括： |
| onHeaderContextMenu |
e, field |
在鼠標右擊DataGrid表格頭的時候觸發。 |
| onRowContextMenu |
e, index, row |
在鼠標右擊一行記錄的時候觸發。 |
四、方法：
| 方法名 |
參數 |
說明 |
| options |
none |
var opts = $('#dg').datagrid(' options '); |
| getPager |
none |
var opts = $('#dg').datagrid(' getPager '); 或得此對象就可以對分頁進行處理。具體使用可以查看pagination控件 |
| getPanel |
none |
同上的使用方法，獲得panel對象 |
| getColumnFields |
frozen |
得到列的字段 $('#dg').datagrid('getColumnFields');//獲取解凍列 $('#dg').datagrid('getColumnFields',true); // 獲取凍結列 |
| getColumnOption |
field |
返回指定列的屬性，參數為相應列的字段 |
| resize |
param |
做調整和布局 |
| load |
param |
加載數據，param有值的話會替代屬性中queryparam |
| reload |
param |
重載，使用方法同上。重載后再當前頁 |
| reloadFooter |
footer |
重載頁腳行。 |
| loading |
none |
顯示載入狀態。 |
| loaded |
none |
隱藏載入狀態。 |
| fitColumns |
none |
使列自動展開/收縮到合適的DataGrid寬度。 |
| fixColumnSize |
field |
固定列大小。如果'field'參數未配置，所有列大小將都是固定的。 $('#dg').datagrid('fixColumnSize', 'name');// 固定'name'列大小 $('#dg').datagrid('fixColumnSize'); // 固定所有列大小 |
| fixRowHeight |
index |
固定指定列高度。如果'index'參數未配置，所有行高度都是固定的。 |
| freezeRow |
index |
凍結指定行，當DataGrid表格向下滾動的時候始終保持被凍結的行顯示在頂部。（該方法自1.3.2版開始可用） |
| autoSizeColumn |
field |
自動調整列寬度以適應內容。（該方法自1.3版開始可用） |
| loadData |
data |
加載本地數據，舊的行將被移除。 |
| getData |
none |
返回加載完畢后的數據。 |
| getRows |
none |
返回當前頁的所有行。 |
| getFooterRows |
none |
返回頁腳行。 |
| getRowIndex |
row |
返回指定行的索引號，該行的參數可以是一行記錄或一個ID字段值。 |
| getChecked |
none |
在復選框唄選中的時候返回所有行。（該方法自1.3版開始可用） |
| getSelected |
none |
返回第一個被選中的行或如果沒有選中的行則返回null。 |
| getSelections |
none |
返回所有被選中的行，當沒有記錄被選中的時候將返回一個空數組。 |
| clearSelections |
none |
清除所有選擇的行。 |
| clearChecked |
none |
清除所有勾選的行。（該方法自1.3.2版開始可用） |
| scrollTo |
index |
滾動到指定的行。（該方法自1.3.3版開始可用） |
| highlightRow |
index |
高亮一行。（該方法自1.3.3版開始可用） |
| 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 |
獲取指定行的編輯器。每個編輯器都有以下屬性： |
| getEditor |
options |
獲取指定編輯器，options包含2個屬性： 代碼示例： // 獲取日期輸入框編輯器並更改它的值 var ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'}); $(ed.target).datebox('setValue', '5/4/2012'); |
| refreshRow |
index |
刷新行。 |
| validateRow |
index |
驗證指定的行，當驗證有效的時候返回true。 |
| updateRow |
param |
更新指定行，參數包含下列屬性： 代碼示例： $('#dg').datagrid('updateRow',{ index: 2, row: { name: '新名稱', note: '新消息' } }); |
| appendRow |
row |
追加一個新行。新行將被添加到最后的位置。 $('#dg').datagrid('appendRow',{ name: '新名稱', age: 30, note: '新消息' }); |
| insertRow |
param |
插入一個新行，參數包括一下屬性： index: 1, // 索引從0開始 row: { name: '新名稱', age: 30, note: '新消息' } });//當添加成功時，用這種方式。就不需要再去后台請求刷新了。 如果排序的話就就不太合適。 |
| deleteRow |
index |
刪除行。 |
| getChanges |
type |
從上一次的提交獲取改變的所有行。類型參數指明用哪些類型改變的行，可以使用的值有：inserted,deleted,updated等。當類型參數未配置的時候返回所有改變的行。 |
| acceptChanges |
none |
提交所有從加載或者上一次調用acceptChanges函數后更改的數據。 |
| rejectChanges |
none |
回滾所有從創建或者上一次調用acceptChanges函數后更改的數據。 |
| mergeCells |
options |
合並單元格，options包含以下屬性： |
| showColumn |
field |
顯示指定的列。 |
| hideColumn |
field |
隱藏指定的列。 |
| sort |
param |
排序datagrid表格。（該方法自1.3.6版開始可用） 代碼示例： $('#dg').datagrid('sort', 'itemid'); // 排序一個列 $('#dg').datagrid('sort', { // 指定了排序順序的列 sortName: 'productid', sortOrder: 'desc' }); |