批量删除和全选/全不选

最新推荐文章于 2024-05-06 11:22:20 发布
最新推荐文章于 2024-05-06 11:22:20 发布
阅读量559 收藏 5
点赞数 1
分类专栏： javaweb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45142791/article/details/103380431
版权

全选与全不选

1.使用bootStrap构建页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    pageContext.setAttribute("PATH",request.getContextPath());
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>employee</title>

    <!-- Bootstrap -->
    <link href="${
   PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="${
   PATH}/static/js/jquery-3.4.1.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="${
   PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

</head>
<body>

<!--模态框修改员工信息 -->
<div class="modal fade" id="empUpdateModal" 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 class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">empId</label>
                        <div class="col-sm-10">
                            <input type="text" name="empId" class="form-control" id="empId_input" placeholder="empId">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="empName_input"  class="col-sm-2 control-label">empName</label>
                        <div class="col-sm-10">
                            <input type="text" name="empName" class="form-control" id="empName_input" placeholder="empName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="empAge_input"  class="col-sm-2 control-label">empAge</label>
                        <div class="col-sm-10">
                            <input type="text" name="empAge" class="form-control" id="empAge_input" placeholder="empName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="empAddress_input"  class="col-sm-2 control-label">empAddress</label>
                        <div class="col-sm-10">
                            <input type="text" name="empAddress" class="form-control" id="empAddress_input" placeholder="empAddress">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="empHiredate_input"  class="col-sm-2 control-label">empHiredate</label>
                        <div class="col-sm-10">
                            <input type="text" name="empHiredate" class="form-control" id="empHiredate_input" placeholder="empHiredate">
                        </div>
                    </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" id="emp_update_btn">更新</
最低0.47元/天 解锁文章
qq_45142791
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap实现表格复选框全选
nosayno的博客
04-06 1万+
最近在做一个后台页面，全部使用的Bootstrap，在此记录一下全选单选的做法。 效果图： 主要代码如下（正常表格布局）： $(function(){               function initTableCheckbox() {                   var $thr = $('table thead tr');                   v
bootstrap_下拉框筛选
08-19
基于bootstrap的下拉框筛选，数据导入下拉框后，可输入数据查找筛选
Bootstrap-table 表头筛选控件
Moxice的博客
11-18 1万+
Bootstrap-table 表头筛选控件,根据Bootstrap-table API,在表头添加筛选排序，支持文本搜索，数值搜索，日期搜索，单选和复选。 依赖js jQuery,Bootstrap,Bootstrap-table,select2 筛选类型说明 1. 文本类型（text） 提供模糊搜索功能，根据输入的参数模糊匹配返回对应的结果 2. 数值类型(num) 提供区间搜索功能，所搜列必须为数值，可以搜索最小值和最大值之间的结果，也可以搜索所有大于最小值或小于最大值的结果。
笔记本电脑怎么多选删除文件？误删除文件怎么办
最新发布
yqssjhf的博客
05-06 1676
在日常使用笔记本电脑中，我们可能会遇到需要删除大量文件的情况，例如清理临时文件、整理文档或卸载不再需要的程序。手动一个一个地删除不仅效率低下，还可能遗漏某些文件。那么，如何在笔记本电脑上高效地进行多选删除操作呢？本文将为您详细介绍几种实用的方法，以及分享笔记本电脑误删除文件恢复方法。
Bootstrap-table方法之：showColumn/hideCoulumn显示或隐藏指定数据
很努力的恺恺
07-07 1583
最近公司要求比较恶心,为什么这么说呢,给我一个前端的需求来让我做,却是很难,也很恶心,而且我也找了公司前端的高手,最后还是解决了. 接下来说一下我是怎么做的。 需求就是我的展示列表是有一些是默认选中的,不让勾选:如图: 然后就是js代码解决问题 onColumnSwitch: function (field, checked) { $('.dropdown-menu .dropdown-item').each((index,item)=>{ ..
bootstraptable 全部取消选中_Excel快速合并、取消合并单元格
weixin_42626599的博客
01-12 395
合并单元格是工作中经常用到的一种数据处理，那么如何快速合并、取消合并单元格呢？下面我对我常用的进行总结。一、快速合并单元格对以下数据部门进行快速合并单元格1、选中数据，点击菜单栏中的数据-分类汇总，分类字段：部门；汇总方式：小计；汇总项：编号（可以选择除了要合并单元格列的任意一列作为汇总项）2、确定3、复制编号列内容到另一空白列中3、对刚刚复制的列内容选中（标题不选）4、选择菜单栏中开始-查找与选...
批量删除和全选全不选jq
qq_36358709的博客
07-02 294
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
JS实现复选框的全选和批量删除功能
01-19
如图示： 功能描述：在勾选了全选时，所有的商品都会勾选，... 全选/全不选 </td> //全选 function ckAll(){ var flag=document.getElementById(allChecks).checked; var cks=document.getElementsByName(check);
javaScript checkbox 全选/反选及批量删除
10-29
javaScript checkbox 全选/反选及批量删除实现代码，需要的朋友可以参考下。
人性化实现全选全不选增添删除
03-17
在IT领域，尤其是在开发用户界面时，"人性化实现全选全不选增添删除"功能是一项常见且重要的需求。这个功能通常应用于数据列表的批量操作，比如电商应用中的购物车、文件管理器或任何需要批量处理项目的场景。在这个...
jQuery实现全选、反选和不选功能
10-19
在网页开发中，常常需要实现全选、反选和不选的功能，尤其是在涉及多选操作的场景，例如批量删除、批量修改等。以下是如何使用jQuery实现这些功能的详细说明： 1. **全选/全不选** 当用户点击全选按钮（`#select...
Java项目之使用Bootstraptable批量操作
weixin_44538469的博客
05-16 617
Java项目之使用Bootstraptable批量操作 开发工具与关键技术：IntelliJ IDEA java 作者：刘剑鸿 撰写时间：2021/5.15 一开始认识一下bootstrap-table插件介绍。它是一个基于bootstrap样式的表格组件，可以通过简单的配置，即可以动态生成表格，从而方便使用。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210516194357390.png?x-oss-process=image/water...
Angularjs bootstrap table多选（全选），支持单击行选中
热门推荐
cayre的专栏
12-27 1万+
最终实现效果： index.html<!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8
bootstrap-table全选当前页所有数据checkAll
csdnluolei
01-25 6816
 业务场景：客户之前要求将选中的样品的起始时间改为一样，现在改为默认改为修改当前页的所有数据 $table.bootstrapTable('checkAll'); $table.bootstrapTable('uncheckAll'); 全选中或反选中当前数据页所有行，选中的只是当前页的所有数据，并不是数据表的所有数据。 官方例子 https://examples.bootstrap-ta...
BootstrapTable如何批量操作多行
sinat_38818576的博客
12-19 2881
转载：https://blog.csdn.net/qq_42149844/article/details/80404211 1、在BootstrapTable初始化表格时，在表格columns加上checkbox：true,这样第一列就是一个复选框。var $table = $('#table'); $...
Bootstrap Table批量添加，删除行
CiCi_alice的博客
08-29 1641
Bootstrap Table批量添加，删除行 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
fastAdmin的bootstrap-table表格批量操作按钮（获取当前选中的数据）
ladical的博客
02-13 8488
fastAdmin的bootstrap-table表格批量操作按钮（获取当前选中的数据） 一、代码如下 //点击全选框时触发的操作 onCheckAll:function(row){ var checkedbox= $("#table").bootstrapTable('getSelections'); //获取选中的数据 }, //取消所有 onUncheckAl...
Bootstrap Table批量（全选）删除
祈澈菇凉
03-13 7432
Bootstrap Table批量（全选）删除，类似以下这样： 思路 1:jsp页面，删除按钮 <div class="mytab"> <table id="mytab" class="table table-hover"></table> </div> 2：在columns里面，check...
java页面搜索栏有商品Id（精确查询），商品名称（模糊查询），搜索商品按钮，下方为表格，最前方为全选/全不选cherkbox，商品id，商品类别，类别名称，操作（删除，最下方为批量删除），数据库里面有product包括pid，pname，pimage，shop_price，category里面有cid和cname（类别名称），勾选复选框，下方会出现商品Id,商品图片，商品价格
06-09
好的，您的问题是关于Java页面搜索栏和表格的内容和功能。根据您的描述，页面中包括一个搜索栏和一个表格。搜索栏包括商品Id（精确查询）和商品名称（模糊查询）两个输入框，以及一个搜索商品按钮。表格中包括全选/全不选的复选框、商品id、商品类别、类别名称和操作（删除），以及最下方的批量删除按钮。 在数据库中，有一个product表，包括pid、pname、pimage、shop_price四个字段，以及一个category表，包括cid和cname两个字段。在页面中，勾选复选框后，下方会显示商品Id、商品图片和商品价格。 希望我的回答能够帮助您解决问题。如果您有其他问题，请随时提出。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值