首页 > Bootstrap表格插件Bootstrap Table配置教程 > bootstrap table Response Handler数据预处理

bootstrap table Response Handler数据预处理

       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;
            }
        });

在线试一试