Datagrid(數據表)
依賴的組件
resizable
linkbutton
pagination
DataGrid Options對象的屬性
| 名稱(Name)
|
類型(Type)
|
描述(Description)
|
默認值(Default)
|
| Titile
|
string
|
Datagrid數據表的標題
|
null
|
| iconCls
|
string
|
一個樣式類提供作為數據表圖標的背景圖標
|
null
|
| border
|
boolean
|
是否顯示數據表邊框,true-顯示 false-不顯示
|
true
|
| width
|
number
|
設置Datagrid的寬度
|
auto
|
| height
|
number
|
設置Datagrid的高度
|
auto
|
| columns
|
array
|
配置Datagrid列屬性的Object對象
|
null
|
| frozenColumns
|
array
|
與columns屬性一樣，但是該屬性設置的列會被凍結在Datagrid的左邊
|
null
|
| striped
|
boolean
|
是否顯示斑馬線
|
false
|
| Method
|
string
|
遠程數據的獲取類型，可取值為post或get
|
post
|
| nowrap
|
boolean
|
是否把數據顯示在一行上，如果設置為false，當數據長度超過列長度時，超過的部分被截掉
|
true
|
| idField
|
string
|
表明哪個字段是一個標識字段
|
null
|
| url
|
string
|
從遠程地址請求數據的url
|
null
|
| loadMsg
|
string
|
當從遠程站點加載數據時顯示的提示消息
|
Processing, please wait …
|
| pagination
|
boolean
|
設置是否有分頁功能
|
false
|
| rownumbers
|
number
|
是否顯示行號列
|
false
|
| singleSelect
|
number
|
設置是否可只選一行
|
false
|
| fit
|
boolean
|
設置是否可以讓表格自動縮放以適應父容器
|
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
|
Columns屬性
| Name
|
Type
|
Description
|
Default
|
| title
|
字符串
|
列標題文字
|
undefined
|
| field
|
字符串
|
列字段名稱
|
undefined
|
| width
|
數字
|
列寬度
|
undefined
|
| rowspan
|
數字
|
該列占幾行單元格
|
undefined
|
| colspan
|
數字
|
該列占幾列單元格
|
undefined
|
| align
|
字符串
|
數據對其方式，可選值有left,right,center
|
undefined
|
| sortable
|
布爾
|
是否允許該列排序
|
undefined
|
| checkbox
|
布爾
|
是否顯示選擇框
|
undefined
|
| formatter
|
函數
|
包含三個參數：
value: 列字段對應的值 rowData: 行數據對象 rowIndex: 行索引 |
undefined
|
| editor
|
string,object
|
指示編輯類型，有兩個子屬性，type和options；type可選的編輯框有:text，textarea，checkbox，numberbox，validatebox，datebox，combobox，combotree；options指定一個對象，與編輯類型對應，數字框對應的options屬性中有precision,表示小數點位數
|
undefined
|
事件
| Name
|
Parameters
|
Description
|
| onLoadSuccess
|
none
|
遠程數據成功加載時觸發
|
| onLoadError
|
none
|
遠程數據加載發生錯誤時觸發
|
| onClickRow
|
rowIndex,rowData
|
用戶點擊一行時觸發，參數包括：
rowIndex:被點擊行的索引，索引從0開始 rowData:被點擊行對應的數據記錄 |
| onDblClickRow
|
rowIndex,rowData
|
用戶雙擊一行時觸發，參數同上
|
| onSortColumn
|
sort,order
|
用戶對一列進行排序時觸發，參數包括：
sort:被排序的類字段名稱 order:排序的命令，asc 或者 desc |
| onSelect
|
rowIndex,rowData
|
用戶選擇一行時觸發
|
| onUnselect
|
rowIndex,rowData
|
當用取消選擇一行時觸發
|
方法
| Name
|
Parameters
|
Description
|
| options
|
none
|
返回一個options對象
|
| resize
|
none
|
調整表格大小和布局
|
| reload
|
none
|
重新加載行
|
| fixColumnSize
|
none
|
固定列的大小
|
| loadData
|
param
|
加載本地數據，舊行將被刪除
|
| getSelected
|
none
|
返回被選中的第一行記錄或者null
|
| getSelections
|
none
|
返回所有被選中的行，當沒有一條記錄別選中時則返回一個空的數組對象
|
| clearSelections
|
none
|
取消所有選中
|
| selectRow
|
index
|
選擇一行，行索引從0開始
|
| selectRecord
|
idValue
|
通過行id值選擇一行
|
| unselectRow
|
index
|
取消選中某行
|
| beginEdit
|
index
|
開始編輯某行
|
| endEdit
|
index
|
結束編輯某行
|
| cancelEdit
|
index
|
取消編輯某行
|
| refreshRow
|
index
|
刷新一行的數據
|
| appendRow
|
row
|
添加新行
|
| deleteRow
|
index
|
刪除一行
|
| getChanges
|
type
|
自最后一次數據提交開始獲取被改變的行，類型參數指示的是行的改變類型，可能的值是：inserted,deleted,updated等，當類型參數沒有指定時將返回所有被改變的行
|
| acceptChanges
|
none
|
自數據被加載或者最后一次調用acceptChanges的時間開始，提交所有的數據變化
|
| rejectChanges
|
none
|
自所有數據被創建或者最后一次調用accepChanges方法開始回滾所有變化了的數據
|
注：示例中用到了分頁，Datagrid依賴pagination(分頁)組件，下面講解以下pagination組件的屬性和事件
Pagination屬性
| 屬性名
|
類型
|
描述
|
默認值
|
| total
|
數字
|
當分頁建立時設置記錄的總數量
|
1
|
| pageSize
|
數字
|
每一頁顯示的數量
|
10
|
| pageNumber
|
數字
|
當分頁建立時，顯示的頁數
|
1
|
| pageList
|
數組
|
用戶可以修改每一頁的大小，pageList屬性定義了多少種大小可以改變.
|
[10,20,30,50]
|
| loading
|
布爾
|
定義數據是否正在加載
|
false
|
| buttons
|
數組
|
定義自定義按鈕，每個按鈕包含兩個屬性：iconCls: 顯示背景圖像的CSS類
handler: 當一個按鈕被點擊時的處理函數 |
null
|
| showPageList
|
布爾
|
定義是否顯示頁面列表
|
true
|
| showRefresh
|
布爾
|
定義是否顯示刷新按鈕
|
true
|
| beforePageText
|
字符串
|
在輸入框組件前顯示的標簽
|
Page
|
| afterPageText
|
字符串
|
在輸入框組件后顯示的標簽
|
Of {pages}
|
| displayMsg
|
字符串
|
顯示一個頁面的信息。
|
Displaying {from} {to} of {total} items 注：{param}是固定的參數設置，不能修改
|
Pagination事件
| 事件名
|
參數
|
描述 |
| onSelectPage
|
pageNumber, pageSize
|
當用戶選擇一個新頁時觸發，回調函數包含兩個參數：pageNumber: 新頁面的頁數pageSize: 新頁面的大小 |
| onBeforeRefresh
|
ageNumber, pageSize
|
刷新按鈕被點擊之前觸發，如果返回false則取消刷新操作 |
| onRefresh
|
ageNumber, pageSize
|
刷新以后觸發 |
| onChangePageSize
|
ageSize
|
改變頁面大小時觸發
|
1.實例 (1)代碼 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>EasyUI Datagrid</title> <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <script type="text/javascript" src="../jquery-1.4.2.min.js"></script> <script type="text/javascript" src="../jquery.easyui.min.js"></script> <script> $(function(){ $('#test').datagrid({ title:'My Title', iconCls:'icon-save', width:800, height:450, nowrap: true, striped: true, url:'datagrid_data.json', sortName: 'code', sortOrder: 'desc', idField:'code', frozenColumns:[[ {field:'ck',checkbox:true}, {title:'code',field:'code',width:80,sortable:true} ]], columns:[[ {title:'Base Information',colspan:3}, {field:'opt',title:'Operation',width:100,align:'center' ,rowspan:2,formatter:function(value,rec){ return '<span style="color:red">Edit Delete</span>'; } }], [{field:'name',title:'Name',width:120}, {field:'addr',title:'Address',width:120,rowspan:2,sortable:true}, {field:'col4',title:'Col41',width:150,rowspan:2} ]], pagination:true, rownumbers:true, singleSelect:true, //事件調用的方式 onLoadSuccess: function (){alert('load data successfully!');} toolbar:[{ //設置工具條，該工具條中設置了三個功能按鈕 text:'Add', //標題為’Add’的工具條按鈕 iconCls:'icon-add',//工具條按鈕顯示的圖標 handler:function(){//工具條按鈕實現的功能函數 alert('add') } },{ text:'Cut', //標題為’Cut’的工具條按鈕 iconCls:'icon-cut', disabled:true, handler:function(){ alert('cut') } },'-',{ text:'Save', iconCls:'icon-save', handler:function(){ alert('save') } }] }); //獲取頁面分頁對象 var p = $('#test').datagrid('getPager'); if (p){ $(p).pagination({ //設置分頁功能欄 //分頁功能可以通過Pagination的事件調用后台分頁功能來實現 onBeforeRefresh:function(){ alert('before refresh'); } }); } }); function resize(){ $('#test').datagrid({ title: 'New Title', striped: true, width: 650, queryParams:{ p:'param test', name:'My Name' } }); } //獲取Datagrid Options對象屬性的方式 function getGridProperty(){ //先獲取Options對象，然后通過Options獲取其屬性 var optionsObj = $('#test').datagrid('options'); var queryParams = optionsObj.queryParams; } //以下為調用Datagrid的函數的自定義方法 function getSelected(){ var selected = $('#test').datagrid('getSelected'); alert(selected.code+":"+selected.name); } function getSelections(){ var ids = []; var rows = $('#test').datagrid('getSelections'); for(var i=0;i<rows.length;i++){ ids.push(rows[i].code); } alert(ids.join(':')) } function clearSelections(){ $('#test').datagrid('clearSelections'); } function selectRow(){ $('#test').datagrid('selectRow',2); } function selectRecord(){ $('#test').datagrid('selectRecord','002'); } function unselectRow(){ $('#test').datagrid('unselectRow',2); } </script> </head> <body> <h1>DataGrid</h1> <div style="margin-bottom: 10px;"> <a href="#" onclick="resize()">resize</a> <a href="#" onclick="getSelected()">getSelected</a> <a href="#" onclick="getSelections()">getSelections</a> <a href="#" onclick="clearSelections()">clearSelections</a> <a href="#" onclick="selectRow()">selectRow</a> <a href="#" onclick="selectRecord()">selectRecord</a> <a href="#" onclick="unselectRow()">unselectRow</a> </div> <table id="test"></table> </body> </html>