jQuery EasyUI - 數據表格（DataGrid）

　　由於工作需要，項目使用前端　jQuery EasyUI - DataGrid 來控制數據表格。

　　1、加載相關js和css，因為easyui依賴jquery，所有加載easyui前要先加載jquery，否則為提示找不到datagrid

        <!-- 加載jquery -->  
        <script type="text/javascript" src="plugins/jquery/jquery-1.4.2.min.js"></script>  
       <!-- 加載jquery-easyui -->  
        <link rel="stylesheet" type="text/css" href="plugins/jquery/jquery-easyui-1.1.2/themes/default/easyui.css">  
        <link rel="stylesheet" type="text/css" href="plugins/jquery/jquery-easyui-1.1.2/themes/icon.css">  
        <script type="text/javascript" src="plugins/jquery/jquery-easyui-1.1.2/jquery.easyui.min.js"></script>  

2、界面設置table，確定其id

<table id="personManage"></table> 

3、編寫js代碼

var objTable=$("#personManage");
	objTable.datagrid({ pagination: true,
		url:'${ctx}/cpv3QuotationCtrl/query?RndId='+Math.random(),
		loadFilter:pagerFilter,
		queryParams:buildParams(),
		toolbar:"#toolbar",
		rownumbers:true,
		width:Number($("fieldset").css("width").replace("px",""))+20,
		columns: [[
		    { field: 'MD5_SIGNATURE',hidden:true},
		    { field: 'TMPE', title: '選擇',align:'center', width: 50,formatter:formatter_Select},
			{ field: 'QUOTATION_NAME', title: '報價單名稱', width:100,align:'center'},
			{ field: 'QUOTATION_STATUS', title: '報價單狀態', width: 100,align:'center',formatter:formatter_common_quotation},
			{ field: 'TOTAL_PLAN_COST', title: '總預估成本', width:100,align:'center'},
			{ field: 'QUOTATION_AMOUNT', title: '報價總金額', width:100,align:'center'},
			{ field: 'QUOTATION_VERSION', title: '報價單版本', width:100,align:'center'},
			{ field: 'CREATE_USER_ID', title: '創建人', width:100,align:'center'},
			{ field: 'CREATE_TIME', title: '創建時間', width:100,align:'center',formatter: formatDatebox},
			{ field: 'MODIFY_TIME', title: '最后修改時間', width:100,align:'center',formatter: formatDatebox}
	　　 ]],
	   fitColumns:true　//自適應寬度、可以水平滾動
	});

 設置datagrid參數。參數也可以直接加在url上：url:"getRepeatPs.action?documentnumber="+documentnumber+"&simDegree="+simDegree,  

/**創建查詢參數**/
function buildParams(){
	var name=$("#name").val();
	var projectId = "${projectId}";
	var quotation_type=$("#quotation_type").combobox("getValue");
	return {
		name:name,
		projectId:projectId,
		quotation_type:quotation_type
	};	
}

 4、編寫action層代碼或control

Map<String,String> params= new HashMap<String,String>();
		try{
			//前台獲取查詢條件
			String projectId = StringUtils.trimToEmpty(request.getParameter("projectId"));
			params.put("name",StringUtils.trimToEmpty(request.getParameter("name")));//報價單名稱
			params.put("quotation_type",StringUtils.trimToEmpty(request.getParameter("quotation_type")));//報價單狀態
			
			//傳入分頁參數
			params.put("page",StringUtils.trimToEmpty(request.getParameter("page")));
			params.put("rows",StringUtils.trimToEmpty(request.getParameter("rows")));
			//查詢封裝數據
			return this.quotationService.queryAllQuotationByProject(params,projectId);
		}catch(Exception e){
			throw new ControllerException("",e);
		}

其中的page由datagrid傳入，當用戶在datagrid左下角選擇每頁顯示的行數時，datagrid會將該值已參數形式附加到url后面傳入action中，名字就叫page，還要將結果總行數total傳給datagrid，用於分頁

不知道是datagrid配置有誤還是datagrid的bug，datagrid的結果集和每頁顯示的行數都叫rows，重名了

解決辦法如上，結果集還是叫rows，但是List的類型改為Object而不能用實體的類型，每頁顯示的行數通過request獲取。List<Map<String, Object>> list。

 

頁面通過ajax調用datagrid方法就能直接顯示表的數據了。此外也可以直接寫好thead，tbody數據由datagrid傳入。

<table id="projectGrid" 
					data-options="
								  pagination:true,
								  pagePosition:'bottom',
				        		  fitColumns:false,
				        		  enableHeaderClickMenu:false,
				        		  singleSelect:false,
				        		  autoRowHeight:true,
				        		  nowrap:true">
				       
					<thead data-options="frozen:true">
						<tr>
							<th data-options="field:'aa',checkbox:true"></th>
							<th data-options="field:'projectId'">項目編號</th>
							<th data-options="field:'projectName',width:150,align:'center'">
								項目名稱
							</th>
						</tr>
					</thead>
					<thead>
						<tr>
							<th data-options="field:'friendName',width:100,align:'center'">
								客戶全稱
							</th>

 

$("#projectGrid").datagrid({
	    		url:'${ctx}/cpv3ProjectCtrl/getProjectList?ram='+Math.random(),
	    		queryParams:$.serializeObject($('#searchForm'))
	    	});

 詳情可以查看datagrid的官方API或翻譯API：

【轉】http://www.cnblogs.com/Philoo/archive/2011/11/16/jeasyui_api_datagrid.html

擴展自 $.fn.panel.defaults ，用 $.fn.datagrid.defaults 重寫了 defaults 。

依賴

• panel
• resizable
• linkbutton
• pagination

用法

1. <table id="tt"></table>  

 

1. $('#tt').datagrid({   
2.     url:'datagrid_data.json',   
3.     columns:[[   
4.         {field:'code',title:'Code',width:100},   
5.         {field:'name',title:'Name',width:100},   
6.         {field:'price',title:'Price',width:100,align:'right'}   
7.     ]]   
8. });  

數據表格（DataGrid）的特性

其特性擴展自 panel，下列是為 datagrid 增加的特性。

名稱	類型	說明	默認值
columns	array	datagrid 的 column 的配置對象，更多詳細請參見 column 的特性。	null
frozenColumns	array	和列的特性一樣，但是這些列將被凍結在左邊。	null
fitColumns	boolean	True 就會自動擴大或縮小列的尺寸以適應表格的寬度並且防止水平滾動。	false
striped	boolean	True 就把行條紋化。（即奇偶行使用不同背景色）	false
method	string	請求遠程數據的 method 類型。	post
nowrap	boolean	True 就會把數據顯示在一行里。	true
idField	string	標識字段。	null
url	string	從遠程站點請求數據的 URL。	null
loadMsg	string	當從遠程站點加載數據時，顯示的提示信息。	Processing, please wait …
pagination	boolean	True 就會在 datagrid 的底部顯示分頁欄。	false
rownumbers	boolean	True 就會顯示行號的列。	false
singleSelect	boolean	True 就會只允許選中一行。	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
remoteSort	boolean	定義是否從服務器給數據排序。	true
showFooter	boolean	定義是否顯示一行頁腳。	false
rowStyler	function	返回例如 'background:red' 的樣式，該函數需要兩個參數： rowIndex： 行的索引，從 0 開始。 rowData： 此行相應的記錄。
loadFilter	function	返回過濾的數據去顯示。這個函數需要一個參數 'data' ，表示原始數據。 你可以把原始數據變成標准數據格式，此函數必須返回標准數據對象，含有 'total' 和 'rows' 特性。
editors	object	定義編輯行時的 editor 。	預定義的 editor
view	object	定義 datagrid 的 view 。	默認的 view

列（Column）的特性

DataGrid 的 Column 是一個數組對象，它的每個元素也是一個數組。數組元素的元素是一個配置對象，它定義了每個列的字段。

代碼示例：

1. columns:[[   
2.     {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},   
3.     {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},   
4.     {title:'Item Details',colspan:4}   
5. ],[   
6.     {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},   
7.     {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},   
8.     {field:'attr1',title:'Attribute',width:100},   
9.     {field:'status',title:'Status',width:60}   

10. ]]  

 

名稱	類型	說明	默認值
title	string	列的標題文字。	undefined
field	string	列的字段名。	undefined
width	number	列的寬度。	undefined
rowspan	number	指一個單元格占據多少行。	undefined
colspan	number	指一個單元格占據多少列。	undefined
align	string	指如何對齊此列的數據，可以用 'left'、'right'、'center'。	undefined
sortable	boolean	True 就允許此列被排序。	undefined
resizable	boolean	True 就允許此列被調整尺寸。	undefined
hidden	boolean	True 就隱藏此列。	undefined
checkbox	boolean	True 就顯示 checkbox。	undefined
formatter	function	單元格的格式化函數，需要三個參數： value： 字段的值。 rowData： 行的記錄數據。 rowIndex： 行的索引。	undefined
styler	function	單元格的樣式函數，返回樣式字符串來自定義此單元格的樣式，例如 'background:red' 。此函數需要三個參數： value： 字段的值。 rowData： 行的記錄數據。 rowIndex： 行的索引。	undefined
sorter	function	自定義字段的排序函數，需要兩個參數： a： 第一個字段值。 b： 第二個字段值。	undefined
editor	string,object	指編輯類型。當是 string 時指編輯類型，當 object 時包含兩個特性： type：string，編輯類型，可能的類型是：  text、textarea、checkbox、numberbox、validatebox、datebox、combobox、combotree。 options：對象，編輯類型對應的編輯器選項。	undefined

編輯器（Editor）

用 $.fn.datagrid.defaults.editors 重寫了 defaults。

每個編輯器有下列行為：

名稱	參數	說明
init	container, options	初始化編輯器並且返回目標對象。
destroy	target	如果必要就銷毀編輯器。
getValue	target	從編輯器的文本返回值。
setValue	target , value	給編輯器設置值。
resize	target , width	如果必要就調整編輯器的尺寸。

例如，文本編輯器（text editor）像下面這樣定義：

1. $.extend($.fn.datagrid.defaults.editors, {   
2.     text: {   
3.         init: function(container, options){   
4.             var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);   
5.             return input;   
6.         },   
7.         getValue: function(target){   
8.             return $(target).val();   
9.         },   
10. 10.         setValue: function(target, value){   
11. 11.             $(target).val(value);   
12. 12.         },   
13. 13.         resize: function(target, width){   
14. 14.             var input = $(target);   
15. 15.             if ($.boxModel == true){   
16. 16.                 input.width(width - (input.outerWidth() - input.width()));   
17. 17.             } else {   
18. 18.                 input.width(width);   
19. 19.             }   
20. 20.         }   
21. 21.     }   

22. });  

數據表格視圖（DataGrid View）

用 $.fn.datagrid.defaults.view 重寫了 defaults。

view 是一個對象，它告訴 datagrid 如何呈現行。這個對象必須定義下列方法。

名稱	參數	說明
render	target, container, frozen	當數據加載時調用。 target：DOM 對象，datagrid 對象。 container：行的容器。 frozen：表示是否呈現凍結容器。
renderFooter	target, container, frozen	這是呈現行腳選項的函數。
renderRow	target, fields, frozen, rowIndex, rowData	這是選項的函數，將會被 render 函數調用。
refreshRow	target, rowIndex	定義如何刷新指定的行。
onBeforeRender	target, rows	視圖被呈現前觸發。
onAfterRender	target	視圖被呈現后觸發。

事件

其事件擴展自 panel，下列是為 datagrid 增加的事件。

名稱	參數	說明
onLoadSuccess	data	當數據加載成功時觸發。
onLoadError	none	加載遠程數據發生某些錯誤時觸發。
onBeforeLoad	param	發送加載數據的請求前觸發，如果返回 false加載動作就會取消。
onClickRow	rowIndex, rowData	當用戶點擊一行時觸發，參數包括： rowIndex：被點擊行的索引，從 0 開始。 rowData：被點擊行對應的記錄。
onDblClickRow	rowIndex, rowData	當用戶雙擊一行時觸發，參數包括： rowIndex：被雙擊行的索引，從 0 開始。 rowData：被雙擊行對應的記錄。
onClickCell	rowIndex, field, value	當用戶單擊一個單元格時觸發。
onDblClickCell	rowIndex, field, value	當用戶雙擊一個單元格時觸發。
onSortColumn	sort, order	當用戶對一列進行排序時觸發，參數包括： sort：排序的列的字段名 order：排序的列的順序
onResizeColumn	field, width	當用戶調整列的尺寸時觸發。
onSelect	rowIndex, rowData	當用戶選中一行時觸發，參數包括： rowIndex：選中行的索引，從 0 開始 rowData：選中行對應的記錄
onUnselect	rowIndex, rowData	當用戶取消選擇一行時觸發，參數包括： rowIndex：取消選中行的索引，從 0 開始 rowData：取消選中行對應的記錄
onSelectAll	rows	當用戶選中全部行時觸發。
onUnselectAll	rows	當用戶取消選中全部行時觸發。
onBeforeEdit	rowIndex, rowData	當用戶開始編輯一行時觸發，參數包括： rowIndex：編輯行的索引，從 0 開始 rowData：編輯行對應的記錄
onAfterEdit	rowIndex, rowData, changes	當用戶完成編輯一行時觸發，參數包括： rowIndex：編輯行的索引，從 0 開始 rowData：編輯行對應的記錄 changes：更改的字段/值對
onCancelEdit	rowIndex, rowData	當用戶取消編輯一行時觸發，參數包括： rowIndex：編輯行的索引，從 0 開始 rowData：編輯行對應的記錄
onHeaderContextMenu	e, field	當 datagrid 的頭部被右鍵單擊時觸發。
onRowContextMenu	e, rowIndex, rowData	當右鍵點擊行時觸發。

方法

名稱	參數	說明
options	none	返回 options 對象。
getPager	none	返回 pager 對象。
getPanel	none	返回 panel 對象。
getColumnFields	frozen	返回列的字段，如果 frozen 設定為 true，凍結列的字段被返回。
getColumnOption	field	返回指定列的選項。
resize	param	調整尺寸和布局。
load	param	加載並顯示第一頁的行，如果指定 param 參數，它將替換 queryParams 特性。
reload	param	重新加載行，就像 load 方法一樣，但是保持在當前頁。
reloadFooter	footer	重新加載腳部的行。
loading	none	顯示正在加載狀態。
loaded	none	隱藏正在加載狀態。
fitColumns	none	使列自動展開/折疊以適應 datagrid 的寬度。
fixColumnSize	none	固定列的尺寸。
fixRowHeight	index	固定指定行的高度。
loadData	data	加載本地數據，舊的行會被移除。
getData	none	返回加載的數據。
getRows	none	返回當前頁的行。
getFooterRows	none	返回腳部的行。
getRowIndex	row	返回指定行的索引，row 參數可以是一個行記錄或者一個 id 字段的值。
getSelected	none	返回第一個選中的行或者 null。
getSelections	none	返回所有選中的行，當沒有選中的記錄時，將返回空數組。
clearSelections	none	清除所有的選擇。
selectAll	none	選中當前頁所有的行。
unselectAll	none	取消選中當前頁所有的行。
selectRow	index	選中一行，行索引從 0 開始。
selectRecord	idValue	通過 id 的值做參數選中一行。
unselectRow	index	取消選中一行。
beginEdit	index	開始對一行進行編輯。
endEdit	index	結束對一行進行編輯。
cancelEdit	index	取消對一行進行編輯。
getEditors	index	獲取指定行的編輯器們。每個編輯器有下列特性： actions：編輯器能做的動作們。 target：目標編輯器的 jQuery 對象。 field：字段名。 type：編輯器的類型。
getEditor	options	獲取指定的編輯器， options 參數包含兩個特性： index：行的索引。 field：字段名。
refreshRow	index	刷新一行。
validateRow	index	驗證指定的行，有效時返回 true。
updateRow	param	更新指定的行， param 參數包含下列特性： index：更新行的索引。 row：行的新數據。
appendRow	row	追加一個新行。
insertRow	param	插入一個新行， param 參數包括下列特性： index：插入進去的行的索引，如果沒有定義，就追加此新行。 row：行的數據。
deleteRow	index	刪除一行。
getChanges	type	獲取最后一次提交以來更改的行，type 參數表示更改的行的類型，可能的值是：inserted、deleted、updated，等等。 當 type 參數沒有分配時，返回所有改變的行。
acceptChanges	none	提交自從被加載以來或最后一次調用acceptChanges以來所有更改的數據。
rejectChanges	none	回滾自從創建以來或最后一次調用acceptChanges以來所有更改的數據。
mergeCells	options	把一些單元格合並為一個單元格，options 參數包括下列特性： index：列的索引。 field：字段名。 rowspan：合並跨越的行數。 colspan：合並跨越的列數。
showColumn	field	顯示指定的列。
hideColumn	field	隱藏指定的列。