这两天小编在干组织部项目的时候,用到了EasyUI的可编辑表格,这时候用户在保存,修改信息的时候变得方便多了,因为这样可以直接在表格中更改数据,然后统一的提交到服务器。可以美中不足的是,当用户编辑大量的信息时,这时候就麻烦了,具体的问题如下。
遇到的问题:
以前在做ITOO的和现在的组织部项目,遇到一个这样的情况,当我们修改某一条数据的时候,用户先选中某条数据,然后点击编辑,紧接着将待的数据传到部分视图中去,最后用户在部分视图中修改并保存。 这时候问题就来了,如果用户同时修改很多条信息哪?是不是选择一条,点击一次编辑按钮,然后在部分视图中修改信息,最后保存?如果数据量大的话,用户会跳楼的。
解决方法:
现在做一个功能是,利用EasyUI的可编辑表格,用户可以直接在可编辑的表格中修改数据,然后选中修改的数据统一提交到服务器,这样就避免了用户修改一次提交一次的麻烦了。具体的效果图是这样的。
小编将代码分享
1、JavaScript代码:在页码获取数据并传送给后台
function editData() { //获取选中的行 var rowData = $('#InputUnit').datagrid('getChanges', "updated"); //如果没有选中的话,提示不能保存 if (rowData.length == 0) { $.messager.alert('提示消息', '请选择要保存的行', 'info'); return; } var year = $('#CheckYear').combobox('getText'); //获取年份 var DevelopmentQuantifyResultID = ""; //定义指标成绩ID var Result = ""; //定义成绩 var Remark = "";//定义备注 //通过循环将每行的值用“ ,”隔开 for (var i = 0; i < rowData.length; i++) { DevelopmentQuantifyResultID += rowData[i].DevelopmentQuantifyResultID + ','; Result += rowData[i].Result + ','; Remark += rowData[i].Remark + ','; } DevelopmentQuantifyResultID = DevelopmentQuantifyResultID.substr(0, DevelopmentQuantifyResultID.length - 1); //去掉最后的“ , ” Result = Result.substr(0, Result.length - 1);//去掉最后的“ , ” Remark = Remark.substr(0, Remark.length - 1);//去掉最后的“ , ” //利用ajax向Controller传递数据 $.ajax({ type: "POST", url: "/DevelopmentQuality/ModiyfyResult", data: "Result=" + Result + "&Remark=" + Remark + "&DevelopmentQuantifyResultID=" + DevelopmentQuantifyResultID, success: function (msg) { if ("True"== msg) { $.messager.show({ title: '提示', msg: '票数录入加成功!', timeout: 5000, showType: 'slide' }); $("#dgno").datagrid("reload"); // 重新载入当前页面数据 $("#InputUnit").datagrid("reload"); //添加成功后 刷新已经录入页面的的数据 } else { $.messager.alert('提示!', '票数修改失败,请稍后再试', 'info'); } } }); }
2、后台Controller中的代码:接收前台传送过来的数据并传送给服务器
public bool ModiyfyResult() { bool isAdded; try { List<DevelopmentQualityResultViewModel> DevelopmentQualityResultVM = new List<DevelopmentQualityResultViewModel>(); //获取前台传过来的值 string DevelopmentQuantifyResultID = Request["DevelopmentQuantifyResultID"];//获取成绩ID string Result = Request["Result"]; string Remark = Request["Remark"]; //将获取的对应的值,通过,隔开保存到数组中 string[] DevelopmentQuantifyResultID1 = DevelopmentQuantifyResultID.Split(','); //以逗号为准,将前台传来的数据进行拆分 string[] Result1 = Result.Split(','); //逗号拆分 string[] Remark1 = Remark.Split(','); //逗号拆分 //通过循环将传来的值保存到实例化的List的ViewModel中 for (int i = 0; i < DevelopmentQuantifyResultID1.Length; i++) { //循环获取指标ID Guid DevelopmentQuantifyResultID3 = new Guid(DevelopmentQuantifyResultID1[i]); //成绩 string Result2 = Result1[i]; decimal Result3 = decimal.Parse(Result2); //备注 string Remark3 = Remark1[i]; //实例一个ViewModel,将数据保存,这样方便传送给WCF后台方法。 DevelopmentQualityResultViewModel QuantifyResultviewModel = new DevelopmentQualityResultViewModel() { DevelopmentQuantifyResultID = DevelopmentQuantifyResultID3, Result = Result3, Remark = Remark3 }; //将实体赋值给list DevelopmentQualityResultVM.Add(QuantifyResultviewModel); } isAdded = DevelopmentQuantifyResult.ModifyDevelopmentQuantifyResult(DevelopmentQualityResultVM); } catch (Exception ex) { throw ex; } return isAdded; }
3、WCF服务端代码:接收Controller传送过来的数据,并将数据保存
public bool ModifyDevelopmentQuantifyResult(List<DevelopmentQualityResultViewModel> enDevelopmentQuality) { string[] proNames = { "Result", "Remark" }; try { //通过循环将list中的值符给实体,然后一条一条保存到数据库中 foreach (var item in enDevelopmentQuality) { T_DevelopmentQuantifyResult enDevelopmentQuantifyResult = new T_DevelopmentQuantifyResult { DevelopmentQuantifyResultID = item.DevelopmentQuantifyResultID, Result = item.Result, Remark = item.Remark }; this.CurrentDal.Update(enDevelopmentQuantifyResult, u => u.DevelopmentQuantifyResultID == enDevelopmentQuantifyResult.DevelopmentQuantifyResultID, proNames); } return this.DbSession.SaveChanges() > 0; } catch (Exception ex) { throw ex; } }
5、小结:
小编上面是实现了批量修改数据的功能,还有批量删除、批量保存、思维逻辑和上面的差不多,希望可以帮助一些做类似项目的人。在此,向自己的这几天的加班致敬!!