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',
             10,
            formatter: function (value, row, index) {  
                return index+1;  
            }
        },{
            field: 'phase',//json中的key：value值
            title: '相位',
            align: 'center',
             40,
            valign: 'middle',
        },{
            field: 'begin',
            title: '相位开始时间',
            align: 'center',
             30,
            valign: 'middle',
        },{
            field: 'green',
            title: '绿灯时长',
            align: 'center',
             20,
            valign: 'middle',
        },{
            field: 'red',
            title: '红灯时长',
            align: 'center',
             20,
            valign: 'middle',
        },{
            field: 'yellow',
            title: '黄灯时长',
            align: 'center',
             20,
            valign: 'middle'
        },{
            field: '',
            title: '模拟相位',
            align: 'center',
             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=" '+b+'">'
                    +'<span class="sr-only">Complete (danger)</span>'
                    +'</div>'
                    +'<div class="progress-bar progress-bar-success" style=" '+g+'">'
                    +'<span class="sr-only">Complete (success)</span>'
                    +'</div>'
                    +'<div class="progress-bar progress-bar-warning" style=" '+y+'">'
                    +'<span class="sr-only">Complete (warning)</span>'
                    +'</div>'
                    +'<div class="progress-bar progress-bar-danger" style=" '+r+'">'
                    +'<span class="sr-only">Complete (danger)</span>'
                    +'</div>'
                    +"</div>"];
    }
}

更多精彩文章欢迎关注公众号“Java之康庄大道”