bootstraptable动态列数据加载（⼀）
bootstrap table 动态列数据加载（⼀）
我想把所有的收费项⽬作为表头，不固定死收费项⽬，数据库中有啥就显⽰啥。
动态数据加载时，不能⽤bean的嵌套，源码中加载表头和数据是分开的，第⼏列和第⼆层嵌套的bean不能联动。
public class PcChargeWayTempBean {
private String wayid;//收费⽅式id    只列举能显⽰业务的字段
private List<PcChargeWayTempStandardDynamicBean> standardList; //这个收费⽅式的标准
}
原因看bootstrap源码
this.initTable();
this.initHeader();
this.initData();
这⼏个操作时分开的，第⼏列和第⼆层bean中的list的第⼏个是联系不起来的
所以出数据的时候不能⽤这种嵌套的bean
BootstrapTable.prototype.init = function () {
this.initLocale();
this.initContainer();
this.initTable();
this.initHeader();
this.initData();
this.initHiddenRows();
this.initFooter();
this.initToolbar();
this.initPagination();
this.initBody();
this.initSearchText();
this.initServer();
};
1.动态列原理
将js中的columns属性通过Ajax查询得到
1. jsp页⾯准备
<div class="ibox float-e-margins">
<div>
<table id="table_list" data-toggle="table">
</table>
</div>
</div>
2. 页⾯加载完后执⾏js，构建bootstraptable
var query = function(){
initTable();
};
var addEvent = function(){
//调⽤函数，初始化表格
initTable();
$("#search-btn").click(query);
}
$(document).ready(addEvent);
3. 引⼊js中的function加载数据⽅法（固定列）
function initTable(code){
//先销毁表格
bootstrap项目$('#table_list').bootstrapTable('destroy');
//初始化表格，动态从服务器加载数据
$('#table_list').bootstrapTable({
method: "get",  //使⽤get请求到服务器获取数据
url: '/cold/goodslocation/managerJson', //获取数据的Servlet地址        toolbar: '#toolbar',
pagination: true, //启动分页
pageSize: 10,  //每页显⽰的记录数
pageNumber: 1, //当前第⼏页
pageList: [1, 5, 10, 15, 20, 25],  //记录数可选列表
showColumns: true,  //显⽰下拉框勾选要显⽰的列
showRefresh: true,  //显⽰刷新按钮
hideLoading: true,
sidePagination: "server", //表⽰服务端请求
queryParamsType: "undefined",
detailView: false,//⽗⼦表
uniqueId: "id",
columns: [
{
field: 'allocationId',
title: '列的标题',
align: 'center'
},  {
field: 'operate',
title: '操作',
align: 'center',
formatter: operateFormatter
}
],
queryParams: function queryParams(params) {  //设置查询参数            var param = {
pageNumber: params.pageNumber,
pageSize: params.pageSize,
// 这⾥可以放多个参数，controller中都能接收
};
return param;
},
onLoadSuccess: function () {  //加载成功时执⾏
},
onLoadError: function () {  //加载失败时执⾏
}
});
4. 把固定列改造为动态列
在inittable中把列名搞定，ajax同步请求，不是异步
var columnsArray = [];
$.ajax({
async: false,
type: "GET",
url: localHost + "/cold/charge/chargeItems",//我这⾥返回的是所有收费项⽬的bean的list
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": "standardList" //这⾥循环时field是bean的属性，动态数据加载，这⾥是个坑我的bean是两层嵌套的，得按列数来查⾥⾯⼀层的beanList的第⼏个。这⾥这样写达不到效果，是个⼤坑
});
}
},
error: function () {
alert("错误");
}
});
4. 问题怎么解决呢
其实到这⾥，列的加载时从数据库中读取出来的，显⽰多少列只配置下数据就⾏了，但是每⼀条数据的显⽰还有问题，由于使⽤的是嵌套的bean，所以数据是有问题的。
我的列表外层bean嵌套的内层List的bean，这个size是和列数⼀致的，
打个⽐⽅，表头第三列，我想显⽰bean的内层List中的第三个的某个属性，由于表头和数据是不牵扯的，所以我在数据中拿不到是第⼏列，数据会⼀直显⽰最后⼀列的那个值。
再写⼀篇
附
⼆
blog.csdn/wangwenpeng0529/article/details/84703337
三
blog.csdn/wangwenpeng0529/article/details/100984369

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