最近在研究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端如何获取参数,如何将处理信息相应到客户端。
希望对你的需要有所帮助,对自己负责、对父母感恩。
相关推荐
神奇计算器神奇计算器神奇计算器神奇计算器
通达信指标公式源码 神奇线神奇买点指标.doc
神奇磨皮是很好用的人像类的修图插件,简单方便,效果明显
平凡而又神奇的贝叶斯方法
神奇数学带你进入神奇的数学领域 神奇数学带你进入神奇的数学领域
47.职业院校教学能力大赛计算机专业《神奇的Vlookup函数》教学设计.docx47.职业院校教学能力大赛计算机专业《神奇的Vlookup函数》教学设计.docx47.职业院校教学能力大赛计算机专业《神奇的Vlookup函数》教学设计....
神奇战法好神奇,突破就涨通达信指标公式源码.doc
数学之美:平凡而神奇的贝叶斯定理;概率论只不过是把常识用数学公式表达了出来。
通达信指标公式源码 神奇九转MACD副图指标.doc
rr数学之美番外篇-平凡而又神奇的贝叶斯算法
随着神奇电池的诞生,还出现了一个新的名次:神奇记忆棒。这跟记忆棒就是伴随着神奇电池同时产生的包含特定文件的普通记忆棒。与电池不同,这跟神奇记忆棒的内容丢失相对来说比较容易,只要格式一下记忆棒,神奇记忆...
神奇的圆锥曲线与解题秘诀 学习圆锥曲线的同学可以参考一下,此文档对你肯定很有帮助。
网页动画素材 纯css3绘制逼真神奇宝贝伊布动画(抖音资料)网页动画素材 纯css3绘制逼真神奇宝贝伊布动画(抖音资料)网页动画素材 纯css3绘制逼真神奇宝贝伊布动画(抖音资料)网页动画素材 纯css3绘制逼真神奇宝贝...
手把手神奇电池V6版终极安装应用教程DA大神终于更新到了despertar6(DC6)也就是我们所说的神奇电池V6版 更新如下引用: 新增4.01M33-2系统 -更新内核为4.01M33,用于修正部分TA-88主机因使用1.5/3.40核心导致的...
神奇手机维修培训教程 神奇手机维修培训教程 神奇手机维修培训教程
神奇电池制作工具,PSP1000全系列、PSP2000 TA-085 V1主板可以制作并使用
通达信指标公式源码 神奇九转高6选股指标.doc
神奇制药:神奇制药:2020年年度报告(修订版).PDF
神奇万年历
概率论只不过是把常识用数学公式表达了出来。——拉普拉斯记得读本科的时候,最喜欢到城里的计算机书店里面去闲逛,一逛就是好几个小时;有一次,在书店看到一本书,名叫贝叶斯方法。当时数学系的课程还没有学到概率...