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

最新推荐文章于 2024-10-04 18:21:08 发布

Debug-ya

最新推荐文章于 2024-10-04 18:21:08 发布

阅读量2.4w

点赞数

分类专栏： bootstrap jsp 文章标签： bootstrap table

本文链接：https://blog.csdn.net/wangwenpeng0529/article/details/84675635

版权

jsp 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

bootstrap

4 篇文章 0 订阅

订阅专栏

本文探讨了在BootstrapTable中实现动态列数据加载的方法，重点介绍了如何根据数据库中的收费项目动态生成表头，以及在不使用bean嵌套的情况下加载数据。文章详细解释了动态列原理，并分享了解决方案。

摘要由CSDN通过智能技术生成

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查询得到

jsp页面准备

<div class="ibox float-e-margins">
   <div>
       <table id="table_list" data-toggle="table">
       </table>
   </div>
</div>

页面加载完后执行js，构建bootstraptable

    var query = function(){
        initTable();
    };

    var addEvent = function(){
        //调用函数，初始化表格
        initTable();
        $("#search-btn").click(query);
    }
    $(document).ready(addEvent);

引入js中的function加载数据方法（固定列）

function initTable(code){
    //先销毁表格
    $('#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 () {  //加载失败时执行
        }
    });

把固定列改造为动态列
在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("错误");
        }
    });

问题怎么解决呢
其实到这里，列的加载时从数据库中读取出来的，显示多少列只配置下数据就行了，但是每一条数据的显示还有问题，由于使用的是嵌套的bean，所以数据是有问题的。
我的列表外层bean嵌套的内层List的bean，这个size是和列数一致的，
打个比方，表头第三列，我想显示bean的内层List中的第三个的某个属性，由于表头和数据是不牵扯的，所以我在数据中拿不到是第几列，数据会一直显示最后一列的那个值。

再写一篇
附
二
https://blog.csdn.net/wangwenpeng0529/article/details/84703337
三
https://blog.csdn.net/wangwenpeng0529/article/details/100984369