bootstrap table 解析寫死的json.並且把進度條放進列中。

function showPhaseInfo(phase){
    //json字符串轉json對象
    var phaseInfo = eval(phase);
    
    $('#phaseTable').bootstrapTable("destroy");
    $('#phaseTable').bootstrapTable({
        //直接加載json數據
 data:phaseInfo,
        columns: [{  
            title: '相位編號',
            valign: 'middle',
            align: 'center',
            width: 10,
            formatter: function (value, row, index) {  
                return index+1;  
            }
        },{
            field: 'phase',//json中的key：value值
            title: '相位',
            align: 'center',
            width: 40,
            valign: 'middle',
        },{
            field: 'begin',
            title: '相位開始時間',
            align: 'center',
            width: 30,
            valign: 'middle',
        },{
            field: 'green',
            title: '綠燈時長',
            align: 'center',
            width: 20,
            valign: 'middle',
        },{
            field: 'red',
            title: '紅燈時長',
            align: 'center',
            width: 20,
            valign: 'middle',
        },{
            field: 'yellow',
            title: '黃燈時長',
            align: 'center',
            width: 20,
            valign: 'middle'
        },{
            field: '',
            title: '模擬相位',
            align: 'center',
            width: 200,
            valign: 'middle',
            formatter : function(value,row, index){ 
                return progress(index);
            }//格式化進度條
        }]
        
    });
    //給table表格中添加進度條
    function progress(index){
        var red = phaseInfo[index].red;
        var green = phaseInfo[index].green;
        var yellow = phaseInfo[index].yellow;
        var begin = phaseInfo[index].begin;
        var total = red + green + yellow;
        b = (Math.round(begin / total * 10000) / 100.00 + "%");
        r = (Math.round(red / total * 10000) / 100.00 + "%");
        g = (Math.round(green / total * 10000) / 100.00 + "%");
        y = (Math.round(yellow / total * 10000) / 100.00 + "%");
        return ["<div class='progress'>"
                    +'<div class="progress-bar progress-bar-danger" style="width: '+b+'">'
                    +'<span class="sr-only">Complete (danger)</span>'
                    +'</div>'
                    +'<div class="progress-bar progress-bar-success" style="width: '+g+'">'
                    +'<span class="sr-only">Complete (success)</span>'
                    +'</div>'
                    +'<div class="progress-bar progress-bar-warning" style="width: '+y+'">'
                    +'<span class="sr-only">Complete (warning)</span>'
                    +'</div>'
                    +'<div class="progress-bar progress-bar-danger" style="width: '+r+'">'
                    +'<span class="sr-only">Complete (danger)</span>'
                    +'</div>'
                    +"</div>"]; }
}

 

更多精彩文章歡迎關注公眾號“Java之康庄大道”