bootstrap table 动态列数据加载（二）

bootstrap table 动态列数据加载（二）

1. 原理分析
   说到底，后台与前台的数据传输其实还是json，前台显示只不过是拿json的key去显示value，bootstrap-table中提供的field是写死的，用这个field作为key去拿json的value，那我就不再用固定的bean的属性去传值了，改用map，里面用循环的key做页面的属性。
   如果多出一个收费项目，我的bean中也不用去写一个项目了，页面也不用改了。

2. 后台往前传的数据组织

 List<Map<String,Object>> rstList = new ArrayList<>();
        for (int i = 0; i < chargeWayTempBeanList.size(); i++) {//处理外层的收费方式  涉及到 i j 不能用增强for
            Map<String,Object> eachMap = new HashMap<>();
            eachMap.put("method",chargeWayTempBeanList.get(i).getMethod());
            eachMap.put("XXXXXXX",chargeWayTempBeanList.get(i).getSameTemp());
            for(int j = 0;j< chargeWayTempBeanList.get(i).getStandardList().size();j++){//处理内层的所有收费项目的金额
                eachMap.put("isornot" + j, chargeWayTempBeanList.get(i).getStandardList().get(j).getIsornot()); //是否收费
                eachMap.put("price" + j, chargeWayTempBeanList.get(i).getStandardList().get(j).getPrice()); //收费金额
            }
            rstList.add(eachMap);
        }
        PagerBean pagerBean = new PagerBean(chargeWayTempBeanList.size(),rstList);
        return pagerBean;

用map的key不固定，内层循环的时候在key上增加一个数字，这样就相当于（一）中我说的bean的属性是不固定的，在前台写列的时候循环拿到这个key。

3. 页面加载数据

 var columnsArray = [];
    columnsArray.push({"title": "计费方式", "field": "method", formatter: methodFormattrt});
    columnsArray.push({"title": "XXXXXXXXXXXXX, "field": "XXXXXXXXX",formatter:sameTempFormattrt});//有几列是固定的
    $.ajax({//这里是活动的列
        async: false,
        type: "GET",
        url: localHost + "/cold/charge/chargeItems",
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        json: 'callback',
        success: function (json) {
            //循环所有的收费项目
            for(var i = 0;i<json.length;i++ ){
                // json[0] 第一个收费项目  title 是第一个收费项目的名称
                var title = json[i]["itemname"];//活动列名
                columnsArray.push({
                    "title": title,
                    "field": "price" + i,//这里的"price" + i  和后台的map的key中的price0、price1 就能对应起来了，加载数据的时候取这个属性的值
                    "align": "right"//格式
                });
                columnsArray.push({//不显示名称的两列
                    "title": "",
                    "field": "isornot" + i,
                    "formatter":isornotFormattrt//格式化一下 用图标代替
                });
            }
        },
        error: function () {
            alert("错误");
        }
    });

4. 总结
   其实还是由bootstrap-table去获取json的key，只不过是这个获取的时候列数带进去了，json的数据在查询的时候，我也用的列去left join ，所以，有这一列，就肯定有这个属性的数据，像price3列，就去获取这条map数据的price3的属性值，就能显示出来了。
5. 如果非得用两层嵌套的循环bean或者两层嵌套的json去传数据的话，那就搞这个bootstrap-table.min.js吧，让头和列做联动。尝试了下，没有搞成功。

附
一
https://blog.csdn.net/wangwenpeng0529/article/details/84675635
三
https://blog.csdn.net/wangwenpeng0529/article/details/100984369