`
qing_gee
  • 浏览: 121260 次
  • 性别: Icon_minigender_1
  • 来自: 河南
社区版块
存档分类
最新评论

神奇而陌生的jqgrid

    博客分类:
  • Web
阅读更多

最近在研究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功能实现一个单元格编辑保存并且刷新的功能,先上效果图



 通过单元格中的编辑、提交、退出操作按钮来对会员返利进行编辑,如果已经有值,则不能进行操作,当用户输入合理的数据后,点击提交按钮则会将数据发送到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='编辑' onclick=\"jQuery('#memberscommissionListGrid').editRow('" + cl + "');\"  />";
						var se = "<input style='height:22px;width:40px;' type='button' value='提交' onclick=\"memberscommissionList.rebate('" + cl + "');\"  />";
						var ce = "<input style='height:22px;width:40px;' type='button' value='退出' onclick=\"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端如何获取参数,如何将处理信息相应到客户端。

 

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

 

  • 大小: 21.1 KB
0
0
分享到:
评论

相关推荐

    通达信指标公式源码 神奇线神奇买点指标.doc

    本文档是关于在通达信中编写自定义技术指标的教程,名为“神奇线神奇买点指标”,旨在帮助用户通过公式源码创建一个能指示买入点的指标。 该指标主要由多个移动平均线(MAA5、MAA10、MAA30)和自定义条件组合而成。...

    通达信指标公式源码 神奇九转MACD副图指标.doc

    通达信指标公式源码 神奇九转MACD副图指标 通达信指标公式源码 神奇九转MACD副图指标是基于通达信指标平台开发的一种技术指标,旨在帮助投资者和交易者更好地分析和预测市场走势。本指标的核心思想是结合了MACD...

    神奇磨皮...

    神奇磨皮是很好用的人像类的修图插件,简单方便,效果明显

    神奇电池DC8_傻瓜包【可刷5.00M33-4】

    神奇电池DC8是一款专为PSP游戏掌机设计的自定义电源管理软件,它允许用户在PSP上安装和运行自制系统,如5.00 M33-4固件。PSP,全称为PlayStation Portable,是索尼公司推出的一款便携式多媒体设备,同时也是一款功能...

    PSP神奇电池制作工具

    PSP神奇电池制作工具V6安装与使用图文教程 本文将详细介绍PSP神奇电池制作工具V6的安装和使用流程,包括神奇记忆棒的制作和神奇电池的制作两个部分。 神奇记忆棒制作 神奇记忆棒是PSP神奇电池制作工具V6的核心...

    平凡而又神奇的贝叶斯方法

    平凡而又神奇的贝叶斯方法

    《神奇数学》

    而概率论与信息论的结合,更是催生了数据科学和机器学习,这些领域的进步正深刻地改变着我们的生活。 此外,数学还包含了逻辑和证明技巧,这是理解和创建数学理论的基础。形式逻辑系统,如皮亚诺公理和布尔代数,为...

    神奇计算器神奇计算器

    标题中的“神奇计算器”可能指的是一个功能强大的计算应用程序,它可能包含了普通计算器不具备的高级功能。这类计算器可能包括科学计算、统计分析、工程单位转换、复数运算、矩阵计算等功能,旨在满足用户在数学、...

    神奇战法好神奇,突破就涨通达信指标公式源码.doc

    具体而言,通过比较不同时间窗口内的最高价、最低价以及收盘价等数据,结合成交量等因素,计算出一系列指标线,并在此基础上设置买卖信号。这种技术分析方法在实际操作中可以帮助投资者把握趋势变化,识别可能的突破...

    psp神奇电池刷机组合(MagicMemoryStick)1.32绿色中文版

    随着神奇电池的诞生,还出现了一个新的名次:神奇记忆棒。这跟记忆棒就是伴随着神奇电池同时产生的包含特定文件的普通记忆棒。与电池不同,这跟神奇记忆棒的内容丢失相对来说比较容易,只要格式一下记忆棒,神奇记忆...

    神奇计算器1.4,好用的计算器

    考虑到移动设备的特性,神奇计算器1.4也优化了触摸屏操作,大键位设计使得在手机或平板上点击更加精准,而滑动清除功能则能快速清理错误输入,提升计算效率。 综上所述,神奇计算器1.4是一款功能强大且全面的计算...

    数学之美番外篇:平凡而又神奇的贝叶斯方法

    概率论只不过是把常识用数学公式表达了出来。——拉普拉斯记得读本科的时候,最喜欢到城里的计算机书店里面去闲逛,一逛就是好几个小时;有一次,在书店看到一本书,名叫贝叶斯方法。当时数学系的课程还没有学到概率...

    网页动画素材 纯css3绘制逼真神奇宝贝伊布动画(抖音资料)

    网页动画素材 纯css3绘制逼真神奇宝贝伊布动画(抖音资料)网页动画素材 纯css3绘制逼真神奇宝贝伊布动画(抖音资料)网页动画素材 纯css3绘制逼真神奇宝贝伊布动画(抖音资料)网页动画素材 纯css3绘制逼真神奇宝贝...

    神奇手机维修培训教程

    神奇手机维修培训教程 神奇手机维修培训教程 神奇手机维修培训教程

    神奇的圆锥曲线 问题探究

    这个压缩包中的“神奇的圆锥曲线 问题探究”很可能是一份深入探讨圆锥曲线特性和解题技巧的资料。让我们来详细探讨一下圆锥曲线的相关知识点。 1. 定义:圆锥曲线是当平面与圆锥相交时形成的闭合曲线,根据截取的...

    新版神奇校车视频字幕srt格式(共26集,不包括视频)

    新版神奇校车字幕srt格式 The Magic School Bus Rides Again subtitles

    神奇视频书windows版

    神奇视频书Windows版是一款专为用户打造的视频电子书制作工具,尤其适用于为儿童或商务场合创作富有吸引力的内容。这款软件结合了视频、图像、文本等多媒体元素,帮助用户轻松制作出互动性强、视觉效果出色的电子...

    神奇的读心术软件

    而用户行为预测则是基于大数据和算法模型,预测用户的下一步行动或偏好。 在压缩包中包含的“神奇读心-F.exe”文件,这很可能是一个可执行文件,即程序本身。通常,.exe文件是Windows操作系统下的应用程序,用户...

    神奇万年历

    神奇万年历

    手把手神奇电池V6版终极安装应用教程

    1. **新增支持4.01M33-2系统**:该版本更新了内核为4.01M33,旨在解决部分TA-88主机因使用1.5/3.40内核而引发的问题。特别是采用了4.01核心后,TA088V2主板的用户可以顺利刷机,但遗憾的是TA088V3主板的用户仍无法...

Global site tag (gtag.js) - Google Analytics