bootstrap-table按住Shift多选设计思路-优化

2023-11-15

在网上找到bootstra-table按住shift实现多选的思路后,进行改进,实现批量选中/批量取消选中,批量选中后取消部分选中并保留剩下选中项,向上/向下批量操作。
参考地址:https://blog.csdn.net/qq_36360308/article/details/115604059

// 按住shift一次选中多个数据行实现批量选中/批量取消选中
    function shiftMultiSelectTableRows(){
        // shift多选
        let mode = ""; // 模式:批量选中/批量取消选中
        let type = ""; // 当前选中行的操作类型:选中/取消选中
        let lastStart = null; // 上一次记录的起点
        let lastEnd = null; // 上一次记录的终点
        let nowEnd = null; // 批量选中后部分取消时,记录的实际选中项的终点
        let flag = true;

        $(document).on("change", ".bs-checkbox input", function(e) {
            if(mode == ""){
                if($(this).is(':checked') && flag) mode = "batchCheck";
                if(!$(this).is(':checked') && flag) mode = "batchUncheck";
            }

            if(mode == "batchCheck"){
                if ($(this).is(':checked') && flag){
                    type = "check";
                    if (lastEnd != null) lastStart = lastEnd;
                    lastEnd = $(this).attr("data-index");

                }else if (!$(this).is(':checked')){
                    type = "uncheck";
                    nowEnd = $(this).attr("data-index");
                }

            }else if(mode == "batchUncheck"){
                if (!$(this).is(':checked') && flag){
                    type = "uncheck";
                    if (lastEnd != null) lastStart = lastEnd;
                    lastEnd = $(this).attr("data-index");
                }
            }
        });

        //让上面方法先执行完
        $(document).mousedown(function(e) {
            if (e.shiftKey) {
                setTimeout(function (){
                    if(mode == "batchCheck"){
                        if(type == "check"){
                            if (lastStart != null && lastEnd != null){
                                let agentNum = null; // 中间变量,支持向上/向下批量选择
                                if(lastStart > lastEnd){
                                    agentNum = lastStart;
                                    lastStart = lastEnd;
                                    lastEnd = agentNum;
                                }
                                flag = false;
                                for(let i = parseInt(lastStart)+1;i<parseInt(lastEnd);i++){
                                    if(!$("input[data-index='"+i+"']").is(":checked")) $("input[data-index='"+i+"']").trigger("click");
                                }
                                flag = true;
                            }
                        }else if(type == "uncheck"){
                            if (nowEnd !=null && lastEnd != null){
                                flag = false;
                                for(let i = parseInt(nowEnd)+1;i<=parseInt(lastEnd);i++){
                                    if($("input[data-index='"+i+"']").is(":checked")) $("input[data-index='"+i+"']").trigger("click");
                                }
                                flag = true;
                            }
                            lastEnd = null;
                        }
                    }else if(mode == "batchUncheck"){
                        if(type == "uncheck"){
                            if (lastStart != null && lastEnd != null){
                                let agentNum = null; // 中间变量,支持向上/向下批量选择
                                if(lastStart > lastEnd){
                                    agentNum = lastStart;
                                    lastStart = lastEnd;
                                    lastEnd = agentNum;
                                }
                                flag = false;
                                for(let i = parseInt(lastStart)+1;i<parseInt(lastEnd);i++){
                                    if($("input[data-index='"+i+"']").is(":checked")) $("input[data-index='"+i+"']").trigger("click");
                                }
                                flag = true;
                            }
                        }
                    }
                },250)
            }
        });

        $(document).mouseup(function (e) {
            if(!e.shiftKey){
                // 还原
                lastStart = null;
                lastEnd = null;
                nowEnd = null;
                type = "";
                mode = "";
                flag = true;
            }
        })
    }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

bootstrap-table按住Shift多选设计思路-优化 的相关文章

随机推荐

  • vscode 终端 npm 命令运行时 自动弹出如何打开这个文件?

    解决
  • wireshark数据包分析实战 读书笔记

    由头 永久链接 之前读了很多书籍 但是现在回顾的时候 很多内容仅仅是熟悉 而不是真正掌握 所以尝试一种新的方式 将读书时觉得比较重要的 或者是自己还不理解的东西记录下来 达到这本书我已经不需要再去翻 只要看笔记即可的效果 第一章 数据包分析
  • sql语句查询A表有而B表没有的数据

    SELECT A 户名FROM TABLE A A TABLE B BWHERE A 户名 B 户名 WHERE B 户名 IS NULL 还可以有其他方法 1 select distinct A ID from A where A ID
  • ps多种去水印方法与技巧-适合各种水印

    ps作为一款功能强大的图片处理软件 有着丰富的功能 ps去水印也是我们常用的一种功能 但是在我们日常使用中遇到的水印千奇百怪 不同的水印就需要使用不同的去水印方法 方法一 ps内容识别去水印 1 套索工具圈出水印 2 选择 编辑 填充 内容
  • 深度学习中的优化算法之Adam

    之前在https blog csdn net fengbingchun article details 124909910 介绍过深度学习中的优化算法Adadelta 这里介绍下深度学习的另一种优化算法Adam 论文名字为 ADAM A M
  • 在linux中怎么查看错误日志

    在linux中怎么查看错误日志 cat或者tail f命令日 志 文 件 说 明 var log message 系统启动后的信息和错误日志 是Red Hat Linux中最常用的日志之一 var log secure 与安全相关的日志信息
  • Arthur and Table 【CodeForces - 557C】【Splay】

    题目链接 有一张桌子 有n个腿 第i根腿的长度是li 现在要拿掉一些腿 使得桌子稳定 拿掉第i根腿需要di的能量 稳定的条件是 假如拿掉若干条腿之后 桌子还有k个腿 那么长度最长的腿的数目要超过一半 比如桌子有5根腿 那么至少要有三根腿是最
  • 2016年终总结与来年计划

    光阴似箭 日月如梭 眨眼间已到年底 今年感慨颇丰 获益良多 因为我认为努力了就肯定会有收获 哪怕是收获那一滴滴辛勤的汗水 我在公司任务轻松时 加了些前端群 重点推荐豪情群 在群里分享技术以及生活的点滴 同时认识了一些志同道合的朋友 有大牛建
  • C/C++: 生成不重复的一组随机数

    在程序编写过程中 很多情况下回用到随机数 然而单纯的随机数不能保证每一次的数据都不同 下面方法返回一组不重复的数据 1 方法 随机一组数据 std vector
  • 432. 全 O(1) 的数据结构

    题目 请你设计一个用于存储字符串计数的数据结构 并能够返回计数最小和最大的字符串 实现 AllOne 类 AllOne 初始化数据结构的对象 inc String key 字符串 key 的计数增加 1 如果数据结构中尚不存在 key 那么
  • kubernetes最佳实践(二) - dashboard ui和heapster监控部署

    前言 本章节主要包行两个部分 官方dashboard部署 版本是1 6 3 1 5 0我也试过成功的 给dashboard加上仪表盘监控 我们安装heapster为dashboard安装统计功能和仪表盘 如下图 1 安装dashboard
  • kubeadm搭建k8s高可用集群(keepalived+nginx+3master)

    目录 前言 服务器准备 架构讲解 环境初始化 安装keepalived软件 安装nginx软件 初始化k8s节点 安装docker 初始化master01节点的控制面板 master02 master03节点加入集群 node01 node
  • Java中进行H264数据的I帧判断

    要判断从编码器中获取到的一帧Byte数组是I帧还是P帧 首先需要了解H264数据的基本格式 I帧 帧内编码 P帧 前向预测编码 与前一个I帧比较差异 B帧 双向预测编码 与前后帧比较差异 H264流 首帧数据为SPS和PPS 后面为IPPP
  • 旅行售货员问题-回溯法

    排列树问题 问题描述 某售货员要到若干城市去推销商品 已知各城市之间的路程 旅费 他要选定一条从驻地出发 经过每个城市一遍 最后回到驻地的路线 使总的路程 总旅费 最小 输出结果
  • Android傻瓜式脚本录制

    网易游戏的AirtestIDE是目前比较优秀的脚本录制工具 它不需要手机ROOT 也不需要其他的任何操作 直接普通的手机就可以在线调试 执行脚本 而且支持跨平台 也就是说PC WEB IOS它一样行 如上图 Airtest 是图像匹配的方式
  • 解决goland代码全部莫名报错 找不到依赖的问题

    我遇到的问题是 代码在一台电脑上完全能够运行 切到另一台电脑 git pull之后 代码依旧能运行 但goland识别到依赖全部报错 找不到各种依赖 go mod download未能解决问题 因为代码能跑 说明第三方包都安装了 解决方案
  • matlab实现RCNN(二)

    本文在MatlabR2016b上使用自带的深度学习工具实现RCNN来进行车辆检测 实验环境 训练图片数量 825 网上收集 部分公共数据集 图片车辆数量 2300 对每张图片手工标注label得到 实验环境 MatlabR2016b 自带深
  • Matlab实现自适应动态规划多层神经网络的算例汇总

    使用MATLAB实现自适应动态规划 ADP 多层神经网络的算例 包括扭摆系统 仿射非线性算例以及 质量 弹簧 阻尼 系统 扭摆系统 torsional pendulum system 文献出处 1 Liu D Wei Q Policy It
  • 大数据模型部署思路

    提出问题 以神经网络为例 MATLAB可以用训练集来训练数据 随后用测试集来检测模型准确度 最后用该模型来决策新数据 在大数据平台下如何训练数据呢 又如何用训练好的模型对新数据进行决策呢 方法1 spark自带机器学习库mlib 用原生机器
  • bootstrap-table按住Shift多选设计思路-优化

    在网上找到bootstra table按住shift实现多选的思路后 进行改进 实现批量选中 批量取消选中 批量选中后取消部分选中并保留剩下选中项 向上 向下批量操作 参考地址 https blog csdn net qq 36360308