神奇而陌生的jqgrid

柔情只为你懂 2021-05-10 11:18 503阅读 0赞

最近在研究jqgrid的单元格编辑功能，由衷感到其神奇而强大的地方，同时也默默的忍受着没有完整API而造成的使用困难，深深的为那些没有亲自编写代码却不断的copy文章发布人员的可恶，下面我将通过自己的亲身体会并且附送代码和解释的方式为大家送上一份福利：

1.从官网上下载jquery.jqGrid.min.js，我也将在附件中添加一个完整的jqGrid源码，然后附送官网API的地址http://www.trirand.com/jqgridwiki/doku.php?id=wiki:cell\_editing，以及最新demo的地址http://www.trirand.com/blog/jqgrid/jqgrid.html

2.条件满足后，我们来通过jqGrid的cell edit功能实现一个单元格编辑保存并且刷新的功能，先上效果图

![3067df64-0250-38a3-883c-8940fe0b4579.png][]  
 通过单元格中的编辑、提交、退出操作按钮来对会员返利进行编辑，如果已经有值，则不能进行操作，当用户输入合理的数据后，点击提交按钮则会将数据发送到server端，数据更新成功后，页面进行刷新。

3.下面我将一步步的进行说明

首先，我们通过设置table 的一系列属性来控制表格的生成，具体的代码如下

{
    				name : 'close_price',
    				index : 'close_price',
    				formatter : 'number',
    				formatoptions : {
    					thousandsSeparator : " ,",
    					decimalPlaces : 2
    				},
    				width : 80,
    				resizable : false,
    				align : 'center'
    			// ,
    			// editable : true,
    			// editoptions : {
    			// readonly : true
    			// }
    			}, {
    				name : 'rebate',
    				index : 'rebate',
    				formatter : "number",
    				formatoptions : {
    					thousandsSeparator : ",",
    					decimalPlaces : 2
    				},
    				width : 80,
    				resizable : false,
    				editable : true,
    				editrules : {
    					required : true,
    					number : true,
    					minValue : 0.00
    				},
    				align : 'center'
    			}, {
    				name : 'rebateDate',
    				index : 'rebateDate',
    				width : 100,
    				resizable : false,
    				align : 'center'
    			// ,
    			// editable : true,
    			// editoptions : {
    			// readonly : true
    			// }
    			}, {
    				name : 'style',
    				index : 'style',
    				width : 50,
    				resizable : false,
    				sorttype : 'text',
    				align : 'center'
    			}, {
    				name : 'stauts',
    				index : 'stauts',
    				width : 50,
    				resizable : true,
    				sorttype : 'text',
    				align : 'center'
    			}, {
    				name : 'oper',
    				index : 'oper',
    				width : 140,
    				resizable : false,
    				sortable : false,
    				align : 'center'
    			} ],

以上代码主要是对图片中显示的列进行控制，如果需要对某列进行编辑，则将editable属性设置为true，然后注意editrules属性，其可以对该列进行一些数据限制，这里就先不进行介绍了，你可以到官网看到很细致的说明。

第二步：

// 没有进行返利的会员可以进行返利
    					if (rowData.rebate == 0.00) {
    						var cl = ids[i];
    						var be = "<input style='height:22px;width:40px;' type='button' value='编辑' οnclick=\"jQuery('#memberscommissionListGrid').editRow('" + cl + "');\"  />";
    						var se = "<input style='height:22px;width:40px;' type='button' value='提交' οnclick=\"memberscommissionList.rebate('" + cl + "');\"  />";
    						var ce = "<input style='height:22px;width:40px;' type='button' value='退出' οnclick=\"jQuery('#memberscommissionListGrid').restoreRow('" + cl + "');\" />";
    						jQuery("#memberscommissionListGrid").jqGrid('setRowData', ids[i], {
    							oper : be + se + ce
    						});
    					}

通过操作列中的是三个按钮对单元格的操作进行控制，点击编辑，则用户可以对会员返利金额列进行数据编辑，点击退出则退出编辑模式，点击提交，则通过memberscommissionList.rebate方法对发送数据以及接收到数据后的一系列控制，注意rebate方法中的内容

// 进行数据的提交
    	rebate : function(id) {
    		// 获取当前行内容
    		var rowData = $("#memberscommissionListGrid").jqGrid("getRowData", id);
    		// 对save方法进行重载
    		$('#memberscommissionListGrid').jqGrid('saveRow', id, {
    			// server的请求地址，这里是一个controller的action地址
    			url : editUrl,
    			mtype : "POST",
    			// 出错则退出编辑模式
    			restoreAfterError : true,
    			// 参数传递，key：value，则server端通过request.getParameter()方法获取
    			extraparam : {
    				"uid" : rowData.uid,
    				"reabte" : rowData.rebate,
    				"rebateDate" : rowData.rebateDate,
    				"close_price" : rowData.close_price
    			},
    			// 保存后返回的server端传递信息
    			aftersavefunc : function(rowid, res) {
    				alert(res.responseText);
    				// 刷新表格
    				jQuery("#memberscommissionListGrid").trigger("reloadGrid");
    				return true;
    			}
    		});
    	},

该段代码通过注释就可以很清楚的看明白，这样前端的工作就完毕了。

接下来，我们在server端对数据进行处理

// 返利金额
    					double rebate = Double.parseDouble(request.getParameter("rebate"));
    					// 会员id
    					int uid = Integer.parseInt(request.getParameter("uid"));
    					// 返利时间
    					String rebateDate = request.getParameter("rebateDate");
    					// 手续费
    					double closePrice = Double.parseDouble(request.getParameter("close_price"));
    
    					logger.info("返利金额：" + rebate + " 会员id：" + uid + " 返利时间：" + rebateDate + " 手续费：" + closePrice);
    
    					// 获取当前会员返利信息
    					if (this.moneyRecordDAO.selectByParaMoneyRecord(uid, rebateDate) != null) {
    						result = "对不起，该月会员已返利过！";
    					} else {
    						// 返利金额超出了手续费
    						if (rebate > closePrice) {
    							result = "会员返利金额超出了该月会员产生的手续费！";
    						} else {
    							// 先对会员返利记录进行增加
    							MoneyRecord key = new MoneyRecord();
    							key.setUid(uid);
    							key.setRebatedate(rebateDate);
    							key.setMemberrebate(new BigDecimal(rebate));
    							key.setIsclearing(0);
    							this.moneyRecordDAO.SaveMoneyRecord(key);
    
    							// 返利记录增加完毕后，对交易所总代理的money_user表进行修改，减去返利金额
    							MoneyUser exchange = this.moneyuserDAO.selectByPrimaryKey(this.membersDAO
    									.selectByProxyserial(CommonConstant.EXCHANGE_SERIAL).getUid());
    							exchange.setTotalpaymoney(exchange.getTotalpaymoney().subtract(new BigDecimal(rebate)));
    							this.moneyuserDAO.updateByPrimaryKey(exchange);
    							result = "该月会员返利成功！";
    						}
    					}
    
    					ServletOutputStream out = response.getOutputStream();
    
    					ObjectMapper objectMapper = new ObjectMapper();
    					objectMapper.writeValue(out, result);
    					out.flush();

通过request获取客户端传递的参数，进行数据库操作后，然后将对应的返回数据通过reponse相应到客户端，该段代码也非常简单，一目了然，这样整个完整的MVC过程就完了。

内容很简单，但是方式很重要，1.如果通过jggrid对单元格数据进行显示、控制、编辑，2.通过jqgrid对数据进行封装，然后发送，然后如何接收，接收后如何处理，3.server端如何获取参数，如何将处理信息相应到客户端。

希望对你的需要有所帮助，对自己负责、对父母感恩。

[3067df64-0250-38a3-883c-8940fe0b4579.png]: /images/20210506/e45f5ca64362490da2c8eec0b836e45d.png