增

抽取模态框页面

<%--User: 24390 Date: 2021/1/18 Time: 22:06--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" isErrorPage="true" %>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Launch demo modal
</button>

<!-- Modal -->
<div id="addModal" class="modal fade"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">彤筹网后台管理角色新增弹窗</h4>
            </div>
            <div class="modal-body">
                <form action="/admin/do/login" method="post" class="form-signin" role="form">
                    <div class="form-group has-success has-feedback">
                        <input type="text" name="roleName" class="form-control" id="inputSuccess1"
                               placeholder="请输入角色名称" autofocus> <span
                            class="glyphicon glyphicon-user form-control-feedback"></span>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">确认新增</button>
            </div>
        </div>
    </div>
</div>

给role-page.jsp的新增按钮添加id，绑定点击事件，以便弹出默认不显示在页面的模态框

// 给查询按钮绑定点击事件
        $("#searchBtn").click(function () {
    
    
            window.keyword = $("#keywordInput").val(); // 获取关键词数据赋值给keyword这个全局变量
            generatePage();// 执行分页函数刷新页面
        });

        // 给新增按钮绑定点击事件，弹出模态框
        $("#showAddModalBtn").click(function () {
    
    
            $("#addModal").modal("show");
        });

点击确认新增，发送ajax请求。
点击保存保存，执行回调函数，去关闭清理模态框，给用户提示结果，最后回到分页页面。
前端：

 $("#saveBtn").click(function () {
    
    
            var roleName = $.trim($("#addModal [name=roleName]").val());// 获取文本框中输入的信息
            $.ajax({
    
    
                url:"role/save.json",
                type:"post",
                data:{
    
    
                    "name":roleName
                },
                dataType:"json",
                success:function (response) {
    
    
                    var result = response.result;
                    if (result == "SUCCESS") {
    
    
                        layer.msg("保存角色成功");
                        window.pageNum = 999;
                        generatePage(); // 将页面定位到最后一页
                    }
                    if (result == "FAILED"){
    
    
                        layer.msg("保存失败");
                    }
                },
                error:function (response) {
    
    
                    layer.msg(response.status+" "+response.statusText);
                }
            });
            $("#addModal").modal("hide"); // 在AJAX请求之后关闭模态框

            $("#addModal [name=roleName]").val(""); // 清理模态框


        });

后端：
handler层

@ResponseBody
    @RequestMapping("/role/save.json")
//    public ResultEntity<String> saveRole(@RequestParam("roleName") String roleName){
    
    
    public ResultEntity<String> saveRole(Role role){
    
    
        roleService.saveRole(role);
        return ResultEntity.successWithoutData();
    }

service层

@Override
    public int saveRole(Role role) {
    
    
        return roleMapper.insert(role);
    }

改

抽取模态框代码到modal-role-add.jsp页面
给role-page.jsp中的修改按钮绑定点击事件。注意：这里的修改按钮由服务器传来的json数据批量动态生成，需要用到特殊的绑定点击事件js代码 :on

// 给修改笔按钮设置class名、当前roleId传给修改笔的id，以便获取实时id
var pencilBtn = "<button id='"+roleId+"' type=\"button\" class=\"btn btn-primary btn-xs pencilBtn\"><i class=\" glyphicon glyphicon-pencil\"></i></button>";

回显数据，使用dom操作拿到json数据中的某些数据

// 首先找到所有动态生成的元素所附着的 静态 父类元素
        // on函数的第一个参数是 事件类型，第二个参数是 找到真正绑定事件的元素选择器，第三个参数是响应函数
        $("#role-page-body").on("click",".pencilBtn",function () {
    
    
            $("#editModal").modal("show");
            var roleName = $(this).parent().prev().text();
            // 为了让直行更新的按钮能够获取到roleId的值，把它放在全局变量中
            window.roleId = this.id;
            // 回显
            $("#editModal [name=roleName]").val(roleName);
        });

对确认更改按钮绑定点击事件，后发送ajax请求获取输入信息去数据库更新

$("#updateRoleBtn").click(function () {
    
    
            var NewroleName = $("#editModal [name=roleName]").val();// 从文本框中获取用户更改后的角色名称
            $.ajax({
    
    
                url:"role/update.json",
                type:"post",
                data:{
    
    
                    "id":window.roleId,
                    "name":NewroleName
                },
                dataType: "json",
                success:function (response) {
    
    
                    layer.msg("更改成功");
                    generatePage();
                },
                error:function (response) {
    
    
                    layer.msg("更改失败:"+response.statusText)

                }
            });
            // 最后都关闭模态框
            $("#editModal").modal("hide");
        });

handler层

@ResponseBody
    @RequestMapping("/role/update.json")
    public ResultEntity<String> updateRole(Role role){
    
    
        roleService.updateRole(role);
        return ResultEntity.successWithoutData();
    }

service层

@Override
    public int updateRole(Role role) {
    
    

        return roleMapper.updateByPrimaryKey(role);
    }

删（批量单个二合一）

目标：单条和批量删除合并同一操作，单条删除时所删除选项的id也放在数组中，后端全部根据数组删除。

handler层

@ResponseBody
    @RequestMapping("/role/delete/by/role/id/array.json")
    public ResultEntity<String> removeByRoleIdArray(@RequestBody List<Integer> roleIdList){
    
    
        roleService.removeRole(roleIdList);
        return ResultEntity.successWithoutData();
    }

service层

@Override
    public void removeRole(List<Integer> roleIdList) {
    
    
        RoleExample roleExample = new RoleExample();
        roleExample.createCriteria().andIdIn(roleIdList); // delete from t_role where id in(1,2,3)
        roleMapper.deleteByExample(roleExample);
    }

无论点击批量、单一删除按钮，均打开模态框确认，对确认按钮绑定点击事件，使用全局变量window.roleArray去给发送ajax请求删除，后续操作。（封装）

// 询问删除 模态框
function showConfirmModal(roleArray) {
    
    
    $("#confirmModal").modal("show");
    $("#roleNameSpan").empty(); // 清除旧数据

    // 在全局变量范围创建数组用来存放角色id
    window.roleIdArray = [];
    // 遍历roleArray数组
    for (var i = 0; i < roleArray.length; i++) {
    
    
        var role = roleArray[i];
        var roleName = role.roleName;
        $("#roleNameSpan").append(roleName+"<br/>")

        var roleId = role.roleId;
        // 调入数组对象的push方法存入元素
        window.roleIdArray.push(roleId);
    }

获取当前所选角色的id

for (var i = 0; i < pageInfo.list.length; i++) {
    
    
        var role = pageInfo.list[i];
        var roleId = role.id;

        var removeBtn = "<button id='"+roleId+"' type=\"button\" class=\"btn btn-danger btn-xs removeBtn\"><i class=\" glyphicon glyphicon-remove\"></i></button>";

点击单条删除按钮绑定特殊的点击事件，使用on函数，前提去my-role.js的fillTableBody()方法中添加动态生成的单一删除按钮class样式，通过此class绑定点击事件。之后再调用showConfirmModal()方法打开确认删除提示的模态框
点击单条删除按钮弹出模态框

$("#role-page-body").on("click",".removeBtn",function () {
    
    
            // 从当前按钮出发获取角色的名称
            var roleName = $(this).parent().prev().text();
            // 创建role对象存入数组
            var roleArray = [{
    
    
                roleId:this.id,
                roleName:roleName
            }]
            showConfirmModal(roleArray);
        })

点击确定删除按钮，发送ajax请求，删除后关闭模态框回到分页数据页面。至此单个删除功能完毕。

$("#removeRoleBtn").click(function () {
    
    
            var requestBody = JSON.stringify(window.roleIdArray); // 从全局变量范围获取到角色id数组，转换为json字符串
            $.ajax({
    
    
                url:"/role/delete/by/role/id/array.json",
                type:"post",
                data:requestBody,
                contentType:"application/json;charset=UTF-8",
                dataType:"json",
                success:function (response) {
    
    
                    var result = response.result;
                    if (result == "SUCCESS"){
    
    
                        layer.msg("删除成功")
                        generatePage();
                    }
                    if (result == "FAILED"){
    
    
                        layer.msg("删除失败:"+response.message)
                    }
                },
                error:function (response) {
    
    
                    layer.msg(response.status+" "+response.statusText);

                }
            });
            $("#confirmModal").modal("hide");
        });

批量删除。全选全不选功能

// 全选/全不选的点击事件
        $("#summaryBox").click(function () {
    
    
            var currentStatus = this.checked;// 获取当前多选框自身的状态
            // 用当前多选框去设置其他多选框
            $(".itemBox").prop("checked",currentStatus);
        });

        // 全选/全不选反向操作
        $("#role-page-body").on("click",".itemBox",function () {
    
    
            // 获取当前已经选中的itemBox数量
            var checkedBoxCount = $(".itemBox:checked").length;
            var totalBoxCount = $(".itemBox").length;
            $("#summaryBox").prop("checked",checkedBoxCount==totalBoxCount)
        });

点击批量删除按钮，弹出模态框并显示当前所选项的信息

$("#batchRemoveBtn").click(function () {
    
    
            var roleArray = []; // 创建数组对象，用来存放

            // 遍历当前正选中的多选框
            $(".itemBox:checked").each(function () {
    
    
                // 使用this引用
                var roleId = this.id;
                // 通过dom操作获取角色名称
                var roleName = $(this).parent().next().text();
                roleArray.push({
    
    
                    roleId:roleId,
                    roleName:roleName
                });
            });
            if (roleArray.length == 0 ){
    
    
                layer.msg("请至少选择一个执行批量删除");
                return;
            }

            showConfirmModal(roleArray);
        });

点击确认删除按钮，向服务器发送同单一删除一样的ajax请求

彤筹网ssm（二）Day07之增删（单一+批量二合一）改（先回显）

增

改

删（批量单个二合一）

猜你喜欢