bootstrap table 在服务器返回数据成功后,会回调responseHandler事件,利用responseHandler事件可以在表格渲染之前,对数据进行修改。如对日期进行格式把2019/1/1 12:10:1 转换成2019-01-01 12:10:01格式或者把浮点数18.12345格式化成18.12。
我们来演示根据不同的产品类型显示不同的计价单位。
服务器返回的原始数据:
var data = [{
Id: 1,
ProductName: '香蕉',
StockNum: '100'
}, {
Id: 2,
ProductName: '苹果',
StockNum: '200'
}];
我们要把上面的原始数据转换成以下计价单位数据:
var data = [{
Id: 1,
ProductName: '香蕉',
StockNum: '100近' //**********注意单位**********
}, {
Id: 2,
ProductName: '苹果',
StockNum: '200个' //**********注意单位**********
}];
responseHandler实现代码:
//设置需要显示的列
var columns = [{
field: 'Id',
title: '编号'
}, {
field: 'ProductName',
title: '产品名称'
}, {
field: 'StockNum',
title: 'Item 库存'
}];
$('#table').bootstrapTable({
url: '/package/bootstrap-table-1.14.1/data.json',
pagination: true,//开启分页
columns: columns,
responseHandler: function (data) {
//**********注意**********
for (var i = 0; i < data.rows.length; i++)
{
if (data.rows[i]["ProductName"] == "苹果") data.rows[i]["StockNum"] = data.rows[i]["StockNum"] + "个";
if (data.rows[i]["ProductName"] == "香蕉") data.rows[i]["StockNum"] = data.rows[i]["StockNum"] + "斤";
}
return data;
}
});