bootstrapjsp页面

最新推荐文章于 2024-06-26 19:04:20 发布
最新推荐文章于 2024-06-26 19:04:20 发布
阅读量719 收藏
点赞数
分类专栏： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29720781/article/details/54289243
版权 
<%@ page language="java" import="java.util.*"
    contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@include file="/views/resource.jsp"%>

    <style>
#sbi_userTable tr {
    font-family: "microsoft yahei";
}

.modal-title #sp {
    font-family: "microsoft yahei";
}

.mb-table {
    width: 100%;
}

.mb-table tr {
    display: block;
    width: 100%;
    height: 24px;
    margin-bottom: 5px;
    font-family: "microsoft yahei";
    font-size: 15px;
}

.mb-label {
    display: block;
    float: left;
    width: 25%;
    padding-right: 10px;
    text-align: right;
}

.mb-input {
    display: block;
    float: left;
    width: 70%;
}

.mb-input input, .mb-input select {
    width: 90%;
    padding-left: 8px;
    border: solid 1px #e0e0e0;
    color: #555;
}

.mb-input input:focus {
    outline: #d0d0d0 solid 1px
}

.modal-footer button {
    font-family: "microsoft yahei";
}
</style>
    <!-- <a href="sbi_user/queryforListSbi_User.do">查询用户</a> -->
<body

    style="background-color: transparent; padding: 25px 20px 10px 20px">

    <div class="page-content">
        <div class="page-bar">
            <ul class="page-breadcrumb">            
                <li><a href="#">ETL</a> <i class="fa fa-circle"></i></li>
            </ul>
        </div>
        <!-- END PAGE BAR -->
        <!-- BEGIN PAGE TITLE-->
        <h3 class="page-title">用户管理</h3>
        <!-- END PAGE TITLE-->
        <!-- END PAGE HEADER-->
        <div id="toolbar" class="btn-group">
            <button id="addsbi_user" type="button" class="btn btn-default">
                <i class="glyphicon glyphicon-plus"></i>
            </button>
            <button id="modifysbi_user" type="button" class="btn btn-default">
                <i class="glyphicon glyphicon-pencil"></i>
            </button>
            <button id="delsbi_user" type="button" class="btn btn-default">
                <i class="glyphicon glyphicon-trash"></i>
            </button>
        </div>
        <!-- jsp得到项目部署的路径的写法    <%=request.getContextPath()%> -->
        <table id="sbi_userTable" data-toggle="table"
            data-url="<%=request.getContextPath()%>/sbi_user/queryforListSbi_User.do"
            data-search="true" data-show-columns="true" data-toolbar="#toolbar"
            data-pagination="true" data-click-to-select="true"
            data-side-pagination="server">
            <thead>
                <tr>
                    <th data-field="select" data-checkbox="true"></th>
                    <th data-field="id" data-visible="false" data-switchable="false">ID</th>
                    <th data-field="user_id">英文名</th>
                    <th data-field="password">密码</th>
                    <th data-field="full_name">名字</th>
                    <th data-field="is_superadmin">是否为超级用户</th>
                    <th data-field="time_in">注册时间</th>
                    <th data-field="time_up">注销时间</th>
                    <th data-field="user_in">用户服务</th>
                </tr>
            </thead>
        </table>


        <!--点击添加数据时弹出的框  -->
        <div class="modal fade" id="sbi_userModal">
            <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">
                            <span id="sp">添加用户</span>
                        </h4>
                    </div>


                    <div class="modal-body">
                        <table class='mb-table'>
                            <tr style='display: none'>
                                <input type="text" id="id" name="id" style='display: none'>
                            </tr>
                            <tr>
                                <td class='mb-label'>英文名：</td>
                                <td class='mb-input'><input type="text" id="sbi_user_id"
                                    name="sbi_user_id"></td>
                            </tr>
                            <tr>
                                <td class='mb-label'>密码：</td>
                                <td class='mb-input'><input type="text" id="password"
                                    name=""password""></td>
                            </tr>
                            <tr>
                                <td class='mb-label'>名字：</td>
                                <td class='mb-input'><input type="text" id="full_name"
                                    name="full_name"></td>
                            </tr>

                            <tr>
                                <td class='mb-label'>是否为超级用户：</td>
                                <td class='mb-input'><select name="suppper_user"
                                    id="suppper_user">
                                        <option id="false" value="false" selected="selected">false</option>
                                        <option id="true" value="true">true</option>

                                </select></td>

                            </tr>
                            <tr id="time_in1">
                                <td class='mb-label'>注册时间：</td>
                                <td class='mb-input'><input type="text" id="time_in"
                                    name="time_in"></td>
                            </tr>

                            <tr>
                                <td class='mb-label'>用户服务：</td>
                                <td class='mb-input'><input type="text" id="user_in"
                                    name="user_in" value="service"></td>
                            </tr>

                        </table>
                    </div>


                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" id="savesbi_user">保存</button>
                        <button type='button' class="btn btn-danger" id='modifyBtn'>修改</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->

        <script type="text/javascript">
            var table = $('#sbi_userTable');
            $(function() {
                var date1 = new Date();
                $('#addsbi_user').click(function() {
                    $('#sbi_userModal').modal('show');
                    $('#savesbi_user').show();
                    $('#modifyBtn').hide();
                    $('#sbi_user_id').val("");
                    $('#password').val("");
                    $('#full_name').val("");
                    $('#suppper_user').val("false");
                    $('#time_in').val(getNowFormatDate());
                });
                $('#savesbi_user')
                        .click(
                                function() {
                                    var url = "${pageContext.request.contextPath}/sbi_user/addSbi_User.do";

                                    var option = {
                                        user_id : $('#sbi_user_id').val(),
                                        password : $('#password').val(),
                                        full_name : $('#full_name').val(),
                                        is_superadmin : $('#suppper_user')
                                                .val(),
                                        user_in : $('#user_in').val(),
                                        time_in : date1
                                    };
                                    /* alert(option.is_superadmin); */
                                    etl.ajaxJson(url, option, function(data) {
                                        $('#sbi_userModal').modal('hide');//点击保存按钮后该弹出框消失
                                        table.bootstrapTable("refresh");//刷新原来的table将数据保存在table页面中
                                    });
                                });

                $('#modifyBtn')
                        //根据这个id得到修改这个按钮的值
                        .click(
                                function() {
                                    var url = "${pageContext.request.contextPath}/sbi_user/modifySbi_User.do"; // EL表达式得到项目部署的路径的写法 
                                    var option = {
                                        id : $('#id').val(),
                                        user_id : $('#sbi_user_id').val(),
                                        password : $('#password').val(),

                                        full_name : $('#full_name').val(),
                                        is_superadmin : $('#suppper_user')
                                                .val(),
                                        user_in : $('#user_in').val(),

                                    };
                                    console.log(option);
                                    etl.ajaxJson(url, option, function(data) {
                                        $('#sbi_userModal').modal('hide');
                                        table.bootstrapTable("refresh");
                                    });

                                })

                //获取原有的值
                $('#modifysbi_user').click(function() {
                    var rows = table.bootstrapTable("getSelections");//获取选择的行
                    console.log(rows[0]);
                    if (rows.length != 1) {
                        alert("请选择一个!");
                        return true;
                    } else {
                        $('.modal-title #sp').text('修改用户');
                        $('#sbi_userModal').modal('show');
                        $('#savesbi_user').hide();
                        $('#time_in1').hide();
                        $('#modifyBtn').show();
                        $('#id').val(rows[0].id);
                        $('#sbi_user_id').val(rows[0].user_id)
                        $('#password').val(rows[0].password);
                        $('#full_name').val(rows[0].full_name);
                        if (rows[0].is_superadmin = false) {
                            $('#suppper_user').val("false");
                        } else {
                            $('#suppper_user').val("true");
                        }

                        console.log(rows[0].is_superadmin);
                        $('#user_in').val(rows[0].user_in);

                    }

                });

                $('#delsbi_user')
                        .click(
                                function() {
                                    var rows = table
                                            .bootstrapTable("getSelections");
                                    console.log(rows);
                                    if (rows.length < 1) {
                                        alert("请选择一个!");
                                        return true;
                                    }
                                    if (confirm("确认删除？")) {
                                        var ids = [];

                                        $.each(rows, function(index, row) {
                                            ids.push(row.id);
                                        });
                                        console.log(ids);
                                        //table.find('.selected').remove();
                                        etl
                                                .ajaxJson(
                                                        "${pageContext.request.contextPath}/sbi_user/delSbi_User.do",
                                                        {
                                                            ids : ids
                                                        },
                                                        function(data) {
                                                            table
                                                                    .bootstrapTable("refresh");
                                                        })
                                    } else {
                                        return true;
                                    }
                                });
            });
        </script>
</body>
想当大叔的段子手
关注
专栏目录
JSP和bootstrap
m0_58723498的博客
03-15 2550
1.JSP 1.Java Server Page:java服务页面,能够书写java代码的html 2.通过idea部署的web文件--->默认jsp文件存储路径:C:\Users\Administrator\.IntelliJIdea2019.1\system\tomcat\Tomcat_8_5_66_Web1\work\Catalina\localhost\Web1_war_exploded\org\apache\jsp 3.经历两个阶段: 翻译阶段:需要被web容器解析 将当
简洁大气的Bootstrap前台框架（Jsp版）
08-31
纯手工原创 良心制作
bootstrap之jsp
JackMaster_xh的博客
07-09 1263
Bootstrap的简单项目 1.首先我们要数据库建库，然后在myeclipse里建项目工程，还有导jar包和Bottstrap的框架，这些咱们先暂时省略，直奔主题页面Jsp: 引入jquery和bootstrap框架： href="${pageContext.request.contextPath }/static/bootstrap-3.3.7-dist/css/bootstra
jsp中引入的bootstrap无效
最新发布
2305_76609659的博客
06-26 140
SSM框架中jsp引入bootstrap路径使用${pageContext.request.contextPath}或者<%=request.getContextPath()%>无效，浏览器控制台报错bootstrap404。搜索到在springmvc.xml中添加<mvc:default-servlet-handler/>，添加后仍不起作用。最后在web.xml中添加url-pattern解决。
BootStrap在jsp中的使用
01-08
下载bootstrap的js，css文件： 在jsp中的应用： 第一步： 新建一个web项目 将bootstrap下载下来的文件放入WEB-INF下面的，lib目录下，新建一个bootstrap文件： 第二步： 新建一个index.jsp文件，引入所使用的css.js和bootstrap的： 注意这里的要缓存<!DOCTYPE html> <html lang=zh-CN> 第三步： 在body中载入需要的组件： 运行在tomcat服务器上： 效果如图： 第四步：tomcat的8080端口被占用，修改tomcat的文件： 然后重启eclipse即可。 在java的项
在JSP页面中使用Bootstrap
ysmdelog的博客
03-20 2623
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。官网：https://v3.bootcss.com/。 在官网下载相应版本后，导入资源【css、js、fonts】，然后在<head></head>中写 <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <me
bootstrap做的jsp页面（包括根据值让table显示选中）
qq_29720781的博客
01-05 1336
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@include file="/views/resource.jsp"%> <body style="background-color: transparent;"> <div class="row no-m
bootstrap制作jsp页面（根据值让table显示选中）
10-20
本篇介绍如何使用Bootstrap框架来构建JSP页面，并实现当满足特定条件时，在表格中突出显示或选中某行的功能。Bootstrap是一个用于快速开发响应式网站的前端框架，提供了一套丰富的界面组件，而JSP（JavaServer Pages...
bootstrap实现页面切换
08-22
这个主题“bootstrap实现页面切换”涉及到Bootstrap中的导航系统、模态框、分页以及平滑滚动等核心概念，这些都是构建交互性网页的重要元素。下面将详细阐述这些知识点。 1. **Bootstrap导航系统**：Bootstrap提供...
基于BootStrap框架的前端菜单页面.rar
08-29
在JSP（JavaServer Pages）中使用Bootstrap，你需要在页面头部引入Bootstrap的CSS和JavaScript文件。这些文件通常可以从CDN（内容分发网络）获取，或者你可以在本地项目中下载并按照相应的路径结构引入。例如，你...
在jsp引入bootstrap
时倾的博客
12-19 1万+
第一步：在https://v3.bootcss.com/getting-started/#top该网站下载Bootstrap，有可以看到有三种,如下图所示（本人下载的是源码） 第二步：解压下载的解压包 第三步：新建Maven工程然后将它转为一个动态web工程（如果不会，可以参考本人上一篇博客《将一个Maven工程转为一个标准的Web动态工程》） 第四步：在src下面新建一个文件夹（static...
一个实用的bootstrap模板（html版本和jsp版本都有）
04-29
一个实用的bootstrap模板（html版本和jsp版本都有）
在jsp页面中使用bootstrap制作
热门推荐
Youngzhou的博客
06-09 1万+
1.在webroot中添加res文件夹，将bootstrap添加 2.改路径 将Link 的href 改成bootstrap中min.css的路径 或者用<link rel="stylesheet" type="text/css" href="../../res/bootstrap/css/bootstrap.min.css">3.col-xs-3(表示表格宽带为3，总为12） col
jsp bootstrap表单页面
tanxiaoshuai的博客
07-17 1149
%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>   %       String path = request.getContextPath();       String basePath = request.getScheme()+"://"+request.getServerName()
使用 BootStrap快速开发jsp页面
Satisfy_555的博客
07-22 9525
1.新建一个Maven项目   ================================ 2.从bootstrap官网下载相关开发包https://v3.bootcss.com/getting-started/ ========================================== 3.在项目中添加bootstrap，以及jquery ==========...
关于在Jsp页面中使用BootStrap
CSDNer_zry的博客
03-26 2461
关于在Jsp页面中使用BootStrap 技术小白、初来乍到、请多指教 [捂脸~~] 在MyEclipse的Web Project项目中，在jsp页面采用Bootstrap框架来美化页面，在TomCat里跑不出预期的美观界面： 解决方案：将所需BootStrap的css、js文件，当然包括自定义的css、js文件放置在static文件夹中，static文件夹放置在WebRoot目录下。注意！千万别...
《基于BootStrap3的JSP项目实例教程》第2讲
starlee2000的博客
08-12 1879
JSP开发第1讲下面将在Eclipse中创建一个动态网站工程，在该工程下创建一个简单JSP页面，用于输出“hello jsp”。 1． 创建Project。新建工程，点击File->Dynamic Web Project，出现New Dynamic Web Project对话框，Project Name命名为Hello1，如图1-17所示。 图1-17 Dynamic Web Project对
spring-springmvc-mybatis(SSM)-bootstrap/Jsp整合
kingkang
12-07 801
spring-springmvc-mybatis(SSM)-bootstrap/Jsp整合
Bootstrap+JSP实例学习笔记一.简单的带登录功能的首页
weixin_30779691的博客
05-30 784
前言 Bootstrap是流行的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。源自于twiteer内部的开发框架。 当前（2019-05）最新版本是v3.3.7。 官网：https://v3.bootcss.com/ 学习初衷：不能每来一个项目都重头开始吧，希望积累框架，节省时间，快速上手，尽快出效果。不用太花哨，但也不能太难看。 选一...
Bootstrap JSP页面实践：实现表格值匹配下的高亮显示
"Bootstrap制作JSP页面，实现根据值让表格显示选中状态" 在Web开发中，Bootstrap是一个广泛使用的前端框架，它提供了一套美观且响应式的UI组件，简化了网页设计工作。本示例将介绍如何使用Bootstrap来创建一个JSP...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值