springboot+thymeleaf+my batis 가 간 트 투 를 실현 하 는 상세 한 과정

우선 우 리 는 이 간 트 투 가 어떤 동적 데 이 터 를 필요 로 하 는 지 알 아야 한다.
(1)필요:ID,tName,number,계획 시작 시간,시작 시간,계획 종료 시간,종료 시간,프로젝트 담당자,참여 자,관계자 ID,계획 시간(계산 가능,데이터베이스 에 있 지 않 아 도 됨);선행 작업;프로젝트 진도,이 임 무 는 어느 임무 에 속 합 니까?

(2)그 다음 에 easycode 플러그 인 을 이용 하여 실체 류,맵 류,서비스 류,ontCroller 등 을 생 성 합 니 다.
(3)boottstrap 프레임 워 크 를 이용 하여 간 트 맵 의 스타일 을 만 들 고 JS 를 작성 합 니 다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleleaf.org">
<head>
    <title>ganttu.html</title>
    <meta name="keywords" content="keyword1,keyword2,keyword3" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="reason" content="                 ,                     ,          " />

    <meta name="mast" content="         ,    ..." />

    <meta name="description" content="liuyuhang        ,    1.0,2019-02-19" />
    <meta name="description" content="      :yyyy-mm-dd" />
    <meta name="description" content="①               " />
    <meta name="description" content="②        " />
    <meta name="description" content="③      " />
    <meta name="description" content="④       " />
    <meta name="description" content="⑤         " />
    <meta name="description" content="⑥          " />
    <meta name="description" content="⑦            " />
    <meta name="description" content="⑦           " />

    <meta name="warning" content="⑧     ,     ..." />

    <meta name="author" content="liuyuhang 13501043063" />
    <!--       ,         -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow"  rel="stylesheet" />
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style type="text/css">
        #ganttu-head {
            height: 70px;
            background-color: #dddddd;
            padding: 10px 20px;
        }

        #ganttu-body {
            min-height: 780px;
            background-color: #eeeeee;
            padding: 10px 20px;
            font-size: 20px;
        }

        #ganttu-index-projectName {
            display: inline;
            padding: 5px 15px;
            background-image: linear-gradient(to left, #222222 0%, #222222 75%, #000000 100%);
            color: white;
            border-radius: 18px;
        }

        #ganttu-index-projectDesc {
            display: inline;
            padding: 5px 15px;
            background-image: linear-gradient(to left, #777777 0%, #777777 75%, #333333 100%);
            color: white;
            border-radius: 18px;
        }

        td {
            white-space: nowrap
        }
    </style>
</head>
<body>
<div id='ganttu-head' class='col-lg-12 col-md-12 col-sm-12 col-xs-12' style="height:100px" >
    <div style='display: inline;font-size: 30px;font-weight: normal;padding: 5px 15px;'>     </div>
    <div id='ganttu-index-projectName'>      ...</div>
    <div id='ganttu-index-projectDesc'>     ...</div>
</div>
<div id='ganttu-body' class='col-lg-12 col-md-12 col-sm-12 col-xs-12' style=';overflow-x:scroll;font-size:14px;'>
    <!--         div  -->
    <div id="lyh-ganttu" class='col-lg-12 col-md-12 col-sm-12 col-xs-12' style='position:relative;padding:0px;height:700px;'></div>
</div>
</body>
<script type="text/javascript" th:inline="javascript">
    $(function() {
        lyhGanttuInit('lyh-ganttu'); //      
    })
    var lyhGanttuData=[[${lyhGanttuData}]];
    

    /**
     *      ,     
     */
    var lyhGanttuConfig = {
        start : '1900/01/01', //             -    
        end : '1900/01/10', //             -    
        planBorder : '#1a8cff', //     border  
        planBackground : '#80bfff', //     back  
        border : '#ffaa00', //     border   
        background : '#ffcc66', //     back  
        lineColor : 'green', //       
        //    thead     ,            
        labels : {
            'projectName' : {
                'name' : '                     ',
                'show' : true,
            }, //   
            'projectCode' : {
                'name' : '  ',
                'show' : true,
            }, //  
            'planStartAt' : {
                'name' : '    ',
                'show' : true,
            }, //      
            'planEndAt' : {
                'name' : '    ',
                'show' : false,
            }, //      
            'startAt' : {
                'name' : '    ',
                'show' : false,
            }, //      
            'endAt' : {
                'name' : '    ',
                'show' : false,
            }, //      
            'persent' : {
                'name' : '    ',
                'show' : true,
            }, //     
            'dur' : {
                'name' : '  ',
                'show' : true,
            }, //    
            'resps' : {
                'name' : '   ',
                'show' : true,
            }, //   
            'actors' : {
                'name' : '   ',
                'show' : true,
            }, //   
            'insiders' : {
                'name' : '   ',
                'show' : false,
            }, //   
            'before' : {
                'name' : '    ',
                'show' : false,
            }, //    
            'operate' : {
                'name' : "<button title='    ' class='btn btn-primary btn-xs'><span class='glyphicon glyphicon-plus' style='margin-right:0px'></span></button>",
                'show' : true,
            }, //    
        }
    }

    /**
     *       
     */
    function lyhGanttuDataModifyByOperate() {
        var data = lyhGanttuData.data;
        for (var i = 0; i < data.length; i++) {
            data[i]['operate'] = "<button title='     ' class='btn btn-primary btn-xs'><span class='glyphicon glyphicon-edit' style='margin-right:0px'></span></button>";
        }
    }

    //================
    //             ,  lyhGanttuInit,          id
    //        ,     100%

    /**
     *         
     */
    function lyhGanttuInit(target) {
        //        
        lyhGanttuConfig.start = '1900/01/01';
        lyhGanttuConfig.end = '1900/01/10';
        lyhGanttuConfigModifyByDate(); //      ,      
        lyhGanttuDataModifyByOperate(); //            
        var table = lyhGanttuTable(target);
        $('#' + target).html(table);
        drawLink(target); //     
        //       
        $('#' + target).find('[title]').attr('data-toggle', 'tooltip').attr('data-placement', 'right');
        $("[data-toggle='tooltip']").tooltip();
        //  today
        var today = lyhGanttuDate(new Date()); //        
        var todayIn = $('#' + target + ' .table thead tr #date').find('[data-original-title=\'' + today + '\']');
        if (todayIn.length > 0) {
            todayIn.addClass('todayDiv').css('background-color', 'orange').append($('<div>').css({
                'height' : parseInt($('#' + target + ' .table').css('height').split('px')[0]) - 45 + 'px',
                'position' : 'absolute',
                'z-index' : 202,
                'margin-top' : '-40px',
                'margin-left' : '-10px',
                'border-left' : '2px dashed red',
            }).append($('<button>').addClass('btn btn-danger btn-xs todayBtn').css('margin-left', '3px').html(' today ')))
        }
    }

    /**
     *          
     */
    function lyhGanttuTable(target) {
        var htr = $('<tr>').addClass('text-center');
        var labels = lyhGanttuConfig.labels; //head   json
        var start = lyhGanttuConfig.start; //     
        var end = lyhGanttuConfig.end; //     
        var pBorder = lyhGanttuConfig.planBorder;
        var pBackground = lyhGanttuConfig.planBackground;
        var border = lyhGanttuConfig.border;
        var background = lyhGanttuConfig.background;
        var indexBtn = $('<button>').addClass('btn btn-success btn-xs').append("<span class='glyphicon glyphicon-chevron-down' style='margin-right:0px'></span><span class='glyphicon glyphicon-chevron-right' style='display:none;margin-right:0px'></span>");
        indexBtn.click(function() { //               
            var me = $(this);
            var indexBtnDown = me.find('.glyphicon-chevron-down'); //    
            var indexBtnRight = me.find('.glyphicon-chevron-right'); //    
            var meTrs = $('#' + target + ' .table tr');
            var meTdsHide = meTrs.find('div[hideId]');
            if (indexBtnRight.is(':hidden')) { //        ,   ,      
                meTdsHide.parent().parent().hide(300);
                indexBtnRight.show();
                indexBtnDown.hide();
            } else { //       ,   
                meTdsHide.parent().parent().show(300);
                indexBtnRight.hide();
                indexBtnDown.show();
            }
            setTimeout(function() { //    
                drawLink('lyh-ganttu');
            }, 400)

        })
        var index = $('<td>').append(indexBtn);
        htr.append(index); //  index
        //    label
        for (var label in labels) {
            var htd = $('<td>').append($('<div>').attr('id', label).html(labels[label].name));
            if (labels[label].show != true) {
                htd.css('display', 'none');
            }
            htr.append(htd);
        }

        //         
        var dataHtd = $('<td>').attr('id', 'date').css('width', '50%').css('padding', '0px');
        var hDivs = lyhGanttuHeadDivs(target);
        for (var i = 0; i < hDivs.length; i++) {
            dataHtd.append(hDivs[i]);
        }
        htr.append(dataHtd);
        //          
        var tbody = $('<tbody>')
        var data = lyhGanttuData.data;
        for (var i = 0; i < data.length; i++) {
            //      
            var btr = $('<tr>').addClass('text-center').css('max-height', '40px');
            if (data[i].pid == 0) {
                var plusBtn = $('<button>').append("<span class='glyphicon glyphicon-flag' style='margin-right:0px'></span>").addClass('btn btn-success btn-xs').attr('title', '  /  -  ').attr('id', data[i]['id']);
                plusBtn.click(function() { //             
                    var me = $(this);
                    var meId = me.attr('id');
                    var meTrs = $('#' + target + ' .table tr');
                    var meTdsHide = meTrs.find('div[hideId=' + meId + ']');
                    if (meTdsHide.is(':hidden')) { //    
                        meTdsHide.parent().parent().show(300);
                    } else {
                        meTdsHide.parent().parent().hide(300);
                    }
                    setTimeout(function() { //    
                        drawLink('lyh-ganttu');
                    }, 400)

                })
                var plus = $('<td>').css('padding', '5px').append(plusBtn)
            } else {
                var plus = $('<td>').css('padding', '5px').append($('<div>').attr('id', data[i]['id']).attr('hideId', data[i]['pid']).attr('title', '   ').append("<span class='glyphicon glyphicon-tasks' style='margin-right:0px'></span>"));
            }
            btr.append(plus)
            //    
            for (var label in labels) {
                for (var key in data[i]) {
                    if (label == key) {
                        if (label.indexOf('At') > -1) { //      ,     
                            var tda = $('<td>').css('padding', '5px').append($('<div>').addClass(key).html(data[i][key].substr(5, 5)).attr('title', data[i][key]))
                        } else if (label == 'resps' || label == 'actors' || label == 'insiders') { //   ,   ,     
                            var tda = $('<td>').css('padding', '5px').append($('<div>').addClass(key).html(data[i][key][0]).attr('title', data[i][key]));
                        } else if (label == 'before') { //    
                            var befores = data[i][key];
                            var beforesNames = [];
                            if (befores.length > 0) {
                                for (var j = 0; j < data.length; j++) {
                                    for (var k = 0; k < befores.length; k++) {
                                        if (data[j].id == befores[k]) {
                                            beforesNames.push(data[j].projectName);
                                        }
                                    }
                                }
                            } else {
                                beforesNames.push(' ');
                            }
                            var tda = $('<td>').css('padding', '5px').append($('<div>').addClass(key).html(beforesNames[0]).attr('title', beforesNames));
                        } else { //      
                            var tda = $('<td>').css('padding', '5px').append($('<div>').addClass(key).html(data[i][key]));
                        }
                        if (labels[label].show != true) { //      
                            tda.hide();
                        }
                        if (label == 'planStartAt') {
                            tda.css('cursor', 'pointer')
                            tda.click(function() { // planStartAt      
                                var me = $(this);
                                var psaTitle = me.find('div').attr('data-original-title');
                                var dateDivs = $('#' + target + ' .table thead #date');
                                var dateBtn = dateDivs.find('div[data-original-title=\'' + psaTitle + '\']').prev();
                                dateBtn.click();
                            })
                        }
                        btr.append(tda);
                        break;
                    }
                }
            }
            //     

            var ps = data[i]['planStartAt']; //      
            var pe = data[i]['planEndAt']; //      
            var dpss = lyhGanttuDateDiff(start, ps) - 1; //                
            var dpse = lyhGanttuDateDiff(ps, pe) + 1; //                 
            var dse = lyhGanttuDateDiff(start, end); //          

            var as = data[i]['startAt']; //      
            var ae = data[i]['endAt']; //      

            var dass = lyhGanttuDateDiff(start, as) - 1; //                
            var dase = lyhGanttuDateDiff(as, ae) + 1; //                 

            var tdu = $('<td>').css('padding', '0px').css('max-height', '38px');
            var d = $('<div>').css({ //   div
                'display' : 'inline-block',
                'width' : '55px',
                'height' : '26px',
                'margin-bottom' : '-5px',
                'margin-top' : '3px',
                'padding' : '-1px',
                'z-index' : 200,
            }).addClass('Gout').append($('<div>').css({ //    div,      
                'width' : '55px',
                'height' : '30px',
                'position' : 'absolute',
                'margin-top' : '-2px',
                'opacity' : 0.07,
            }).addClass('weekend')).append($('<div>').css({ //   div
                'width' : '55px',
                'height' : '14px',
                'position' : 'absolute',
                'margin-top' : '7px',
                'z-index' : 200,
            }).addClass('Gin'));

            var weekDay = new Date(start).getDay(); //           - - 0-6     --    

            //       
            for (var k = 0; k < dse; k++) { //               
                var dc = d.clone();
                if ((k + weekDay) % 7 == 5 || (k + weekDay) % 7 == 6) { //      
                    dc.find('.weekend').css({
                        'background-color' : 'blue',
                        'border-left' : '1px inset #ddd',
                    })
                }
                if (k > dpss - 1 && k < dpss + dpse) { //      
                    dc.css({
                        'background-color' : pBackground,
                        'border-top' : '1px inset ' + pBorder,
                        'border-bottom' : '1px inset ' + pBorder,
                    }).attr('title', '         ');
                    if (k == dpss) { //   
                        dc.css('border-left', '1px inset ' + pBorder);
                        dc.find('.Gin').html('<div style="position:absolute;top:-3px;padding-left:10px">' + data[i]['persent'] + '</div>'); //     
                        dc.attr('sId', data[i]['id']); //     ,  sid,        id
                    }
                    if (k == dpss + dpse - 1) { //   
                        dc.css('border-right', '1px inset ' + pBorder);
                        dc.attr('eId', data[i]['id']); //     ,  eid,        id
                    }
                }
                if (k > dass - 1 && k < dass + dase) { //      
                    dc.find('.Gin').css({
                        'background-color' : background,
                        'border-top' : '1px inset ' + border,
                        'border-bottom' : '1px inset ' + border,
                    }).attr('title', '         ');
                    if (k == dass) { //   
                        dc.find('.Gin').css('border-left', '1px inset ' + border);
                    }
                    if (k == dass + dase - 1) { //   
                        dc.find('.Gin').css('border-right', '1px inset ' + border);
                    }
                    if (dc.css('border-top-width') != '1px') { //         ,  margin-top    
                        dc.find('.Gin').css('margin-top', '8px');
                    }
                }
                tdu.append(dc)
            }
            btr.append(tdu)
            tbody.append(btr);
        }

        //  table     ,         
        var optr = $('<tr>');
        var hideResetBtn = $('<button>').addClass('btn btn-primary btn-sm').attr('title', '       ').html('<span class="glyphicon glyphicon-transfer"></span>')
        hideResetBtn.click(function() { //              
            if (lyhGanttuConfig.labels.planEndAt.show == false) {
                for (var key in lyhGanttuConfig.labels) {
                    if (key != 'projectName' && key != 'planStartAt' && key != 'operate') {
                        lyhGanttuConfig.labels[key].show = true;
                    }
                }
            } else {
                for (var key in lyhGanttuConfig.labels) {
                    if (key != 'projectName' && key != 'planStartAt' && key != 'operate') {
                        lyhGanttuConfig.labels[key].show = false;
                    }
                }
            }
            lyhGanttuInit(target); //    
        })
        var optdFirst = $('<td>').css('padding', '5px').append(hideResetBtn);
        optr.append(optdFirst); //         
        for (var key in labels) {
            if (key != 'projectName' && key != 'planStartAt' && key != 'operate') {
                var checkSpan = $('<span>').addClass('glyphicon glyphicon-check'); //   span
                var uncheckSpan = $('<span>').addClass('glyphicon glyphicon-unchecked'); //   span
                if (labels[key].show == true) { //      ,    
                    uncheckSpan.hide();
                } else {
                    checkSpan.hide();
                }
                var optBtn = $('<button>').addClass('btn btn-primary btn-sm').html('').append(checkSpan).append(uncheckSpan).append(labels[key].name)
                    .attr('title', '  /  -' + labels[key].name + ' ').attr('id', key);
                optBtn.click(function() { //         
                    var me = $(this);
                    var hideColumId = me.attr('id');
                    if (lyhGanttuConfig.labels[hideColumId].show == true) { //  
                        lyhGanttuConfig.labels[hideColumId].show = false;
                    } else {
                        lyhGanttuConfig.labels[hideColumId].show = true; //  
                    }
                    lyhGanttuInit(target); //    
                })
                var optd = $('<td>').css('padding', '5px 10px').append(optBtn);
                optr.append(optd);
            }
        }

        //      
        var optBtnToday = $('<button>').addClass('btn btn-danger btn-sm').html('<span class="glyphicon glyphicon-pushpin"></span>    ').attr('id', key);
        optBtnToday.click(function() { //          
            var todayBtn = $('#' + target + ' .table thead tr #date').find('.todayDiv');
            todayBtn.prev().prev().click();
        })
        optr.append($('<td>').css('padding', '5px 10px').append(optBtnToday));

        var opt = $('<caption>').append(optr);

        //  table
        var thead = $('<thead>').append(htr).css('background-color', '#cccccc');
        var table = $('<table>').append(opt).append(thead).append(tbody).addClass('table table-bordered table-hover');
        return table;
    }

    /**
     *        canvas    linked   
     */
    function drawLink(target) {
        var temp = $('#' + target);
        var dw = parseInt(temp.find('.table #date').css('width').split('px')[0]);
        var offset = temp.find('.table #date').position().left;
        var dh = parseInt(temp.find('.table').css('height').split('px')[0]) - 80;
        var data = lyhGanttuData.data;
        var canvas = $('<canvas>').css({
            'position' : 'absolute',
            'top' : '0px',
            'left' : '0px',
            'z-index' : 10,
            'margin-top' : '95px', //    
            'margin-left' : offset + 'px',
        }).attr('width', dw + 'px').attr('height', dh + 'px');

        //  target     canvas
        temp.find('canvas').remove()

        for (var i = 0; i < data.length; i++) {
            var before = data[i]['before'];
            var id = data[i]['id'];
            if (before.length > 0) {
                for (var k = 0; k < before.length; k++) {

                    var eDiv = $('#' + target).find('div[sId=' + id + ']')
                    var sDiv = $('#' + target).find('div[eId=' + before[k] + ']')
                    if (eDiv.is(':hidden')) { //      ,      
                        break;
                    }
                    var sy = sDiv.position().top - 88; //       
                    var sx = sDiv.position().left + 55 - offset; //       
                    var ey = eDiv.position().top - 88;
                    var ex = eDiv.position().left - offset;
                    var c = canvas.clone();
                    $('#' + target).append(c); //    
                    var ctx = c[0].getContext("2d"); //    
                    //      
                    ctx.beginPath();
                    ctx.strokeStyle = lyhGanttuConfig.lineColor; //    
                    ctx.moveTo(sx, sy); //  
                    ctx.lineTo(sx + 15, sy); //  15
                    ctx.lineTo(sx + 15, sy + 26); //  32
                    ctx.lineTo(sx - 15, sy + 26); //  30
                    ctx.lineTo(sx - 15, ey); //      
                    ctx.lineTo(ex, ey); //   
                    ctx.stroke(); //  。stroke    closePath()

                    //      
                    ctx.beginPath();
                    ctx.fillStyle = lyhGanttuConfig.lineColor;
                    ctx.arc(sx, sy, 2, 0, 2 * Math.PI, false); //x,y,  ,*,  ,  
                    ctx.fill(); //  

                    //      
                    ctx.beginPath();
                    ctx.strokeStyle = lyhGanttuConfig.lineColor;
                    ctx.moveTo(ex - 7, ey - 3);
                    ctx.lineTo(ex, ey);
                    ctx.lineTo(ex - 7, ey + 3);
                    ctx.stroke(); //  。stroke    closePath()
                }
            }
        }
    }

    var dateLabelClickFlag = null;
    /**
     *          head    div
     */
    function lyhGanttuHeadDivs(target) {
        var start = lyhGanttuConfig.start;
        var end = lyhGanttuConfig.end;
        var diff = lyhGanttuDateDiff(end, start); //     
        var arr = [];
        var temp = null;
        for (var i = 0; i < diff; i++) {
            if (null == temp) {
                var next = lyhGanttuDatePlus(start);
            } else {
                var next = lyhGanttuDatePlus(temp);
            }
            temp = next;
            var div = $('<div>').css({
                'border-left' : '1px solid #ddd',
                'display' : 'inline-block',
                'padding' : '9px 9px',
                'title' : next,
                'cursor' : 'pointer',
            }).attr('title', next).html(next.substr(5, 5));
            div.click(function() { //date       ,         
                var me = $(this);
                if (dateLabelClickFlag != me.attr('title')) { //       ,        ,           
                    dateClickHide(target, me); //    
                    dateLabelClickFlag = me.attr('title'); //  flag
                } else {
                    dateClickShow(target); //    
                    dateLabelClickFlag = null; //  flag
                }

            })
            arr.push(div);
        }
        return arr; //  div jquery      
    }

    /**
     *                     
     */
    function dateClickHide(target, me) {
        var count = 0;
        var temp = me.prev();
        while (temp.length != 0) { //    
            var prev = temp;
            temp.hide();
            temp = temp.prev();
            count++;
        }
        var trs = $('#' + target + ' tbody tr');
        for (var i = 0; i < trs.length; i++) {
            var td = $(trs[i]).children("td:last-child");
            var divs = td.find('.Gout');
            for (var k = 0; k < count; k++) {
                $(divs[k]).hide();
            }
        }
        drawLink(target); //    
    }

    /**
     *                      
     */
    function dateClickShow(target) {
        $('#' + target + ' div').show();
        drawLink(target); //    
    }


    /**
     *      ,    -5,    +5
     */
    function lyhGanttuConfigModifyByDate() {
        for (var i = 0; i < lyhGanttuData.data.length; i++) {
            if (lyhGanttuConfig.start == '1900/01/01') {
                lyhGanttuConfig.start = lyhGanttuData.data[i].planStartAt;
            }
            if (lyhGanttuConfig.end == '1900/01/10') {
                lyhGanttuConfig.end = lyhGanttuData.data[i].planEndAt;
            }
            if (str2Date(lyhGanttuConfig.start, '/').getTime() > str2Date(lyhGanttuData.data[i].planStartAt, '/').getTime()) {
                lyhGanttuConfig.start = lyhGanttuData.data[i].planStartAt;
            }
            if (str2Date(lyhGanttuConfig.start, '/').getTime() > str2Date(lyhGanttuData.data[i].startAt, '/').getTime()) {
                lyhGanttuConfig.start = lyhGanttuData.data[i].startAt;
            }
            if (str2Date(lyhGanttuConfig.end, '/').getTime() < str2Date(lyhGanttuData.data[i].planEndAt, '/').getTime()) {
                lyhGanttuConfig.end = lyhGanttuData.data[i].planEndAt;
            }
            if (str2Date(lyhGanttuConfig.end, '/').getTime() < str2Date(lyhGanttuData.data[i].endAt, '/').getTime()) {
                lyhGanttuConfig.end = lyhGanttuData.data[i].endAt;
            }
        }
        lyhGanttuConfig.start = lyhGanttuDate(new Date(str2Date(lyhGanttuConfig.start, '/').getTime() - (3 * 24 * 60 * 60 * 1000)))
        lyhGanttuConfig.end = lyhGanttuDate(new Date(str2Date(lyhGanttuConfig.end, '/').getTime() + (8 * 24 * 60 * 60 * 1000)))
    }

    /**
     * json date      
     */
    function lyhGanttuDateStr(dateStr) {
        var date = str2Date(dateStr, '-');
        var year = date.getFullYear().toString();
        var month = (date.getMonth() + 1) <= 9 ? "0"
            + (date.getMonth() + 1) : (date.getMonth() + 1);
        var day = date.getDate() <= 9 ? "0" + date.getDate() : date
            .getDate();
        return year + "/" + month + "/" + day;
    }
    /**
     * json date          date          /     
     */
    function lyhGanttuDate(date) {
        var year = date.getFullYear().toString();
        var month = (date.getMonth() + 1) <= 9 ? "0"
            + (date.getMonth() + 1) : (date.getMonth() + 1);
        var day = date.getDate() <= 9 ? "0" + date.getDate() : date
            .getDate();
        return year + "/" + month + "/" + day;
    }

    /**
     *            date    
     */
    function str2Date(dateStr, separator) {
        if (!separator) {
            separator = "/";
        }
        var dateArr = dateStr.split(separator);
        var year = parseInt(dateArr[0]);
        var month;
        //     04     
        if (dateArr[1].indexOf("0") == 0) {
            month = parseInt(dateArr[1].substring(1));
        } else {
            month = parseInt(dateArr[1]);
        }
        var day = parseInt(dateArr[2]);
        var date = new Date(year, month - 1, day);
        return date;
    }

    /**
     *            
     */
    function lyhGanttuDateDiff(dateStr1, dateStr2) { //sDate1 sDate2 2006-12-18  
        var dateSpan,
            tempDate,
            iDays;
        dateStr1 = Date.parse(dateStr1);
        dateStr2 = Date.parse(dateStr2);
        dateSpan = dateStr2 - dateStr1;
        dateSpan = Math.abs(dateSpan);
        iDays = Math.floor(dateSpan / (24 * 3600 * 1000));
        return iDays
    }

    /**
     *           +1   
     */
    function lyhGanttuDatePlus(dateStr, days) {
        var date = str2Date(dateStr);
        if (days == undefined || days == '') {
            days = 1;
        }
        date.setDate(date.getDate() + days); //  +1
        var year = date.getFullYear().toString();
        var month = (date.getMonth() + 1) <= 9 ? "0"
            + (date.getMonth() + 1) : (date.getMonth() + 1);
        var day = date.getDate() <= 9 ? "0" + date.getDate() : date
            .getDate();
        return year + "/" + month + "/" + day;
    }
</script>
</html>
(4)Controller 층 에서 Http 를 이용 하여 전송 요청

@RequestMapping(value = "/gantee",method = RequestMethod.GET)
    public String gantee(Model model) throws JSONException {
        Renwu renwu = renwuService.queryById(new Integer("1"));
        Map jsonData = new HashMap();
        List<Map> jsonArray = new ArrayList<>();
        Map jsonObject = new HashMap();
        Integer id = renwu.getProjectid();
        Integer  pid = renwu.getPid();
        String projectName = renwu.getProjectname();
        String projectCode = renwu.getProjectcode();
        SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy/MM/dd");
        Date planStartDate = renwu.getPlanstartat();
        Date planEndDate = renwu.getPlanendat();
        Date startDate = renwu.getStartat();
        Date endDate = renwu.getEndat();
        String planStartStr = dateFormat.format(planStartDate);
        String planEndStr = dateFormat.format(planEndDate);
        String startStr = dateFormat.format(startDate);
        String endStr = dateFormat.format(endDate);
        String persent = renwu.getPersent();
        String resps = renwu.getResps();
        String actors = renwu.getActors();
        String insiders = renwu.getInsiders();
        Integer dur = renwu.getDur();
        Integer before = renwu.getBefore();
        jsonObject.put("id",id);
        jsonObject.put("pid",pid);
        jsonObject.put("projectName",projectName);
        jsonObject.put("projectCode",projectCode);
        jsonObject.put("planStartAt",planStartStr);
        jsonObject.put("planEndAt",planEndStr);
        jsonObject.put("startAt",startStr);
        jsonObject.put("endAt",endStr);
        jsonObject.put("persent",persent);
        jsonObject.put("resps",resps);
        jsonObject.put("actors",actors);
        jsonObject.put("insiders",insiders);
        jsonObject.put("dur",dur);
        jsonObject.put("before",new Object[]{before});
        jsonArray.add(jsonObject);
        jsonData.put("data",jsonArray);
        model.addAttribute("lyhGanttuData",jsonData);
        return "ganttu";
    }
(5)SpringBoot 프로젝트 를 직접 시작 하면 됩 니 다.

이것 은 Springboot 프로젝트 로 자 연 스 럽 게 SpringCloud 의 하위 프로젝트 로 넘 어 갈 수 있 습 니 다.
주의:HTML 은 제 가 만 든 것 이 아 닙 니 다.저 는 그 기초 위 에서 JS 를 고 쳤 을 뿐 입 니 다.이 개방 적 인 시대 에 나 는 모두 가 배 운 것 을 개방 해 야 한다 고 생각한다.아무리 좋 든 나 쁘 든.
spring boot+thymeleaf+my batis 가 간 트 투 를 실현 하 는 상세 한 과정 에 관 한 글 은 여기까지 입 니 다.더 많은 spring boot+thymeleaf+my batis 가 간 트 투 를 실현 하 는 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많이 응원 해 주세요!

좋은 웹페이지 즐겨찾기