右键删除当前学生数据(四)

本文主要是介绍右键删除当前学生数据(四)，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

右键菜单栏的详细教程，请查看《网页右键菜单栏制作(带鼠标属性)》

布局代码如下：

<!--右键菜单栏dom-->
    <div class="dom" @*style="display: none;"*@>
        <ul>
            <li>
                <a href="#" style="padding-top: 0;color: #ccc;">返回</a>
                <span style="color: #ccc;">Alt+向左箭头</span>
            </li>
            <li>
                <a href="#" style="color: #ccc;">前进</a>
                <span style="color: #ccc;">Alt+向右箭头</span>
            </li>
            <li>
                <a href="#">重新加载</a>
                <span>Ctrl+R</span>
            </li>
            <li>
                <a href="#">另存为...</a>
                <span>Ctrl+S</span>
            </li>
            <li>
                <a href="#">打印...</a>
                <span>Ctrl+P</span>
            </li>
            <li>
                <a href="#">映射...</a>
                <span>Ctrl+Z</span>
            </li>
            <li>
                <a href="#">修改</a>
                <span>Ctrl + F</span>
            </li>
            <li>
                <a href="#">删除</a>
                <span>Ctrl + D</span>
            </li>
        </ul>
    </div>

样式代码如下：

<style>
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style: none;
        }

        .dom {
            position: absolute;
            top: 0;
            left: 0;
            /* padding: 20px; */
            text-align: left;
            width: 266px;
            /* height: 318px; */
            border: 1px solid #ccc;
        }

            .dom li {
                position: relative;
                display: block;
                padding: 10px 30px;
            }

        i {
            display: inline-block;
            width: 100%;
            border-bottom: 1px solid #ccc;
        }

        .dom li span {
            position: absolute;
            bottom: 10px;
            right: 30px;
        }

        a {
            color: #000;
            text-decoration: none;
        }
    </style>

效果如下：

当我们通过布局出了样式之后，就先思考要如何的去完成这一个删除的功能。

1、当我们鼠标移动到tr行的时候，获取到他的坐标轴，超出tr不算

2、当菜单栏显示出来的时候我们鼠标选择到删除的选项

3、点击删除的时候将数据传递给控制器，进行删除操作

4、当数据删除是返回值，提醒我们是否要进行删除学生数据，否就是不删除

功能一：禁用浏览器的默认菜单栏

注意：如果我们不禁用浏览器右键菜单，就会出现菜单重叠，从而覆盖我们的自定义菜单

禁用是相对于整个文档来写的，不是写在方法里边

// 禁用浏览器的菜单栏
        $(document).contextmenu(function (e) {
            return false;
        });

功能二：单机文档的任何一处都可以关闭菜单

// 单击隐藏菜单
        $(document).click(function () {
            $("#dom").hide();
        });

功能三：关键是调用方法的时候要传递事件对象event

对象输出值

通过对象获取到的鼠标坐标我们就可以完成下面的操作，右键显示自定义菜单，并将获取到达坐标赋值给left和top，就完成了鼠标哪里右键菜单出现在哪里的功能

// tr右键单机的时候调用
        function mousMut(e) {
            // 获取事件对象
            console.log(e);
            var x = e.pageX;
            var y = e.pageY;
            var key = e.which;
            if (key == 3) { // 左键是1 滚轮是2 右键是3
                var x = e.pageX;
                var y = e.pageY;
                $("#dom").show().css({ left: x, top: y });
            }
        }

功能四：当我们点击菜单中的删除时，回去到当前行的学生姓名，并弹出是否右进行删除，是删除否取消删除功能，如果删除通过$.post()的方法传递数据给行的控制器，并删除学生数据

功能四的第二种方法：通过刚开始动态添加tr行的时候在ID的前面追加多一个input的checked复选框选项，当我们选中复选框，选中状态为:checked的时候点击删除学生信息就弹出确认提示框，根据用户返回的值执行删除代码

最后样式代码：

追加代码如下：

<input class='mr-3' type='checkbox' value='" + data[index].StudentID + "' />" 

因为前面我们已经通过追的方式把学生ID拼接给了val，现在我们获取到当前被选中的复选框的val学生ID，然后通过获取到的ID通过$.post()的方法传递给新建的控制器，这里通过第二种数据传递方式，拼接url的方式

// 点击删除学生信息
        function deletionStudent() {
            // 获取到被选中的复选框 选中状态:checked
            var s = $("#StudentTable input:checked");
            // console.log(s);输出当前的复选框
            // 通过判断他的length个数执行代码
            if (s.length == 1) {
                // 获取到复选框所在的val值
                var StudentID = s.val();
                // console.log(StudentID);
                // 通过获取到了val值传递给控制器删除数据
                $.post("/AddedSql/deletionStudent?studentID=" + StudentID, function () {

                });
            } else {
                alert("每次只能删除一次学生信息");
            } 
        }

接收方法，通过断点的方法查看是否右数据传递过来，获取到的ID是2

/// <summary>
        /// 接收删除学生信息的ID
        /// </summary>
        /// <param name="studentID">接收删除学生信息的ID</param>
        /// <returns></returns>
        public ActionResult deletionStudent(int studentID) {

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

为了用户体验的更加的完整和严谨性，通过删除之后弹出选择框，如果选择确定我们就执行传递数据删除代码,然后取消我们就不执行

通过接收到的数据学生ID进行删除学生数据：

删除数据的方法如下：

1、通过linq查询ID是否存在

// 先通过ID查询到学生数据
            Student student = (from tbRrmove in myModels.Student
                               where tbRrmove.StudentID == studentID
                               select tbRrmove).Single();

2、通过我们定义查询ID的变量来删除数据

完整代码：

/// <summary>
        /// 接收删除学生信息的ID
        /// </summary>
        /// <param name="studentID">接收删除学生信息的ID</param>
        /// <returns></returns>
        public ActionResult deletionStudent(int studentID) {
            var data = "";
            // 先通过ID查询到学生数据
            Student student = (from tbRrmove in myModels.Student
                               where tbRrmove.StudentID == studentID
                               select tbRrmove).Single();
            // 删除数据
            myModels.Student.Remove(student);
            if (myModels.SaveChanges() > 0) {
                data = "学生数据已删除";
            }
            else {
                data = "学生数据删除失败";
            }
            return Json(data,JsonRequestBehavior.AllowGet);
        }

通过回调函数添加页面刷新效果就完美解决了

总结：

获取数据库表内容：

1、通过linq查询全部字段，暂时学习三种

2、通过声明的变量放回值就好了

新增操作：

1、通过$.get()$.post()等提交方式将获取到的数据提交给控制器

2、控制器通过实例类接收方法，将获取到的方法add添加进数据库

3、必须的一点是，必须要有SaveChanges()

修改操作：

1、将修改之后的值传递给控制器

2、也是通过实例类来接收

3、一共有两种接收方法，一个不用引用类，一个要

4、Entry(传递值).State=EntityState.Modified要

删除操作：

1、先获取到要删除学生的ID

2、通过ID传递给控制器，同时要通过where查询ID是否存在

3、查询时出现三条波浪错误要添加Single()方法

4、删除是Remove(传递的ID)

注意：新增、修改、删除都要用到SaveChanges()

这篇关于右键删除当前学生数据(四)的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！