bootstrap后台界面前端实例

其他 2020-02-14 16:13:31 阅读次数: 0

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>

ityw520
发布了36 篇原创文章 · 获赞 0 · 访问量 951
私信 关注

猜你喜欢

转载自blog.csdn.net/ityw520/article/details/103770079
今日推荐
周排行
Leetcode简单题61~80
解决zookeeper磁盘IO高的问题
多线程相关方法详解
Maven-setting.xml文件详解
Maven 项目的 classpath 理解
渊亭科技大数据笔试题
配置JVM内存分配
计算机网络个人学习笔记 （三）网络层 ：第三部分 连载
js中两个等号(==)和三个等号(===)的区别
用C程序自动打开电脑上的程序
每日归档
更多
2024-09-18(0)
2024-09-17(0)
2024-09-16(0)
2024-09-15(0)
2024-09-14(0)
2024-09-13(0)
2024-09-12(0)
2024-09-11(0)
2024-09-10(0)
2024-09-09(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022