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 增加的特性。

列（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. ]]

编辑器（Editor）

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

每个编辑器有下列行为：

例如，文本编辑器（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 如何呈现行。这个对象必须定义下列方法。

事件

其事件扩展自 panel，下列是为 datagrid 增加的事件。

方法