基于jquery，bootstrap的多选删除功能

news/2024/7/19 15:08:56 标签: 前端, html, js, javaee

html" title=前端>前端死坑
1、a标签跳转页面会请求后台两次

<a href="#" onclick="App.deleteMulti('/user/delete')" type="button" class="btn btn-default btn-sm"><i class="fa fa-trash"></i>删除</>

改为

<button onclick="App.deleteMulti('/user/delete')" type="button" class="btn btn-default btn-sm"><i class="fa fa-trash"></i>删除</button>

2.modal模态框使用
js

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

css

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />

html

<div class="modal fade" id="modal-overlay">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="overlay">
                <i class="fas fa-2x fa-sync fa-spin"></i>
            </div>
            <div class="modal-header">
              <h4 class="modal-title">Default Modal</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <p>One fine body&hellip;</p>
            </div>
            <div class="modal-footer justify-content-between">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
      <!-- /.modal -->

按钮操作模态框

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-default">
                  Launch Default Modal
                </button>

js激活模态框

$("#modal-default").modal("show");

功能实现
app.js

const App = function () {
    //控制全选checkbox
    let master;
    //所有checkbox，不包括master
    let allcheck;
    //存放选中checkbox的id值
    let idArray;
    /**
     * 初始化绑定dom
     */
    const handlerInitCheckbox = function () {
        //获取控制全选按钮
        master = $('input[type="checkbox"]#checkboxMaster');
        //获取全部checkbox集合
        allcheck = $('input[type="checkbox"].check-box');
    };
    /**
     * checkbox全选功能
     */
    const handlerCheckboxAll = function () {
        master.click(function (e) {
            if (e.target.checked) {
                allcheck.prop("checked", true);
            } else {
                allcheck.prop("checked", false);
            }
        });
    };
    /**
     * 批量删除
     */
    const handleerDeleteMulti=function (url) {
        idArray=new Array();
        allcheck.each(function () {
            //得到当前checkbox的id属性的值
            var _id=$(this).attr("id");
            //将选中的id的值放进数组
            if(_id!=null&&_id!="undefine"&&$(this).is(":checked")){
                idArray.push(_id);
            }
        });
        //根据是否有选中值展示不同消息
        if(idArray.length===0){
            $("#modal-message").html("您还没有选择任何数据项，请至少选择一项");
        }
        else
        {
            $("#modal-message").html("您确定删除吗？");
        }
        //展示模态框
        $("#modal-default").modal("show");
        //给确定按钮绑定事件
        $("#btnModalOk").bind("click",function () {
            del();
        });

        /**
         * 当前私有函数的私有函数，删除数据
         */
        function del() {
            //点确定按钮隐藏模态框
            $("#modal-default").modal("hide");
            //如果没有选择数据项就删除模态框
            if(idArray.length===0){
                //..不做处理
            }
            //删除操作
            else {
                setTimeout(function () {
                    $.ajax({
                        "url":url,
                        "type":"POST",
                        "data":{"ids":idArray.toString()},
                        "dataType":"JSON",
                        "success":function (data) {
                            if(data.status===200){
                                window.location.reload();
                            }
                            else
                            {
         // 请求成功后，无论是成功或是失败都需要弹出模态框进行提示，所以这里需要先解绑原来的 click 事件！！！！！
                                $("#btnModalOk").unbind("click");
                                //确定按钮事件绑定为隐藏模态框
                                $("#btnModalOk").bind("click",function () {
                                $("#modal-default").modal("hide");
                                });

                                $("#modal-message").html(data.message);
                                $("#modal-default").modal("show");

                            }
                        }
                    });
                },500)

            }
        }
    };

    return{
        init:function () {
            handlerInitCheckbox();
            handlerCheckboxAll();
        },
        getCheckbox:function () {
            return allcheck;
        },
        deleteMulti:function (url) {
            handleerDeleteMulti(url);
        }
    }
}();
$(document).ready(function () {
    App.init();
});

modal.tag

<%@ tag language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ attribute name="title" type="java.lang.String" required="false" description="模态框的标题"%>
<%@ attribute name="msg" type="java.lang.String" required="false" description="模态框的消息"%>
<div class="modal fade" id="modal-default">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">${title==null? "温馨提示":title}</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p id="modal-message">${msg}&hellip;</p>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="btnModalOk" type="button" class="btn btn-primary">确定</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

user_list.jsp

 <button onclick="App.deleteMulti('/user/delete')" type="button" class="btn btn-default btn-sm"><i class="fa fa-trash"></i>删除</button>
<sys:modal/>
//引入js
<!-- jQuery -->
<script src="../../static/assets/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../../static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../../static/assets/plugins/bootstrap/js/bootstrap.min.js"></script>

UserController

 	@ResponseBody
    @RequestMapping(value = "delete",method = RequestMethod.POST)
    public BaseResult delete(String ids){
    //测试，写死了
        BaseResult baseResult=BaseResult.fail();
        return baseResult;
    }

BaseResult

package top.atpisher.my.shop1.commons.dto;

import java.io.Serializable;

/**自定义返回结果
 * @ClassName: BaseResult
 * @Author: l1957
 * @Date: 2021/4/13 21:07
 * @Description: TODO
 */
public class BaseResult implements Serializable {
    public static final int STATUS_SUCCESS=200;
    public static final int STATUS_FILE=500;

    private int status;
    private String message;

    public static BaseResult success(){
        return createResult(STATUS_SUCCESS, "成功");
    }

    private static BaseResult createResult(int status, String message) {
        BaseResult baseResult = new BaseResult();
        baseResult.setStatus(status);
        baseResult.setMessage(message);
        return baseResult;
    }

    public static BaseResult success(String message){
        return createResult(STATUS_SUCCESS, message);
    }

    public static BaseResult fail(){
        return createResult(STATUS_FILE, "失败");
    }
    public static BaseResult fail(String message){
        return createResult(STATUS_FILE, message);
    }
    public static BaseResult fail(int status,String message){
        return createResult(status, message);
    }

    public int getStatus() {
        return status;
    }

    public void setStatus(int status) {
        this.status = status;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }
}

随便记录一下，有点潦草，主要写给自己看的，还有太晚了该睡觉了，还有html" title=前端>前端真的坑，模态框点击事件那里一定记得先解绑再重新绑定才生效。


http://www.niftyadmin.cn/n/694360.html

相关文章

linux 删除mysql_linux环境安装部署Mysql5.7

linux 删除mysql_linux环境安装部署Mysql5.7

今天&#xff0c;给朋友们介绍Mysql数据库的亲测安装过程&#xff0c;话不多说&#xff0c;开始撸代码、贴图......前言&#xff1a;搭建Mysql数据库&#xff0c;所需要用到的工具、安装包例如&#xff1a;Xshell、FileZilla、mysql5.7.27-linux-64.tar.gz......1、下载安装包我…
阅读更多...
闪耀光栅 (DMD) 的衍射效应

闪耀光栅 (DMD) 的衍射效应

摘要 这篇博客主要介绍DMD作为闪耀光栅的衍射效应。首先我们介绍单缝衍射、多缝衍射和光栅方程&#xff0c;然后讨论闪耀光栅&#xff0c;最后仿真给出不同入射角下的闪耀判据和光栅光谱的二维模拟。 DMD微镜翻转状态 现在wavefront shaping (WFS) 的实验多采用数字微镜阵列…
阅读更多...
win7 sqlyog 连接 ubuntu mysql 10060_win7系统用sqlyog连接ubuntu虚拟机上的mysql数据库

win7 sqlyog 连接 ubuntu mysql 10060_win7系统用sqlyog连接ubuntu虚拟机上的mysql数据库

项目的开发环境是虚拟机的ubuntu系统下用mysql5.1和python2.6进行开发的&#xff0c;客户端是在win7下用的flash。一直以来&#xff0c;操作数据库都是使用的phpmyadmin&#xff0c;周末在家想来以前在windows下使用sqlyog或者heidisql操作是比较好用的&#xff0c;就想配置一下…
阅读更多...
js工具类DataTime

js工具类DataTime

//格式化当前时间 new Date().format("yyyy-MM-dd ") /*** 日期时间工具类* type {{dateFormat}}*/ var DateTime function () {var patterns {PATTERN_ERA: G, // Era 标志符 Era strings. For example: "AD" and "BC"PATTERN_YEAR: y, // 年…
阅读更多...
刷穿LeetCode——Task01

刷穿LeetCode——Task01

前言&#xff1a;本科毕业1年半了&#xff0c;2021年1月份报名了DataWhale组织的LeetCode编程实践&#xff0c;每天3道题&#xff0c;这篇博客记录Task01。 02. 两数相加 给你两个非空的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xff…
阅读更多...
刷穿LeetCode——Task02

刷穿LeetCode——Task02

这篇博客记录第2天解题思路。 07. 整数反转 给出一个 32 位的有符号整数&#xff0c;你需要将这个整数中每位上的数字进行反转。 注意&#xff1a; 假设我们的环境只能存储得下 32 位的有符号整数&#xff0c;则其数值范围为 [−231, 231 − 1]。请根据这个假设&#xff0c;如…
阅读更多...
postman怎么传session_[Python] 用Session()优化requests的性能

postman怎么传session_[Python] 用Session()优化requests的性能

前言只要用python做过一些web开发&#xff0c;多少都用过requests这个模块&#xff0c;简单&#xff0c;方便的HTTP客户端&#xff0c;大家都爱。不过&#xff0c;如果你只是停留在requests.get()或者requests.post()这样的调用层面上&#xff0c;那你的程序跑起来&#xff0c;…
阅读更多...
jsp字段截取

jsp字段截取

<dd><a href"javascript:;" style"color: #555">${fn:substring(novel.description,0,47)}...</a></dd>
阅读更多...
最新文章

Copyright @ 2022~2023