03——BootStrap之CRUD（静态页面）

最新推荐文章于 2022-04-10 16:43:26 发布
最新推荐文章于 2022-04-10 16:43:26 发布
阅读量1k 收藏 2
点赞数
分类专栏： BootStrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Frank_cxx/article/details/74561703
版权

工程如下：

其中jquery插件用的是jquery-1.10.1.js的版本

其中bootstrap插件用的是bootstrap-3.3.7的版本


index.jsp代码

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <!-- 引入bootstrap的css样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<!-- 引入jquery -->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-1.10.1.js"></script>
<!-- 引入bootstrap的js文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
  $(function(){
      //对新增按钮绑定事件
    $("#addEmpBtn").click(function(){
  //打开新增用的模态框
  $("#addModal").modal("show");
  });
 
  //对删除按钮绑定事件
  $(".deleteUserBtn").click(function(){
  //删除的模态框
  $("#delModal").modal("show");
  });
 
  //对修改按钮绑定事件
  $(".updateUserBtn").click(function(){
 
  var user=$(this).parent().parent();
  var id=$(user).find("td:eq(1)").text().trim();
  var name=$(user).find("td:eq(2)").text().trim();
  var pwd=$(user).find("td:eq(3)").text().trim();
  var gender=$(user).find("td:eq(4)").text().trim();
  var age=$(user).find("td:eq(5)").text().trim();
  var department=$(user).find("td:eq(6)").text().trim();
 
  $("#updateModal input[name=id]").val(id);
  $("#updateModal input[name=name]").val(name);
  $("#updateModal input[type=password]").val(pwd);
  $("#updateModal input[name=age]").val(age);
  $("#updateModal select").val(department);
  if( gender=='男'){
  $('#updateModal  input:radio:first').prop('checked', 'checked');
  }else{
  $('#updateModal   input:radio:last').prop('checked', 'checked');
  }
  $("#updateModal").modal("show");
  });
 
  //全选  
  $("#a").click(function(){
  var s=this.checked;
  $(":checkbox[name='items']").prop("checked",s);
  });
 
 
 
  });
</script>
  </head>


  <body>
 
  <div class="container">
     <div class="row">
     <div class="col-md-6 col-md-offset-4">
         <h1>遍历界面</h1>
     </div>
     </div>
   <div class="row">
   
      <div class="col-md-2 col-md-offset-1">
        <button   class="btn btn-danger btn-lg deleteUserBtn">
        <span class="glyphicon glyphicon-user" aria-hidden="true"></span>批量删除</button>
    </div>  
   <div class="col-md-2 col-md-offset-5">
     <button  id="addEmpBtn" class="btn btn-success btn-lg">
     <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加</button>
   </div>
  
  </div>
 <div class="row">
    <div class="col-md-10 col-md-offset-1">
<table class="table  table-hover">     
<tr class="success">
<td><input type="checkbox"  id='a' /></td>
          <td>#</td>
          <td>name</td>
          <td>pwd</td>
          <td>gender</td>
          <td>age</td>
          <td>department</td>
          <td>操作</td>
     </tr>
    <tr>
    <td><input type="checkbox"  name="items" /></td>
       <td>1</td>
       <td>张三</td>
       <td>111</td>
       <td>男</td>
       <td>11</td>
       <td>销售部</td>
       <td><button  class="btn btn-danger deleteUserBtn"><span class="glyphicon glyphicon-trash" ></span> 删除</button>|<button class="btn btn-primary updateUserBtn"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改</button></td>
    </tr>
     <tr>
     <td><input type="checkbox"  name="items" /></td>
       <td>1</td>
       <td>李四</td>
        <td>222</td>
       <td>女</td>
       <td>12</td>
       <td>生产部</td>
       <td><button  class="btn btn-danger deleteUserBtn"><span class="glyphicon glyphicon-trash" ></span> 删除</button> | <button class="btn btn-primaryupdateUserBtn"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改</button></td>
    </tr>
 <tr>
 <td><input type="checkbox"  name="items" /></td>
       <td>2</td>
       <td>王五</td>
        <td>333</td>
       <td>男</td>
       <td>12</td>
       <td>生产部</td>
       <td><button  class="btn btn-danger deleteUserBtn"><span class="glyphicon glyphicon-trash" ></span> 删除</button> | <button class="btn btn-primaryupdateUserBtn"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改</button></td>
    </tr>
 
  <tr>
  <td><input type="checkbox"  name="items" /></td>
       <td>3</td>
       <td>Frank</td>
        <td>444</td>
       <td>男</td>
       <td>12</td>
       <td>生产部</td>
       <td><button  class="btn btn-danger deleteUserBtn"><span class="glyphicon glyphicon-trash" ></span> 删除</button> | <button class="btn btn-primaryupdateUserBtn"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改</button></td>
    </tr>
 </table>
 </div>
  </div>
   </div>
  <!--  第一是 .modal，用来把 <div> 的内容识别为模态框。
        第二是 .fade class。当模态框被切换时，它会引起内容淡入淡出。
  aria-labelledby="myModalLabel"，该属性引用模态框的标题。
   属性 aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。
   <div class="modal-header">，modal-header 是为模态窗口的头部定义样式的类。
   class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。
   data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
    class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。
    class="modal-footer"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。
    data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口 -->
   
  <!-- 修改模态框（Modal） -->
   <div class="modal fade" id="updateModal"tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        <!--标题部分 -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">修改User
                <span class="glyphicon glyphicon-user"></span>
                </h4>
            </div>
            <!--写入编码 -->
            <div class="modal-body">
            <form class="form-horizontal">
<div class="form-group">
<label for="inputId" class="col-sm-2 control-label">编号</label>
<div class="col-sm-6">
<input type="number" disabled="disabled" class="form-control" id="inputId"
name="id" placeholder="请输入员工编号">
</div>
</div>
            
<div class="form-group">
<label for="inputName" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputName"
name="name" placeholder="请输入员工姓名">
</div>
</div>
<div class="form-group">
<label for="inputPwd" class="col-sm-2 control-label">密码</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="inputPwd"
name="password" placeholder="请输入员工密码">
</div>
</div>
<div class="form-group">
<label for="inputGender" class="col-sm-2 control-label">性别</label>
<div class="col-sm-6">
<label class="radio-inline"> 
<input type="radio" name="gender" value="男" > 男 </label> 
<label class="radio-inline"> <input type="radio" name="gender"
value="女"> 女 </label>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">年龄</label>
<div class="col-sm-6">
<input type="number" class="form-control" id="inputAge"
name="age" placeholder="请输入员工年龄">
</div>
</div>


<div class="form-group">
<label for="inputDep" class="col-sm-2 control-label">所属部门</label>
<div class="col-sm-3">
<select class="form-control" id="select" name="dId">
<option value="销售部">销售部</option>
<option value="生产部">生产部</option>
<option value="人事部">人事部</option>
</select>
</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">修改</button>
</div>
</div>
</div>
</div>  
   
 
   
    <!-- 删除模态框（Modal） -->
<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">删除User
                <span class="glyphicon glyphicon-user"></span>
                </h4>
            </div>
            <div class="modal-body">
            <h3>是否删除?</h3>     
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger">删除</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>  
   
   
    <!-- 添加模态框（Modal） -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">添加User
                <span class="glyphicon glyphicon-user"></span>
                </h4>
            </div>
            <div class="modal-body">
            <form class="form-horizontal">
<div class="form-group">
<label for="inputName" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputName"
name="name" placeholder="请输入员工姓名">
</div>
</div>
<div class="form-group">
<label for="inputPwd" class="col-sm-2 control-label">密码</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="inputPwd"
name="password" placeholder="请输入员工密码">
</div>
</div>
<div class="form-group">
<label for="inputGender" class="col-sm-2 control-label">性别</label>
<div class="col-sm-6">
<label class="radio-inline"> 
<input type="radio" name="gender" value="男" checked> 男 </label> 
<label class="radio-inline"> <input type="radio" name="gender"
value="女"> 女 </label>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">年龄</label>
<div class="col-sm-6">
<input type="number" class="form-control" id="inputAge"
name="age" placeholder="请输入员工年龄">
</div>
</div>


<div class="form-group">
<label for="inputDep" class="col-sm-2 control-label">所属部门</label>
<div class="col-sm-3">
<select class="form-control" name="did">
<option value="销售部">销售部</option>
<option value="生产部">生产部</option>
<option value="人事部">人事部</option>
</select>
</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-success"><span class="glyphicon glyphicon-plus"></span>保存</button>
</div>
</div>
</div>
</div>
          
         
 </body>
</html>
Frank_cxx
关注
专栏目录
【Node.js】学习node基础及其应用——学生管理系统（以文件的形式实现增删改查CRUD）
29的博客
02-07 847
后台管理系统（增删改查）——CRUD by Express 下载运行 git clone https://github.com/hcq29/Learning-Node.js.git cd Learning-Node.js git checkout crud node app.js 前期准备 安装配置 mkdir crud-express cd crud-express/ npm init P...
SSM框架+bootstrap+PageHelper分页
qq_44926571的博客
02-21 251
SSM框架搭建，点击这里 PageHelper的使用 第一步、导包（或者导入坐标） <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>5.1.2</version> </dependency> 第二步、配置到spring 和mybait 整合的配置文件中 &lt
由Bootstrap设计的静态页面
05-10
主要用Bootstrap和Dreamweaver设计了一个登陆的静态页面
使用bootstrap-table简化CRUD
weixin_34349320的博客
09-22 393
1. 引入bootstrap-table资源包, 页首引用css, 页脚引用js 2. table 参数说明 data-toggle="table" data-toolbar="#toolbar" //指定关联的toolbar div id data-show-refresh="true" data-show-...
利用bootstrap模态框实现简单的CRUD
唐昊
05-03 243
资源下载：点击 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <script type="text/javascript" src="js/jquery-3.4.1.js">
bootstrap以列表展示数据并实现CRUD
chenguixu的博客
06-25 4343
先上效果图 jsp页面代码： <html> <head> <base href="<%=basePath%>"> <link href="<%=request.getContextPath() %>/js/bootstrap/bootstrap.min.css" rel="styl...
bootstrap静态登入页面
02-12
使用bootstrap制作的静态页面，界面简单简洁，支持自适应，采用的是bootstrap3以上的版本
Bootstrap后台管理框架（静态页面）
04-23
漂亮后台管理界面框子，简洁响应式的Bootstrap后台管理系统模板，下载下来可以很快的通过它，搭建起你的后台管理系统的界面
springboot+mybatis+bootstrap整合的简单框架
10-11
本项目"springboot+mybatis+bootstrap整合的简单框架"旨在提供一个快速开发的解决方案，将三个流行的开源技术——Spring Boot、MyBatis和Bootstrap融合在一起，以简化Web应用的构建过程。 Spring Boot是由Pivotal...
ASP.NET源码——[电子商务]快乐商城全站源码.zip
10-10
本源码包"ASP.NET源码——[电子商务]快乐商城全站源码.zip"包含了一个完整的电子商务网站项目，名为"电子商务]快乐商城全站源码_happyshop"，这是一个典型的ASP.NET MVC（Model-View-Controller）架构的应用。...
ssm-crud 用ssm+bootstrap+ajax实现增删改查
04-29
配套视频可在腾讯课堂免费观看，尚硅谷ssm整合
Bootstrap开发的一个静态网页模板(带后台)
11-09
Bootstrap开发的一个静态网页模板(带后台),有资讯,android源码分享,后台等一些模块。
SSM整合实现CRUD+Bootstrap源码
12-21
SSM整合实现CRUD+Bootstrap源码
一套很酷的bootstrap后台管理系统静态页面
04-28
一套很酷的bootstrap后台管理系统静态页面
bootstrap的整套框架的html静态页面示例集合
10-23
bootstrap的整套框架的html静态页面示例集合，包括所有bootstrap控件及样式，是辅助开发的好资料，绝对不坑，物有所值。
狂神说——SpringBoot学习
weixin_44543307的博客
12-06 5146
Springboot 学习笔记Springboot简介什么是微服务？ThymeleafDuridSpringboot整合mybatisSpringSecurity安全Shiroswagger定时任务springboot 整合分布式 dubbo+ zookeeper+ springbootDubboRPC（两大核心：通讯，序列化）Zookeeper总结 学习源码 spring官网 springboot官网 spring-security版本下载 狂神官网学习 也可以搜索B站 （狂神说） Springboot简
bootstrap写一个静态登录页面
qq_35234854的博客
02-15 1081
html代码： &amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt; &amp;amp;amp;lt;html&amp;amp;amp;gt; &amp;amp;amp;lt;head&amp;amp;amp;gt; &amp;amp;amp;lt;meta charset=&amp;amp;quot;UTF-8&amp;amp;quot;&amp;amp;amp;gt;
『前端学习实例』 静态网页（Bootstrap）
猪窝
07-16 1552
参考视频：【极客学院】一周学会Bootstrap 官方文档： Bootstrap 中文文档 · Bootstrap 是世界上最流行的、移动设备优先的、响应式前端开发框架。 文章目录文件目录结果展示源代码index_test1.htmlindex_test1_css.css 文件目录 根目录 源代码文件 index_test1.html index_test1_css.css 文件夹 image 包含图片 css 包含bootstrap样式 结果展示 源代码 index_test1.html &
BootStrap初体验(静态页面案例)
weixin_63997211的博客
04-10 961
html静态页面案例
bootstrap制作静态页面
最新发布
11-13
bootstrap 是一个流行的前端开发框架，可用于创建响应式、美观的静态页面。要使用 bootstrap 制作静态页面，首先需要引入 bootstrap 的 CSS 文件和 JavaScript 文件，可以通过 CDN 或下载文件的方式引入。然后，在 HTML 文件中使用 bootstrap 的类来构建页面的结构和样式。 在创建页面布局时，可以使用 bootstrap 的栅格系统来实现响应式布局，通过将页面分割成不同的栅格大小来适配不同的屏幕尺寸。同时，bootstrap 还提供了丰富的组件和样式，例如按钮、表单、导航栏等，可以帮助我们快速构建页面的各个部分。 另外，bootstrap 还提供了一些插件和工具，例如模态框、轮播图等，可以增强页面的交互和功能。除了使用 bootstrap 提供的组件和样式，还可以根据需要自定义样式和添加自己的设计元素。 总的来说，使用 bootstrap 制作静态页面可以让我们快速构建现代化的页面，无需从头开始编写 CSS 和 JavaScript，节省时间和精力。同时，bootstrap 的文档和社区资源丰富，可以帮助我们解决开发中遇到的问题，使页面开发变得更加高效和便捷。通过熟练掌握 bootstrap 的使用，我们可以创建出更具吸引力和专业性的静态页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值