表格数据的修改和删除

开发工具与关键技术：VS

作者：盘耀海

撰写时间：撰写时间：2019年04月28日

老师MVC教学中学习关于数据修改和删除的知识，1、新增和修改各有模态窗体（条件一）；

2、新增和修改公用一个模态窗体（条件二）。修改：点击修改按钮，模态窗体打开，数据回填；点击保存按钮提交修改数据，控制器保存修改输入的数据，返回提示消息。点击删除按钮提示询问是否删除，提交数据至控制器删除，返回提示信息。

一、新增和修改各有模态窗体：

表格自定义列中的按钮绑定修改删除的按钮：

修改按钮：

function DoUpdate(employeeID) {//修改按钮，数据回填

$("#formUpdateEmployee input[type='reset']").click();//重置表单

$("#modUpdateEmployee").modal();//模态窗体打开

$.get("SelectEmployeeByID?employeeID=" + employeeID, function (data) {回填数据

$("#UemployeeID").val(employeeID);

$("#UemployeeNum").val(data.employeeNum);

$("#UemployeeName").val(data.employeeName);

$("#Utelphone").val(data.telphone);

$("#Uaddress").val(data.address); });}

public ActionResult SelectEmployeeByID(int employeeID) {控制器方法//查询回填数据

try{

PW_Employee listEmployee = (from tbEmployee in myModel.PW_Employee

where tbEmployee.employeeID == employeeID

select tbEmployee).Single();

return Json(listEmployee, JsonRequestBehavior.AllowGet);

}catch (Exception e) {

Console.WriteLine(e); return Json(null, JsonRequestBehavior.AllowGet); }

}

保存按钮：

function saveUpdateemployee() { // 保存修改信息

var employeeID = $("#UemployeeID").val(), Num = $("#UemployeeNum").val(),Name =$("#UemployeeName").val(),phone =$("#Utelphone").val(),addres=,$("#Uaddress").val();

if (employeeID != "" && Num != "" && Num != "" && Name != "" && phone != "" && addres != "") {//判断输入的数据是否有空值

$.get("UpdateEmployeeInfor", {employeeID: employeeID, employeeNum: Num, employeeName: Name, telphone: phone, address: addres}, function (msg) {

if (msg.State == true) {

layer.alert(msg.Text);

$("#modUpdateEmployee").modal('hide');//关闭模态窗体

Tabemployee.reload();

}

else {layer.alert(msg.Text); }

});

} else { layer.alert("请将数据填写完整！"); }}

控制器修改方法：

public ActionResult UpdateEmployeeInfor(PW_Employee sysEmployee) {

ReturnJson msg = new ReturnJson();

if (!string.IsNullOrEmpty(sysEmployee.employeeName) {//查询数据是否已经存在

try{ //捕获异常

int listEmployee= (from tbEmployee in myModel.PW_Employee

where tbEmployee.employeeID != sysEmployee.employeeID&& tbEmployee.employeeName == sysEmployee.employeeName.Trim()

select tbEmployee).Count();

if (listEmployee == 0) {//修改员工信息

myModel.Entry(sysEmployee).State =System.Data.Entity.EntityState.Modified;

if (myModel.SaveChanges() > 0) {//数据>0修改成功

msg.State = true; msg.Text = "修改成功！";}

else{ msg.Text = "修改失败！"; }

}

else{msg.Text = "已经存在！"; }

}catch (Exception e) {Console.WriteLine(e); msg.Text = "数据异常！";}

}else{msg.Text = "请填写完整！";}

return Json(msg, JsonRequestBehavior.AllowGet); }

二、新增修改公用一个模态窗体时：声明一个bool类型的全局变量（var BLInsertUpdate = true;），true为新增，false为修改

保存方法,if语句判断当BLInsertUpdate = true时为新增保存；为 false时修改保存

三、应用layui的弹出层：声明模块全局变量（var layerIndex;），（layer.open）打开模态窗体。

//定义一个方法关闭弹出层

function layerClose() { layer.close(layerIndex); }

function DoUpdate(employeeID) {修改按钮

BLInsertUpdate = false; //false为修改模态窗体

$("#formEmployee input[type='reset']").click();//获取from表单的ID-重置表单

//获取表单信息

$.get("SelectEmployeeByID?employeeID=" + employeeID, function (data) {

$("#employeeID").val(employeeID);

$("#employeeNum").val(data.employeeNum);

$("#employeeName").val(data.employeeName);

$("#telphone").val(data.telphone);

$("#address").val(data.address);

});

//弹出layer窗体

layerIndex = layer.open({

type: 1,//页面层 area: ["480px", "180px"],

offset: "150px",

title: $("#modtitle").text("修改"),

content: $("#modEmployee")

});}

function saveemployee() {保存新增、修改方法

if ($('#formEmployee [name="employeeName"]').val() != "") {

var url = "";

if (BLInsertUpdate) { url = "InsertEmployeeInfor"; }//新增

else {url = "UpdateEmployeeInfor"; }//修改

//序列化表单:新增：名称，修改：ID，名称)

var formDate = $("#formEmployee").serializeArray();

$.post(url, formDate, function (msg) {

if (msg.State) {

layerClose();//关闭窗体

Tabemployee = layuiTable.reload('tabemployee');//刷新table

}

layer.alert(msg.Text);

});

}else { layer.alert('请填写完整', { icon: 0 });}}

、点击删除按钮提示询问是否删除数据：

function DoDelete(employeeID) {删除方法（传入参数员工ID）

layer.confirm("确认删除该员工吗？", { icon: 3, offset: '100px', title: '提示' }, function (index) { layer.close(index); //关闭询问提示

//提交数据

$.get("DoDeleteEmployeeInfor?employeeID=" + employeeID, function (msg) {

if (msg.State) {//判断数据是否修改成功，返回提示信息

layer.alert(msg.Text, { icon: 1, offset: '150px' });

Tabemployee.reload();//表格刷新

} else {layer.alert(msg.Text, { icon: 5, offset: '150px' }); }//弹出提示框

});});};

public ActionResult DoDeleteEmployeeInfor(int employeeID) {//通过员工ID查询删除数据

ReturnJson msg = new ReturnJson();

try{//捕获异常

var listemployee = (from tbemployee in myModel.PW_Employee

where tbemployee.employeeID == employeeID

select tbemployee).Single();

myModel.PW_Employee.Remove(listemployee);//移除数据

if (myModel.SaveChanges() > 0) {//判断数据是否移除成功

msg.State = true; msg.Text = "删除成功！";}

else{msg.Text = "删除失败！";}

return Json(msg, JsonRequestBehavior.AllowGet); }

catch (Exception) { msg.Text = "数据异常！";

return Json(msg, JsonRequestBehavior.AllowGet); }}

表格数据的修改和删除

猜你喜欢