bootstrap后台界面前端实例

最新推荐文章于 2024-08-05 13:19:50 发布
最新推荐文章于 2024-08-05 13:19:50 发布
阅读量633 收藏 2
点赞数 2
分类专栏： bootstrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ityw520/article/details/103770079
版权

1、前端效果展示

 

2、<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>
        SmartAdmin WebApp - category_1 - SmartAdmin v4.0.2
    </title>
    <meta name="description" content="SmartAdmin WebApp">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="msapplication-tap-highlight" content="no">
    <link rel="stylesheet" media="screen, print" href="../../../static/ui/css/vendors.bundle.css">
    <link rel="stylesheet" media="screen, print" href="../../../static/ui/css/app.bundle.css">
    <link rel="apple-touch-icon" sizes="180x180" href="../../../static/ui/img/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="../../../static/ui/img/favicon/favicon-32x32.png">
    <link rel="mask-icon" href="../../../static/ui/img/favicon/safari-pinned-tab.svg" color="#5bbad5">
    <link rel="stylesheet" media="screen, print" href="../../../static/myui/css/myStyle.css">
    <style>
        html,body{
            height:1000px;
        }
    </style>
</head>

<body class="mod-bg-1 header-function-fixed nav-function-fixed my-style">


    <div class="content">
        <div class="row">
            <div class="col-sm-12">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="name1" class="control-label">单号：</label>
                        <input type="text" class="form-control" id="orderId">
                    </div>

                    <div class="form-group">
                        <label for="name1" class="control-label">标题：</label>
                        <input type="text" class="form-control" id="title">
                    </div>

                    <div class="form-group">
                        <label class="form-label">来源：</label>
                        <select class="custom-select form-control">
                            <option selected="">全部</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">提出单位：</label>
                        <select class="custom-select form-control">
                            <option selected="">全部</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">所属系统：</label>
                        <select class="custom-select form-control">
                            <option selected="">全部</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="form-label">问题类型：</label>
                        <select class="custom-select form-control">
                            <option selected="">全部</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label class="form-label">问题状态：</label>
                        <select class="custom-select form-control">
                            <option selected="">全部</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                        </select>
                    </div>


                    <div class="form-group">
                        <label for="name2" class="control-label">处理人：</label>
                        <input type="text" class="form-control" id="handler">
                    </div>


                    <div class="form-group">
                        <label for="name1" class="control-label">牵头部门：</label>
                        <input type="text" class="form-control" id="leadDepartment">
                    </div>


                    <div class="form-group">
                        <label class="control-label">提出时间：</label>
                        <div class="input-daterange input-group" id="datepicker">
                          <!--  <input type="text" class="input-sm form-control" name="start" value="2017-07-11" />-->
                            <input class="form-control" id="startDate" type="date" name="date" value="0000-00-00">
                            <!--<span class="input-group-addon">-->到<!--</span>-->
                            <!--<input type="text" class="input-sm form-control" name="end" value="2017-07-31" />-->
                            <input class="form-control" id="endDate" type="date" name="date" value="0000-00-00">
                        </div>
                    </div>

                </form>


                <div class=" hidden-xs" id="exampleTableEventsToolbar" role="group">
                    <button class="btn btn-info" id="searchBtn">查询</button>

                    <button id="btnAdd" data-toggle="modal" type="button" class="btn btn-primary">
                        <i class="fa fa-plus-square" aria-hidden="true"></i>新增
                    </button>
                    <button id="resetData" type="reset" class="btn btn-warning">
                        <i class="fa fa-trash" aria-hidden="true"></i>重置
                    </button>
                    <button id="importData" type="button" class="btn btn-success">
                        <i class="fa fa-trash" aria-hidden="true"></i>导出
                    </button>
                </div>


                </div>
            </div>
        </div>
    </div>


    <div class="row row-lg">
        <div class="col-sm-12">
            <!-- Example Card View -->
            <div class="example-wrap">
                <div class="example">
                    <table id="table_list"></table>
                </div>
            </div>
            <!-- End Example Card View -->
        </div>
    </div>

    <!-- 增加的模表格-->
    <div id="myModal" class="modal fade" 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>
                        <div class="form-group">
                            <label for="name" class="control-label">名称:</label>
                            <input type="text" class="form-control" id="name">
                        </div>
                        <div class="form-group">
                            <label for="price" class="control-label">价格:</label>
                            <textarea class="form-control" id="price"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="ok" type="button" class="btn btn-primary">确定</button>
                </div>
            </div>
        </div>
    </div>

            <!-- 全局js -->
             <script src="../../../static/myui/js/utils/jquery.min.js?v=2.1.4"></script>
            <script src="../../../static/myui/js/utils/bootstrap.min.js?v=3.3.6"></script>

            <!-- Bootstrap table -->
            <script src="../../../static/myui/js/utils/bootstrap-table/bootstrap-table.min.js"></script>
            <script src="../../../static/myui/js/utils/bootstrap-table/bootstrap-table-mobile.min.js"></script>
            <script src="../../../static/myui/js/utils/bootstrap-table/local/bootstrap-table-zh-CN.min.js"></script>


<script type="text/javascript">

    $(document).ready(function () {
        //初始化表格,动态从服务器加载数据
        $("#table_list").bootstrapTable({
            //使用get请求到服务器获取数据
            method: "GET",
            //必须设置，不然request.getParameter获取不到请求参数
            contentType: "application/x-www-form-urlencoded",
            //获取数据的Servlet地址
            url: "${ctx!}/problem/findProblemList",
            //表格显示条纹
            striped: true,
            //启动分页
            pagination: true,
            //每页显示的记录数
            pageSize: 10,
            //当前第几页
            pageNumber: 1,
            //记录数可选列表
            pageList: [5, 10, 15, 20, 25],
            //是否启用查询
            search: true,
            //是否启用详细信息视图
            detailView:true,
            detailFormatter:detailFormatter,
            //表示服务端请求
            sidePagination: "server",
            //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
            //设置为limit可以获取limit, offset, search, sort, order
            queryParamsType: "undefined",
            queryParams: queryParams,
            //json数据解析
            responseHandler: function(res) {
                return {
                    "rows": res.content,
                    "total": res.totalElements
                };
            },
            //数据列
            columns: [{
                title: "ID",
                field: "id",
                sortable: true
            },{
                title: "单号",
                field: "orderId"
            },{
                title: "来源",
                field: "branchName"
            },{
                title: "标题",
                field: "branchAddress"
            },{
                title: "提出单位",
                field: "payeeName"
            },{
                title: "所属系统",
                field: "payeeAccount"
            },{
                title: "问题模块",
                field: "payeeAccount"
            },{
                title: "问题类型",
                field: "payeeAccount"
            },{
                title: "问题状态",
                field: "payeeAccount"
            },{
                title: "当前处理人",
                field: "payeeAccount"
            },{
                title: "牵头部门",
                field: "payeeAccount"
            },{
                title: "创建时间",
                field: "createTime",
                sortable: true
            },{
                title: "当前处理人",
                field: "status",
                formatter: function(value,row,index){
                    if (value == '0')
                        return '<span class="label label-primary">正常</span>';
                    return '<span class="label label-danger">禁用</span>';
                }
            },{
                title: "更新时间",
                field: "updateTime",
                sortable: true
            },{
                title: "操作",
                field: "empty",
                formatter: function (value, row, index) {
                    var operateHtml = '<button class="btn btn-primary btn-xs" type="button" οnclick="edit(\''+row.id+'\')"><i class="fa fa-edit"></i>&nbsp;修改</button> &nbsp;';
                    operateHtml = operateHtml + '<button class="btn btn-danger btn-xs" type="button" οnclick="del(\''+row.id+'\')"><i class="fa fa-remove"></i>&nbsp;删除</button> &nbsp;';

                    return operateHtml;
                }
            }]
        });
    });

    //查询的参数
    function queryParams(params) {
        var sta=$.trim($("#status").val());
        var stat = "";
        if(sta == "未发送" || sta == "未")
        {
            stat = 1;
        }else if(sta == "已发送" || sta == "已"){
            stat = 0;
        }
        /* alert("name:"+$("#name").val()+";"+"score:"+$("#score").val()+";"+"time_send:"+$("#time_send").val()+";"+"email:"+$("#email").val()+";"+"status:"+stat+";"+"phone:"+$("#phone").val()+";"); */
        console.log("params--->>"+"进入查询参数的界面");
        var param = {
            searchScope: "name:"+$.trim($("#name").val())+";"
            +"score:"+$.trim($("#score").val())+";"
            +"time_send:"+$.trim($("#time_send").val())+";"
            +"email:"+$.trim($("#email").val())+";"
            +"status:"+$.trim(stat)+";"+"phone:"
            +$.trim($("#phone").val())+";",
            pageNumber: params.pageNumber,
            pageSize: params.pageSize
        };
        return param;
    }

    // 搜索按钮触发事件
    $(function() {
        $("#searchBtn").click(function() {
            $('#table_list').bootstrapTable(('refresh')); // 很重要的一步，刷新url！
        });
    });

    //清除全部的数据
    $(function() {
        $("#resetData").click(function() {
            //$('#table_list').bootstrapTable(('refresh')); // 很重要的一步，刷新url！

        });
    });

    //导出数据
    $(function() {
        $("#importData").click(function() {
            //$('#table_list').bootstrapTable(('refresh')); // 很重要的一步，刷新url！

        });
    });

    //新增按钮的事件
    /*  $("#btnAdd").click(function () {
                   console.log("-->>"+"进入新增弹窗调用");
                   $("#myModalLabel").text("新增");
                   $('#myModal').modal();
       });*/

   /* $("#btnAdd").on('click', function() {
        console.log("-->>"+"进入新增弹窗调用");
        $("#myModal").modal({
            backdrop: 'static'
        });
    });*/


    function edit(id){
        layer.open({
            type: 2,
            title: '银行信息修改',
            shadeClose: true,
            shade: false,
            area: ['893px', '600px'],
            content: '${ctx!}/admin/bank/edit/' + id,
            end: function(index){
                $('#table_list').bootstrapTable("refresh");
            }
        });
    }
    function add(){
        layer.open({
            type: 2,
            title: '银行信息添加',
            shadeClose: true,
            shade: false,
            area: ['893px', '600px'],
            content: '${ctx!}/admin/bank/add',
            end: function(index){
                $('#table_list').bootstrapTable("refresh");
            }
        });
    }

    function del(id){
        layer.confirm('确定删除吗?', {icon: 3, title:'提示'}, function(index){
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "${ctx!}/admin/bank/delete/" + id,
                success: function(msg){
                    layer.msg(msg.message, {time: 2000},function(){
                        $('#table_list').bootstrapTable("refresh");
                        layer.close(index);
                    });
                }
            });
        });
    }

    function detailFormatter(index, row) {
        var html = [];
        html.push('<p><b>描述:</b> ' + row.description + '</p>');
        return html.join('');
    }

    function advise() {
        $.ajax({
            //几个参数需要注意一下
            // alert("保存建议数据");
           // alert('333');
            type: "GET",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "/problem/saveAdvise" ,//url
            data: $('#form-suggest').serialize(),
            //alert("-->>"+$('#form-suggest').serialize()),
            success: function (result) {
                console.log(result);//打印服务端返回的数据(调试用)
                if (result.resultCode == 200) {
                    alert("成功");
                }
                ;
            },
            error : function() {
                alert("出现异常！");
            }
        });
    }

</script>


</body>

</html>

bootstrap案例
qq_43537987的博客
05-26 1533
效果展示： 总体代码： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor...
bootstrap 后台管理案例
02-27
后台页面案例 登录 注册 邮件 数据统计 列表 样式简介大方
Bootstrap常用元素
lynch0571的专栏
09-14 1724
Theme Template for Bootstrap Navbars Toggle navigation
Bootstrap网格系统的一个简单实例
最新发布
naozibuok的博客
08-05 1103
Bootstrap 的栅格系统（Grid System）是其核心特性之一，旨在帮助开发者创建灵活、响应式的布局。该系统基于一行（row）包含 12 个等宽的栅格（column）的概念，允许开发者根据需要将这些栅格分配给不同的列，以便在各种设备和屏幕尺寸上实现一致的布局。Bootstrap 的栅格系统是基于 12 栅格的，因此列宽度的总和应该为 12。: 表示这个列占据了 12 栅格系统中的 4 个栅格，那么一个<div class="card">占据4 个栅格，所以每个。3. 列（Column）
bootstrap搭建页面案例
zjsfdx的博客
02-12 2749
文件目录 index.html<!DOCTYPE html> <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, i
横向菜单 bootstrap 后台模板
01-31
Bootstrap是Twitter推出的一款开源的前端框架，它提供了丰富的CSS样式和JavaScript组件，使得开发者能够快速地创建响应式、移动设备优先的网页项目。 这款模板的核心特征在于其横向布局的菜单系统，也称为水平菜单...
超好看的bootstrap-admin 后台管理静态模板
10-18
Bootstrap 和 jQuery 是两个非常重要的前端开发框架，它们在构建后台管理系统时起着至关重要的作用。Bootstrap 提供了一套丰富的响应式设计和移动设备优先的 HTML、CSS 以及 JS 框架，使得开发者能够轻松创建出美观...
扁平化bootstrap后台管理报表统计html模板_bootstrap ajax
12-04
这个"扁平化bootstrap后台管理报表统计html模板"旨在为开发者提供一套完整的后台管理系统界面，以帮助他们快速构建功能丰富的后台应用。下面将详细阐述这个模板包含的关键知识点。 1. **扁平化设计**：扁平化设计是...
简单bootstrap后台模板演示-简单 后台 bootstrap 后台系统.rar
12-12
开发者可以通过研究这些代码学习如何使用Bootstrap来构建后台界面，同时也可以根据自己的需求进行修改和扩展。 总的来说，这个压缩包提供了一个基于Bootstrap的简单后台模板，适用于快速开发和学习。通过深入理解...
静态html后台模板-bootstrap后台模板，简洁大气，内容完整
04-02
这个"静态HTML后台模板"基于Bootstrap构建，提供了一套完整的后台管理界面设计，适用于快速开发高效、美观且易用的网站后台。下面将详细阐述Bootstrap的核心特性以及如何利用这些特性来理解和使用这个后台模板。 1....
bootStrap页面实例
06-15
bootstrap
Bootstrap完整案例
12-04
里面包含Bootstrap示例----树形菜单，项目用表及初始化数据,Bootstrap技术文档.docx,各大组件的压缩包,测试数据,以及源码
bootstrap 例子模版
11-12
bootstrap 例子模版bootstrap 例子模版bootstrap 例子模版bootstrap 例子模版bootstrap 例子模版bootstrap 例子模版
bootstrap案例demo
07-27
bootstrap案例demo
Bootstrap 案例
weixin_65089602的博客
05-01 452
案例思维导图 案例一：轮播图 代码展示： <div class="carousel-inner"> <div class="carousel-item active"> <img src="img/lb1.png" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="img/lb
Bootstrap案例
A_SD911的博客
09-08 298
开发工具与关键技术：VS，JavaScript 知识作者：陈铨滔 撰写时间：2020-8-26~ 1 网格系统有以下 5 个类: .col- 针对所有设备 .col-sm- 平板 - 屏幕宽度等于或大于 576px .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px) .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px) .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px) 网格有12个col1 2 font-weight-bold 加粗文本 尝试
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值