bootstrap复杂页面设计

编程语言 2018-04-22 16:48:06 阅读次数: 3 
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" href="js/bootstrap-table/bootstrap-table.min.css" />
    <link rel="stylesheet" href="js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css" />
    <link rel="stylesheet" href="js/bootstrap-select/css/bootstrap-select.min.css" />
    <style type="text/css">
        #top_container {
            position: relative;
            width: 100%;
            height: 60px;
            background-color: #6085FF;
            z-index: 1004;
        }

        #top_container>.ui-header {
            height: 60px;
            position: relative;
        }

        .ui-header .icon {
            margin: 10px;
            width: 40px;
            height: 40px;
            float: left;
            background-image: url("image/logo.png");
            background-position: 50% 50%;
            background-repeat: no-repeat;
        }

        .ui-header .log-info {
            margin-top: 12px;
            font-size: 18px !important;
            line-height: 40px;
            float: left;
            color: #fff;
        }

        .operator-button {
            display: inline-block;
            width: 30px;
        }


        /*.level-2 {*/
            /*margin-left: 100px;*/
        /*}*/

        /*.level-3 {*/
            /*margin-left: 200px;*/
        /*}*/

        .delete-icons{
            color: red;
            font-size: 22px;
            margin-top: 5px;
        }

        .execute-icons{
            color: green;
            font-size: 22px;
            margin-top: 5px;
        }


    </style>

</head>

<body>

<div id="top_container" style="height: 60px;">
    <div class="ui-header">
        <div class="icon"></div>
        <div class="log-info">测试使用</div>
    </div>
</div>

<div id="content">

    <div class="container-fluid">
        <div class="row">
            <div id="main" class="col-md-10" style="margin:20px; padding:20px;border:1px solid #ccc;">
                <div id="toolbar">
                    <div class="btn-group">
                        <button class="btn btn-default" id="toolbar_add">
                            <i class="glyphicon glyphicon-plus"></i>新增
                        </button>
                        <!--<button class="btn btn-default" id="toolbar_dels">
                            <i class="glyphicon glyphicon-trash"></i>删除
                        </button>-->
                    </div>
                </div>
                <table id="table0" class="table"></table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="row-view" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="width:1200px;">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel-view">计划查看</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" style="padding:0 50px 0 50px;">

                    <div class="form-group">
                        <label class="col-md-1 control-label">计划名称:</label>
                        <div class="col-md-2">
                            <input class="form-control" name="name" type="text">
                        </div>
                        <label class="col-md-1 control-label">开始日期:</label>
                        <div class="col-md-2">
                            <input class="form-control" name="begindate" type="text">
                        </div>
                        <label class="col-md-1 control-label">结束日期:</label>
                        <div class="col-md-2">
                            <input class="form-control" name="enddate" type="text">
                        </div>
                    </div>

                    <div id="timeZone-view"></div>

                </form>
            </div>
            <div class="modal-footer">

                <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="row-edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="width:1200px;">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">计划新增/修改</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" style="padding:0 50px 0 50px;">

                    <div class="form-group plan">

                        <input class="form-control" id="planID" type="text" style="display: none">

                        <label class="col-md-1 control-label">计划名称:</label>
                        <div class="col-md-2">
                            <input class="form-control" id="name" type="text">
                        </div>
                        <label class="col-md-1 control-label">开始日期:</label>
                        <div class="col-md-3">
                            <input class="form-control datePicker" id="begindate" type="text">
                        </div>
                        <label class="col-md-1 control-label">结束日期:</label>
                        <div class="col-md-3">
                            <input class="form-control datePicker" id="enddate" type="text">
                        </div>
                    </div>

                    <div id="timeZone-edit"></div>

                    <h5 class="page-header"></h5>

                    <div class="form-group">
                        <button id="timeAdd" type="button" class="btn btn-default time-add level-2">新增时间段</button>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
            </div>
        </div>
    </div>
</div>




<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker/js/moment.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker/js/zh-cn.js"></script>
<script type="text/javascript" src="js/bootstrap-select/js/bootstrap-select.js"></script>
<script type="text/javascript" src="js/bootstrap-select/js/i18n/defaults-zh_CN.min.js"></script>


<script type="text/javascript">
    var sfs = [];
    var kks = [];

    $('#table0').bootstrapTable({
        columns: [{
            field: "name",
            title: '计划名称',
            valign: "middle",
            align: "center"
        },
            {
                field: "begindate",
                title: '开始日期',
                valign: "middle",
                align: "center",
            },
            {
                field: "enddate",
                title: '结束日期',
                valign: "middle",
                align: "center"
            },
            {
                field: "operate",
                title: "操作",
                align: "center",
                valign: "middle",
                formatter: operateFormatter,
                edit: false
            },
        ],
        url: 'szAlgSched',
        method:'get',
        idField: "id",
        pagination: true,
        sidePagination: 'client',
        //             searchOnEnterKey: true,
        pageList: [5, 10, 20, 50],
        toolbar: "#toolbar",
    });

    $(".datePicker").datetimepicker({
        locale: moment.locale('zh-cn'),
        format: 'YYYY-MM-DD'
    });

    $.ajax({
        url: "szAlg",
        method:'get',
        success: function(data) {
            sfs = JSON.parse(data);
//            sfs = [{"vendorid":1,"vendorname":"hik","sf":[{"algorithmid":7,"name":"车辆分析"},{"algorithmid":10,"name":"人体车辆分析"},{"algorithmid":13,"name":"卡口车辆"},{"algorithmid":14,"name":"车辆分析"},{"algorithmid":3,"name":"人体车辆分析"},{"algorithmid":6,"name":"卡口车辆"}]}];
        }
    });

    function operateFormatter(value, row, index) {
        return [
            "<a class=\"operator-button\" href='javascript:viewRow(" + index + ")' title=\"修改\">",
            "<i class='glyphicon glyphicon-search'></i>",
            "</a>     ",
            "<a class=\"operator-button\" href='javascript:editRow(" + index + ")' title=\"修改\">",
            "<i class='glyphicon glyphicon-edit'></i>",
            "</a>     ",
            "<a class=\"operator-button\" href='javascript:removeRow(" + index + ")' title=\"删除\">",
            "<i class='glyphicon glyphicon-remove'></i>",
            "</a>     ",
        ].join('');
    };

    function viewRow(index) {

        var planid = $("#table0").bootstrapTable('getData')[index].id;

        $.ajax({
            url: "szAlgSched/"+planid,
            success: function(data) {

                data = JSON.parse(data);

                $("#timeZone-view").html('');

                $("#row-view input[name='name']").val(data.name);
                $("#row-view input[name='begindate']").val(data.begindate);
                $("#row-view input[name='enddate']").val(data.enddate);
                var html = [];

                $.each(data.timeZone, function(value, item, index) {

                    html.push("<div style='border:2px solid #ccc; margin-top:20px; padding:40px 40px; '>");
                    html.push('<div class="form-group">');
                    html.push('<label class="col-md-2 control-label">开始时间:</label>');
                    html.push('<div class="col-md-2">');
                    html.push('<input class="form-control"  name="begintime" type="text" value=' + item.begintime + '>');
                    html.push('</div>');
                    html.push('<label class="col-md-2 control-label">结束时间:</label>');
                    html.push('<div class="col-md-2">');
                    html.push('<input class="form-control" name="endtime" type="text" value=' + item.endtime + '>');
                    html.push('</div>');
                    html.push('<label class="col-md-1 control-label">卡口:</label>');
                    html.push('<div class="col-md-2">');
                    html.push('<input class="form-control" name="crossingid" type="text" value=' + item.crossingid + '>');
                    html.push('</div>');
                    html.push('<div class="col-md-1">');
                    html.push('<a href="javascript:void(0)"  title="立刻执行"><span class="glyphicon glyphicon-play execute-icons" name="executeImmediate" ></span></a>');
                    html.push('</div>');

                    html.push('<h5 class="page-header level-2"></h5>');

                    $.each(item.sf, function(value, item, index) {
                        html.push('<div class="form-group">');
                        html.push('<label class="col-md-2 control-label">厂商:</label>');
                        html.push('<div class="col-md-2">');
                        html.push('<input class="form-control"  type="text" value=' + item.vendorname + '> ');
                        html.push('</div>');
                        html.push('<label class="col-md-2 control-label">算法:</label>');
                        html.push('<div class="col-md-2">');
                        html.push('<input class="form-control"  type="text" value=' + item.name + '> ');
                        html.push('</div>');
                        html.push('<label class="col-md-1 control-label">危险品:</label>');
                        html.push('<div class="col-md-2">');

                        var alarmName = "";
                        var alarms = item.alarm.split(",");

                        $.each(alarms, function(value, item, index) {
                            temp = (value == 1) ? "大货车" : "危险品车";
                            alarmName = alarmName + "," + temp;
                        });
                        alarmName = alarmName.substring(2);

                        html.push('<input class="form-control"  type="text" value=' + alarmName + '>');
                        html.push('</div>');
                        html.push('</div>');
                    });
                    html.push('</div>');
                    html.push('</div>');
                });

                $("#timeZone-view").append(html.join(''));

                $("#row-view input").attr("readonly", "readonly");

            }
        });

        $("#row-view").modal().on("shown.bs.modal");
    };

    function editRow(index) {


        var planid = $("#table0").bootstrapTable('getData')[index].id;


        $.ajax({
            url: "szAlgSched/"+planid,
//             data:{id:planid},
            success: function(data) {

                data = JSON.parse(data);


                $("#timeZone-edit").html('');
                $("#planID").val(planid);
                $("#name").val(data.name);
                $("#begindate").val(data.begindate);
                $("#enddate").val(data.enddate);
                var html = [];

                $.each(data.timeZone, function(value, item, index) {


                    html.push("<div style='border:2px solid #ccc; margin-top:20px; padding:40px 40px; '>");
                    html.push('<div class="form-group timeZone">');
                    html.push('<label class="col-md-2 control-label">开始时间:</label>');
                    html.push('<div class="col-md-2">');
                    html.push('<input class="form-control datetimePicker"  name="begintime" type="text" value=' + item.begintime + '>');
                    html.push('</div>');
                    html.push('<label class="col-md-2 control-label">结束时间:</label>');
                    html.push('<div class="col-md-2">');
                    html.push('<input class="form-control datetimePicker" name="endtime" type="text" value=' + item.endtime + '>');
                    html.push('</div>');
                    html.push('<label class="col-md-1 control-label">卡口:</label>');
                    html.push('<div class="col-md-2">');
                    html.push('<input class="form-control" name="crossingid" type="text" value=' + item.crossingid + '>');
                    html.push('</div>');
                    html.push('<div class="col-md-1">');
                    html.push('<a href="javascript:void(0)"  title="删除"><span class="glyphicon glyphicon-remove-circle delete-icons delete-timezone" ></span></a>');
                    html.push('</div>');

                    html.push('<h5 class="page-header level-2"></h5>');

                    $.each(item.sf, function(value, item, index) {
                        html.push('<div class="form-group sf">');
                        html.push('<label class="col-md-2 control-label">厂商:</label>');
                        html.push('<div class="col-md-2">');
                        html.push('<select class="form-control vendorSelect" name="vendorid">');
                        html.push('<option value="">请选择</option>');
                        $.each(sfs, function(value1, item1, index1) {
                            if(item.vendorid == item1.vendorid){
                                html.push("<option  value=" + item1.vendorid + " selected >" + item1.vendorname + "</option>");
                            }else{
                                html.push("<option  value=" + item1.vendorid + ">" + item1.vendorname + "</option>");
                            }

                        });
                        html.push('</select>');
                        html.push('</div>');
                        html.push('<label class="col-md-2 control-label">算法:</label>');
                        html.push('<div class="col-md-2">');

                        html.push('<select class="form-control algidSelect" name="algid">');

                        $.each(sfs, function(value1, item1, index1) {
                            if(item.vendorid == item1.vendorid){

                                $.each(item1.sf, function(value1, item1, index1) {

                                    if(item.vendorid == item1.vendorid){
                                        html.push("<option  value=" + item1.algorithmID + " selected >" + item1.name + "</option>");
                                    }else{
                                        html.push("<option  value=" + item1.algorithmID + " selected >" + item1.name + "</option>");
                                    }
                                });
                            }
                        });
                        html.push('</select>');

                        html.push('</div>');
                        html.push('<label class="col-md-1 control-label">危险品:</label>');
                        html.push('<div class="col-md-2">');


                        html.push('<select  class="selectpicker show-tick form-control" multiple data-live-search="false" name="alarm">');

                        if(item.alarm.indexOf("1") > -1){
                            html.push('<option value="1" selected>大货车</option>');
                        }else{
                            html.push('<option value="1">大货车</option>');
                        }
                        if(item.alarm.indexOf("2") > -1){
                            html.push('<option value="2" selected>危险品车</option>');
                        }else{
                            html.push('<option value="2">危险品车</option>');
                        }
                        html.push('</select>');
                        html.push('</div>');
                        html.push('<div class="col-md-1">');
                        html.push('<a href="javascript:void(0)"  title="删除"><span class="glyphicon glyphicon-remove-circle delete-icons delete-sf" ></span></a>');
                        html.push('</div>');
                        html.push('</div>');

                    });

                    html.push('<div class="form-group">');
                    html.push('<button type="button" class="btn btn-default sf-add level-3">新增算法</button>');
                    html.push('</div>');

                    html.push('</div>');
                    html.push("</div>");



                });

                $("#timeZone-edit").append(html.join(''));
                csChangeListener();
                $(".selectpicker").selectpicker();
                delIconListener();
                sfAddListener();
            }
        });

        timeAddListener();

        $("#row-edit").modal().on("shown.bs.modal").on("hide.bs.modal", function() {
            $("#timeZone").html('');
        });

    };


    function removeRow(index) {

        var planid = $("#table0").bootstrapTable('getData')[index].id;

        $.ajax({
            url: "szAlgSched/"+planid,
            type: "post",
            data : {_method:"DELETE"},
            success: function(data) {
                alert("删除成功");
                $("#table0").bootstrapTable('refresh');
            },
            err: function(){
                alert("删除失败");
            }
        });
    }


    $("#toolbar_add").click(function() {
        $("#timeZone-edit").html('');
        $("#planID").val(-1);
        $("#row-edit").modal().on("shown.bs.modal");
        timeAddListener();
        $("#table0").bootstrapTable('refresh');

    });

    function timeAddListener() {
        $(".time-add").off().click(function() {
            var html = [];
            html.push("<div style='border:2px solid #ccc; margin-top:20px; padding:40px 40px; '>");
            html.push('<div class="form-group timeZone">');
            html.push('<label class="col-md-2 control-label">开始时间:</label>');
            html.push('<div class="col-md-2">');
            html.push('<input class="form-control datetimePicker" name="begintime" type="text" >');
            html.push('</div>');
            html.push('<label class="col-md-2 control-label">结束时间:</label>');
            html.push('<div class="col-md-2">');
            html.push('<input class="form-control datetimePicker" name="endtime" type="text" >');
            html.push('</div>');
            html.push('<label class="col-md-1 control-label">卡口:</label>');
            html.push('<div class="col-md-2">');
            html.push('<input class="form-control" name="crossingid" type="text" >');
            html.push('</div>');
            html.push('<div class="col-md-1">');
            html.push('<a href="javascript:void(0)"  title="删除"><span class="glyphicon glyphicon-remove-circle delete-icons delete-timezone" ></span></a>');
            html.push('</div>');
            html.push('<h5 class="page-header level-2"></h5>');
            html.push('<div class="form-group">');
            html.push('<button type="button" class="btn btn-default sf-add level-3">新增算法</button>');
            html.push('</div>');
            html.push('</div>')

            $("#timeZone-edit").append(html.join(''));
            delIconListener();
            sfAddListener();

            $(".datetimePicker").datetimepicker({
                locale: moment.locale('zh-cn'),
                format: "HH:mm"
            });
        });
    }

    function sfAddListener() {

        $(".sf-add").off().click(function() {

            var html = [];
            html.push('<div class="form-group sf">');
            html.push('<label class="col-md-2 control-label">厂商:</label>');
            html.push('<div class="col-md-2">');
            html.push('<select class="form-control vendorSelect" name="vendorid">');
            html.push('<option value="">请选择</option>');
            $.each(sfs, function(value, item, index) {
                html.push("<option value=" + item.vendorid + ">" + item.vendorname + "</option>");
            });
            html.push('</select>');
            html.push('</div>');
            html.push('<label class="col-md-2 control-label">算法:</label>');
            html.push('<div class="col-md-2">');
            html.push('<select class="form-control algidSelect" name="algid">');
            html.push('<option value="">请选择</option>');
            html.push('</select>');
            html.push('</div>');
            html.push('<label class="col-md-1 control-label">危险品:</label>');
            html.push('<div class="col-md-2">');
            html.push('<select  class="selectpicker show-tick form-control" multiple data-live-search="false" name="alarm">');
            html.push('<option value="1">大货车</option>');
            html.push('<option value="2">危险品车</option>');
            html.push('</select>');
            html.push('</div>');
            html.push('<div class="col-md-1">');
            html.push('<a href="javascript:void(0)"  title="删除"><span class="glyphicon glyphicon-remove-circle delete-icons delete-sf" ></span></a>');
            html.push('</div>');
            html.push('</div>');
            $(this).parent().before(html.join(''))
            csChangeListener();
            delIconListener();
            $(".selectpicker").selectpicker();

        });
    }

    function csChangeListener(){
        $(".vendorSelect").change(function() {

            var algidSelect = $(this).parent().siblings().find(".algidSelect");

            var vendorid = $(this).val();
            algidSelect.html('');

            if(vendorid != "") {
                var algidList = [];
                $.each(sfs, function(value, item, index) {
                    if(item.vendorid == vendorid) {
                        algidList = item.sf;
                    }
                });

                var html1 = [];

                $.each(algidList, function(value, item, index) {
                    html1.push("<option value=" + item.algorithmID + ">" + item.name + "</option>");
                });
                algidSelect.append(html1.join(''));
            } else {
                algidSelect.append('<option value="">请选择</option>');
            }
        });
    }

    function delIconListener(){

        $(".delete-timezone").click(function(){
            $(this).parent().parent().parent().parent().remove();
        });

        $(".delete-sf").click(function(){
            $(this).parent().parent().parent().remove();
        });

    }



    $("#btn_submit").click(function(){

        var data = {};

        data["id"] = $("#planID").val();
        data["name"] = $("#name").val();
        data["begindate"] = $("#begindate").val();
        data["enddate"] = $("#enddate").val();

        var timeZone = [];
        var timeZoneTmp = {};
        var sfs = [];

        $.each($("#timeZone-edit").find(".timeZone"), function(value,item,index) {

            $.each($(item).children("div").children("input"), function(value1,item1,index1) {
                timeZoneTmp[$(item1).attr("name")] = $(item1).val();
            });

            debugger

            $.each($(item).find(".sf"), function(value1,item1,index1) {

                var sf = {}
                sf["vendorid"] = $(item1).find("[name='vendorid']").val();
                sf["algid"] = $(item1).find("[name='algid']").val();
                sf["alarm"] = $(item1).find("[name='alarm']").val().join(',');
                sfs.push(sf);
            });
            timeZoneTmp["sf"] = sfs;
            timeZone.push(timeZoneTmp);
            sfs = [];
            timeZoneTmp = {};
        });

        data["timeZone"] = timeZone;

        $.ajax({
            url:"szAlgSched",
            data: JSON.stringify(data),
            type : 'post',
            contentType: 'application/json',
            success:function(){
                alert("保存成功");
                $("#table0").bootstrapTable('refresh');
            },
            err:function(){
                alert("保存失败");
            }
        });





    });



</script>
</body>

</html>

猜你喜欢

转载自blog.csdn.net/Fisher_yu01/article/details/80040223
今日推荐
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
周排行
计算机组成与设计（七）—— 除法器
Integer Approximation(分治+枚举)
大话数据库索引
windows10系统JDK的配置及下载地址
mysql实现秒值转换中原六仔平台搭建
Codeforces Round #556 (Div. 1)
百练1064 网线主管
Codeforces 995F Cowmpany Cowmpensation
子集生成之增量构造法，位向量法，二进制法
ERROR: cmd.exe failed with args /c "/APK\gradle\rungradle.bat...
每日归档
更多
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022