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 | oolean | 是否把數據顯示在一行上，如果設置爲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: 行索引 |
und |
| 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 | 當用取消選擇一行時觸發 |
方法
| Nam | 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="#" οnclick="resize()">resize</a>
<a href="#" οnclick="getSelected()">getSelected</a>
<a href="#" οnclick="getSelections()">getSelections</a>
<a href="#" οnclick="clearSelections()">clearSelections</a>
<a href="#" οnclick="selectRow()">selectRow</a>
<a href="#" οnclick="selectRecord()">selectRecord</a>
<a href="#" οnclick="unselectRow()">unselectRow</a>
</div>
<table id="test"></table>
</body>
</html>
轉自：https://www.cnblogs.com/zhangtianle/p/9023259.html
easyUi reload 重定向URL
今天在做工資流程操作的時候，需要根據下拉 展示不同的 流程信息。
使用 easyUi 的 $("dg").datagrid('reload'); 只是重載當前的URL，
無法根據類型載入不同的數據，查了下 發現API也沒有明確闡述重定向URL，
在Google的時候發現一篇文章，
$('#telGrid').datagrid({url:'http://www.my400800.cn',
queryParams:{s_key:'400', website:'http://www.my400800.cn/LianXiWoMen.html' }
});
根據以上方法稍作修改即可 重定向。
$("#dg").datagrid({url:"${ctx}/tsalSalaryFlowController.do?method=getflowXmlConfig&flowType="+$("#flowType").val()});
代碼如上！
原文：https://blog.csdn.net/xiao2shiqi/article/details/7535586