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>"];
}
}