bootstraptable动态列数据加载（⼆）
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",(i).getMethod());
bootstrap项目eachMap.put("XXXXXXX",(i).getSameTemp());
for(int j = 0;j< (i).getStandardList().size();j++){//处理内层的所有收费项⽬的⾦额
eachMap.put("isornot" + j, (i).getStandardList().get(j).getIsornot()); //是否收费
eachMap.put("price" + j, (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吧，让头和列做联动。尝试
了下，没有搞成功。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。