jQuery框架中jQgrid表格功能应用（包括前后台代码）

最新推荐文章于 2019-08-12 13:39:39 发布

原创最新推荐文章于 2019-08-12 13:39:39 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

本文详细介绍了如何在jQuery框架中使用jQgrid进行表格展示，包括HTML表格结构设置、JavaScript交互逻辑以及后台控制器的数据处理。重点讨论了如何将控制器返回的list转换为JSON格式供前端使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML：

<HEAD>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="0">
</HEAD>
<script type="text/javascript" src="js/common/util2.js"></script>
<script type="text/javascript" src="js/common/dateutil.js"></script>
<script type="text/javascript" src="js/member/memberInfo.js"></script>
<div class="scroll_vertical">
	<form class="divider query_form" name="interfaceLogForm1"
		id="interfaceLogForm1">
	
		<div class="form-group">
			<label class="form_label">姓名：</label> <input type="text"
				class="form-control" name="emp_name">
		</div>

		<div class="form-group">
			<label class="form_label">部门代码：</label> <input type="text"
				class="form-control" name="deptno">
		</div>

		<div class="form-group">
			<label class="form_label">证件号码：</label> <input type="text"
				class="form-control" name="emp_idno">
		</div>

		<div class="form-group">

			<label class="form_label">移动电话：</label> <input type="text"
				class="form-control" name="mobile_no">
		</div>
		<div class="form-group"></div>
		<div class="form-group">
			<div class="form-btn">
				<button class="btn btn_green" type="button" id="search">查询</button>
			</div>
		</div>
	</form>

	<table id="interfaceLogList0"></table>
	<div id="interfaceLogPager0"></div>
</div>

JS：

$(function() {
	$('#interfaceLogList0')
			.jqGrid(
					{
						url : 'aaaa/aaaa/url',
						datatype : "json",
						mtype : 'POST',
						width : MinWidth(1500),
						height : 'auto',
						rowNum : 15,
						rowList : [ 15, 30, 45, 60 ],
						pager : '#interfaceLogPager0',
						sortname : 'dateExcute',
						sortorder : 'asc',
						viewrecords : true,
						autowidth : false,
						rownumbers : true,
						jsonReader : {
							id : 'id',
							width : 10
						},
						postData : {
						// region_code13 : 'first'
						},
						shrinkToFit : true,
						colModel : [
						        {
									label : '姓名',
									name : 'empName',
									editable : true,
									editrules : {
										required : true
									},
									editoptions : {
										size : '8%',
										maxlength : 50
									},
									sortable : false,
									width : '6%'
								},
								{
									label : '性别',
									name : 'sex',
									editable : true,
									editrules : {
										required : true
									},
									edittype : 'select',
									editoptions : {
										value : 'M:男;F:女'
									},
									formatter : function(data, opt, rec) {
										if (data == 'M' || data == 'm') {
											return '男';
										} else if (data == 'F' || data == 'f') {
											return '女';
										} else {
											return '';
										}
									},
									sortable : false,
									width : '6%'
								},
								{
									label : '移动电话',
									name : 'mobileNo',
									editable : false,
									sortable : false,
									editoptions : {
										size : '8%',
										maxlength : 30
									},
									width : '8%'
								}],
						loadComplete : function(data) { // 完成服务器请求后，回调函数
							/*
							 * var records =
							 * $("#interfaceLogList0").jqGrid('getGridParam','records');
							 * if(records == 0) { openMsgShow("未搜索到结果"); }
							 */
						},
						onSelectRow : function(id) {

							if ($("#interfaceLogList0").getCell(id,
									'isPresident') == '否') {
								$("#interfaceLogList0").jqGrid('setColProp',
										'isPresident', {
											editable : false
										});
							} else {
								$("#interfaceLogList0").jqGrid('setColProp',
										'isPresident', {
											editable : true
										});
							}
						},
						ondblClickRow : function(rowid, iRow, iCol, e) {
							// $('#interfaceLogList0').setGridParam({cellEdit:false});
							$('#interfaceLogList0').jqGrid('editRow', rowid,
									true);
							$('#save_' + rowid).removeAttr('disabled');
						},
						gridComplete : function() {
							var ids = $("#interfaceLogList0").jqGrid(
									'getDataIDs');
							// var rowIds =
							// jQuery("#gridTable").jqGrid('getDataIDs');
							// var rowIds = $("#gridTable").getDataIDs();
							for ( var i = 0; i < ids.length; i++) {
								var id = ids[i];
								var saveBtn = "<button type='button' style='color:#f60' id='save_"
										+ id
										+ "' onclick='saveInfo("
										+ id
										+ ")' disabled>保存</button>";
								$("#interfaceLogList0").jqGrid('setRowData',
										ids[i], {
											Save : saveBtn
										});
							}
						}
					/*
					 * beforeSelectRow:function(id){ if(id && id!==lastSel){
					 * $('#interfaceLogList0').jqGrid('saveRow',lastSel);
					 * lastSel=id; } /*$('#interfaceLogList0').editRow(id,
					 * true); },//加上grid代码处。
					 * beforeEditCell:function(rowid,cellname,v,iRow,iCol){
					 * lastrow = iRow; lastcell = iCol; }
					 */
					});
	scrollVertical();
	$(window).resize(function() {
		var w = MinWidth(1500);
		$('#interfaceLogList0').setGridWidth(w);
	});
});

java:

controller:

@RequestMapping(value = "/url", method = { RequestMethod.POST, RequestMethod.GET })
	@ResponseBody
	public DataGridResult<MemberInfoDTO> getMemberPageInfo(DatagridPagination page,HttpServletResponse response){
		//第一次进入查询界面返回空列表....
		Map<String,Object> paramMap=new HashMap<String,Object>();
		//LogUtil.traceLogger.log(userName,Level.COMMON_ERROR,this.getClass().getName(),"queryProductLogList",SDF.format(new Date()) + "进入接口日志列表获取页面");
		//Audit
		DataGridResult<MemberInfoDTO> list = null;
		try {
			list = memberService.queryMemberPage(page, response, paramMap);
		} catch (Exception e) {
			
		}
		return list;
	}

service:

@Override
	public DataGridResult<MemberInfoDTO> queryMemberPage(DatagridPagination page, HttpServletResponse response, Map<String,Object> paramMap) throws BusinessServiceException{
		
		DataGridResult<MemberInfoDTO> dataGridResult = null;
		try {
			page.setStartAndEnd();
			paramMap.put("startRow", page.getStartRow());
			paramMap.put("endRow", page.getEndRow());
			List<MemberInfoDTO> list = memberDAO.queryMemberPageInfo(paramMap);
			if (list == null || list.size() == 0) {
				response.setHeader("errorType", "nullList");
			} else {
				dataGridResult = new DataGridResult<MemberInfoDTO>();
				int totalRow = memberDAO.getMemberInfoCount(paramMap);
				dataGridResult.setRows(list);
				dataGridResult.setTotal(totalRow);
				dataGridResult.setPage(page.getPage());
				dataGridResult.setTotalPages((totalRow + page.getRows() - 1) / page.getRows());
			}
		} catch (Exception e) {
			
		}
		return dataGridResult;
	}

Dao层略

注意：

controller层返回list时需要解析成json格式到前台