《EasyUI + MVC + EF +WCF》——实现对Datagrid中数据的批量修改或保存

   这两天小编在干组织部项目的时候,用到了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;
            }
        }

   4、业务逻辑分析:
   代码很多,大家看着是不是有点烦了啊,现在自己总结一下上面的业务逻辑,我们在可编辑的EasyUI的可编辑表格中,我们利用JavaScript表格中已经更新的数据依次获取出来,并存入相应的数组中,每条信息用 “ , ” 分开,紧接着利用Ajax将数据传入Controller中,我们在Controller中将Ajax传递过来的数据进行拆分,利用循环,将每组数据存入到集合LIst<> 中,最后将集合发送给服务端,服务端再利用循环,配合着EF,最后将数据存入数据库。

   5、小结:

   小编上面是实现了批量修改数据的功能,还有批量删除、批量保存、思维逻辑和上面的差不多,希望可以帮助一些做类似项目的人。在此,向自己的这几天的加班致敬!!

你可能感兴趣的:(《EasyUI + MVC + EF +WCF》——实现对Datagrid中数据的批量修改或保存)