MVC Table表格的单条数据删除与批量删除

MVC Table表格的单条数据删除与批量删除

开发工具与关键技术：VisualStudio MVC
作者：老龙
撰写时间：2019/4/28

在MVC课程的学习中，表格数据的查询、新增、修改、删除可以说是占了半壁江山。而下面要介绍的就是在页面显示的table列表里的数据删除，不过这个删除包含了单条数据的删除与多条数据的删除，毕竟一条一条地删除哪有一堆一堆地删除好玩。
要删除信息好歹你也得先有一个表格，至于表格的查询由于之前的文献介绍过了，这里就不详细地介绍了。那就先介绍一下在ASP.NET Web应用程序的table表格数据删除的控制器方法吧。

public ActionResult DeleteEmployee(int employeeID)
        {
            ReturnJson msg = new ReturnJson();
            try
            {
                var count = (from tb in myModel.PW_Employee
                             where tb.employeeID == employeeID
                             select tb).Single();
                myModel.PW_Employee.Remove(count);
                myModel.SaveChanges();
                msg.State = true;
                msg.Text = "删除成功";
            }
            catch (Exception)
            {
                msg.State = false;
                msg.Text = "删除失败";
            }
            return Json(msg, JsonRequestBehavior.AllowGet);
        }入代码片

在页面删除数据时我们需要根据那条数据的ID与数据库表格中的数据进行匹配后来进行删除操作，所以在控制器的方法里就设置了一个参数为EmployeeID用来传输到页面方法与页面选中的数据的ID相匹配。而ReturnJson是自定义的一个类，作用只是用来返回State的状态与Text的文本。方法体里用var 声明list来接收查询出来的数据。匹配的条件为传到页面方法的员工IDEmployeeID与数据库表里的员工IDEmployeeID相等，然后直接从数据库的表格里删除匹配出来的数据。
单条数据删除的页面方法较为简单。它只需要声明变量与控制器传过来的变量用键值对的之类的方式匹配后再向控制器方法提交请求执行删除就结束了。

function saveDelete(employeeID) {
            layer.confirm("确认要删除吗？", { icon: 3 }, function (index) {
                layer.close(index);
                $.post("DeleteEmployee", { employeeID: employeeID }, function (msg) {
                    if (msg.State == true) {
                        layer.msg(msg.Text, { icon: 1 });
                        tabEmployee.reload();
                    }
                    else {
                        layer.msg(msg.Text, { icon: 2 });
                    }
                });
            })
        }

上面的代码里的layer是layui.js插件里的提示层，这里就不多做介绍。

批量删除。现在才是本篇文章要的重点，顾名思义，批量删除就是多条数据的删除。他的从控制器方法去单条数据的控制器方法没有多大的区别。就是页面方法更为繁杂。

//批量删除
        $("#delete").click(function () {
            var Return = 0;
            var checkbox = layuiTable.checkStatus("tabEmployee").data;
            //console.log(checkbox);
            if (checkbox.length != 0) {
                layer.confirm("确认要删除吗？", { icon: 3, title: "提示" }, function (index) {
                    layer.close(index);
                    for (var i = 0; i < checkbox.length; i++) {
                        console.log(checkbox[i].EmployeeID);
                        $.ajax({
                            url: "DeleteEmployee?EmployeeID=" + checkbox[i].EmployeeID,
                            async: false,
                            type: 'get',
                            dataType: 'json',
                            success: function (data) {
                                if (data) {
                                    Return++
                                }
                            }
                        });
                    }
                    if (Return == checkbox.length) {
                        var checklength = checkbox.length - Return;
                        tabEmployee.reload();
                        layer.msg(Return + "条数据删除成功" + "," + checklength + "条数据删除失败", { icon: 1 });
                    }
                    else {
                        layer.msg("数据异常", { icon: 2 });
                    }
                });
            }
            else {
                layer.msg("请选择要删除的数据", { icon: 1 });
            }
        });

声明Return用于记录删除数据的条数，声明checkbox用于获取table表格中选中的数据。判断选中的数据不为0时弹出确认删除提示。然后用for循环记录选中数据的长度，用ajax的提交方式向控制器的方法提出请求，然后将数据删除，每删除成功一次就让Return自增加一，当成功删除的条数等于我们选择删除的数据的条数时，返回删除成功的提示。当不相等时证明有些数据删除失败，这时返回失败提示，整个批量删除的思路就这样完了，内容跟单条数据删除相比其实思路差不多，只是多了一些判断而已。
而怎么选中页面的数据并且对他进行删除呢？在我的代码里是用一个复选框，利用layui.js的插件，在勾选复选框时选择到这条数据。这时我们就需要对表格的数据进行一个监听，监听在勾选复选框时有没有选到数据，在勾选数据时选中的要是第一条数据。

layuiTable.on('row(tabEmployee)', function (obj) {
                    var data = obj.data;
                    obj.tr.find('div.layui-unselect.layui-form-checkbox')[0].click();
                });

最后大概的功能效果为：