jqgrid 选中行触发编辑,切换下一行时验证和异步保存上一行数据
Posted 儿时精神
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jqgrid 选中行触发编辑,切换下一行时验证和异步保存上一行数据相关的知识,希望对你有一定的参考价值。
有时,我们需要批量修改或填写一些相似的数据。可以以jqgrid表来显示,可能的效果如下:
选中触发行编辑参考:jqgrid 单击行启用行编辑,切换行保存原编辑行
本文主要说说验证和异步保存上一条数据的,以下是我项目中的内容,为了做记录留存,没有进行精简处理,感兴趣可以大致阅读下。
我的思路是:
1)用隐藏控件 selectRowId 来记录上一个编辑的行主键。获取值: $("#selectRowId").val()
2)通过隐藏控件值来追踪和验证上个编辑单元格的格式,并对错误的做提示,正确的直接通过
3)验证不通过不允许切换到下个编辑行;验证通过异步保存数据,并将行主键值存储在隐藏控件,保存上个编辑行,触发下个行为编辑状态
$.jgrid.gridUnload("jqGrid");//先卸载 $("#jqGrid").jqGrid({ url: \'QueryTargetDetailList\', postData: { targetTagId: $("#TargetTagId").val(), ... }, mtype: "POST", styleUI: \'Bootstrap\', datatype: "json",//如果url中需要回调函数,则此处格式为jsonp //altRows: true, editurl: \'clientArray\', responsive: true, page: 1, colModel: [ { label: \'编号\', name: \'Id\', width: 50, key: true, editable: false }, ... ], shrinkToFit: true,//是否列宽度自适应。true=适应 false=不适应 loadonce: false, viewrecords: true, onSelectRow: EditSelectRow, height: window.innerHeight * 0.6, width: $(".modal-body").width() //rowNum: fieldJson.length, });
写在 EditSelectRow 方法中的内容如下:
//选中行启用行编辑 function EditSelectRow(id) { var result = ValidateTvalue();//验证数据 if (result != "" && result.length > 0) { abp.message.error(result); return; } SaveOneScore();//保存上一行数据 //当前选中行 $("#selectRowId").val(id);//临时存储当前选中行 //启用当前行为编辑状态 $("#jqGrid").jqGrid(\'editRow\', id, { keys: true, focusField: 17 }); }
写在 ValidateTvalue 方法中的内容如下:
//自定义验证 function ValidateTvalue() { var result = ""; var oldSelectRowId = $("#selectRowId").val(); if (oldSelectRowId != null && oldSelectRowId != "" && oldSelectRowId.length > 0) { $("#jqGrid").jqGrid(\'saveRow\', oldSelectRowId);//保存上一行 var rowDatas = $("#jqGrid").jqGrid(\'getRowData\', oldSelectRowId);//获取上一行数据 //#region 验证分数是否为数值 var regu = "^[0-9]+(.[0-9]{2})?$"; //var regu = "/^\\+?(\\d*\\.\\d{2})$/"; var re = new RegExp(regu); if (re.test(rowDatas.MarkScore)) { //return [true, ""]; } else { result = "打分值【" + rowDatas.MarkScore + "】错误,请输入数值型.如:12或12.23"; $("#jqGrid").jqGrid(\'editRow\', oldSelectRowId, { keys: true, focusField: 17 }); } //#endregion //#region 验证分数的范围值 var MarkScore = rowDatas.MarkScore - 0;//打分 var Weight = rowDatas.Weight - 0;//权重分 if (MarkScore >= 0 && MarkScore <= Weight) { //return [true, ""]; } else { result = "打分值【" + rowDatas.MarkScore + "】应在【" + 0 + "~" + rowDatas.Weight + "】范围内"; $("#jqGrid").jqGrid(\'editRow\', oldSelectRowId, { keys: true, focusField: 17 }); } //#endregion } return result; }
写在 SaveOneScore 方法中的代码如下:
//保存上一条信息 function SaveOneScore() { //原选中行ID var oldSelectRowId = $("#selectRowId").val(); if (oldSelectRowId != null && oldSelectRowId != "" && oldSelectRowId.length > 0) { $("#jqGrid").jqGrid(\'saveRow\', oldSelectRowId);//保存上一行 var rowDatas = $("#jqGrid").jqGrid(\'getRowData\', oldSelectRowId);//获取上一行数据 //计算当前指标最终得分 var endScore = CalculateScore(oldSelectRowId, rowDatas); //设置打分后的单元格值 $("#jqGrid").setCell(oldSelectRowId, \'EndScore\', endScore); //异步保存打分和得分 $.ajax({ type: "post", url: "../api/services/api/MonthBonus/SaveEndScore", data: { DetailId: rowDatas.Id, MarkScore: rowDatas.MarkScore, EndScore: endScore }, success: function (e) { //abp.message.success("", "打分成功!"); }, error: function (e) { if (e.responseText.indexOf("<title>") != -1) { var start = e.responseText.indexOf("<title>"); var end = e.responseText.indexOf("</title>"); abp.message.error(e.responseText.substring(start + 7, end), rowDatas.TargetName + "编号【" + rowDatas.Id.toString() + "】打分失败"); } else abp.message.error(e.responseText, rowDatas.TargetName + "编号【" + rowDatas.Id.toString() + "】打分失败"); } }); } }
由于不想整理了,就草草做了以上粘贴,将就看了。
以上是关于jqgrid 选中行触发编辑,切换下一行时验证和异步保存上一行数据的主要内容,如果未能解决你的问题,请参考以下文章