回填修改数据

开发工具与关键技术：MVC
作者：文泽钦
撰写时间：2019年 6 月 27 日
现在做一个修改，修改的模态框前端布局的代码量有点多，不过影响不大，布局一般来说大家都会写，那么我们现在就先把需要修改的数据查询回填这个部分先。
我们现在做的是VIP用户修改部分，所以先在VIP表那给个监听事件，监听获取到了哪一行数据。

//获取行事件，vip表管理
 layuiTable.on('row(tabVip)', function (obj)
  {
     var data = obj.data;//获取点击行数据
     
			//控制台输出看看是否能获取到VIPid
			console.log(data);
		     //标注选中样式
		     obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
		     //***单击选中单选框
		     obj.tr.find('div.layui-unselect.layui-form-radio')[0].click();
		                    var vipId = data.VipID;//vip类型id
		                    $("#VipID").val(vipId);
		                    //控制台输出看看是否能获取到VIPid
		                    console.log(vipId);
                }); 

一会我们就是根据VIP的id来回填VIP用户对应的信息，所以我们可以在这里输出测试看能不能获取到VIP的id。打开页面点击一条VIP数据，然后检查看有没有在控制台输出VIP的对应VIPid。要是不确定这个id是不是刚刚点击那条数据的id可以先把data输出看看，data是获取一整行数据。

这个修改按钮是放在外面的所以要先接收到VIPid，否则提醒用户选择需要修改的VIP用户。Modification（）这个是修改按钮的点击事件。

//修改VIP模态框
function Modification(vipId) 
{
            //获取选中的行
            var checkStatus = layuiTable.checkStatus("tabVip");
            //控制台输出
            console.log(checkStatus);
            
            //当前行的长度大于零，回填数据，打开模态框
            if (checkStatus.data.length > 0) 
            {
                var vipId = checkStatus.data[0].VipID;//vip类型id
                //重置表单
                $("#formInModification").resetForm();
                //查询VIP信息，回填数据
                $.post("XiuGaiVIP", { VipID: vipId }, function (stuData)
                 {
                    //输出看值是否根据id查询出VIP信息
                    //console.log(stuData);
                   
                    //下拉框数据回填
                    $("#UsVIPTierID").change(function ()
                     {
                        //调用加载事件，下拉框改变触发数据改变
                        UsXialaiKuang();
                    });
                    //其他表单数据回填
                    loadDatatoForm("formInModification", stuData);
                });
                
                //点击空白处不会关闭模态框
                $('#modUpModification').modal({
                    backdrop: false,
                    keyboard: false
                });
                //弹出模态层
                $("#modUpModification").modal("show");
          } else {
            layer.msg("请选择对应的VIP用户！", { icon: 0, skin: "layui-layer-molv" });
           }
      }

上面代码的意思是，获取到VIP表中的某一条数据，当这个checkStatus值的长度大于零时，则获取这个值的id，然后是请求路径，根据这个VIP的id把对应的VIP信息查询并且回填。否则当这个checkStatus长度小于零则提醒用户选择需要修改的数据。

点击修改时可以看控制台输出看到这个checkStatus值的长度是大于零的，并且是把上面获取到的VIP信息也输出了，然后弹出模态框。这里大家也看到了报错，这个报错是路径错，这个路径是根据VIPid查询VIP信息的路径，上面控制台输出的值是不可以直接回填数据的，所以我们还得去控制器那边写查询方法。

    // 根据id查询VIP信息
    public ActionResult XiuGaiVIP(int VipID)
    {
      try
      {
          NoticeVo VipInfo = (from tbVip in myModels.B_VIP
                 join tbVipTier in myModels.B_VIPTier on tbVip.VIPTierID   equals tbVipTier.VIPTierID
                               where tbVip.VipID == VipID
                               select new NoticeVo
                               {
                               VipID = tbVip.VipID,//id
                               VipCardNumber = tbVip.VipCardNumber,//卡号
                               VipName = tbVip.VipName,//姓名
                               VIPTierID = tbVip.VIPTierID,//vip类别
                               Openacarddate = tbVip.Openacarddate.ToString(),//开卡日
                               Sumofconsumption = tbVip.Sumofconsumption,//消费金额
                               Phone = tbVip.Phone,//手机
                               Birthday = tbVip.Birthday.ToString(),//生日
                               Recentlyconsumption = tbVip.Recentlyconsumption.ToString(),//最近消费
                               Integral = tbVip.Integral,//积分
                               Remarks = tbVip.Remarks,//备注
                               TierName = tbVipTier.TierName,//VIP类型
                               Abatement = tbVipTier.Abatement//折扣
                                    }).Single();
                return Json(VipInfo, JsonRequestBehavior.AllowGet);
            }
            catch (Exception e)
            {
                Console.Write(e);
                return Json("error", JsonRequestBehavior.AllowGet);
            }
        }

先查询数据库中的VIP表，再连接VIP类别表，然后把需要回填对应的数据查询出来，然后返回到页面就可以了。

VIP修改数据回填成功，下次写VIP修改保存。