bootstrap table 动态列数据加载(一)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/wangwenpeng0529/article/details/84675635

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>
  1. 页面加载完后执行js,构建bootstraptable
    var query = function(){
        initTable();
    };

    var addEvent = function(){
        //调用函数,初始化表格
        initTable();
        $("#search-btn").click(query);
    }
    $(document).ready(addEvent);
  1. 引入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 () {  //加载失败时执行
        }
    });
  1. 把固定列改造为动态列
    在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("错误");
        }
    });
  1. 问题怎么解决呢
    其实到这里,列的加载时从数据库中读取出来的,显示多少列只配置下数据就行了,但是每一条数据的显示还有问题,由于使用的是嵌套的bean,所以数据是有问题的。
    我的列表外层bean嵌套的内层List的bean,这个size是和列数一致的,
    打个比方,表头第三列,我想显示bean的内层List中的第三个的某个属性,由于表头和数据是不牵扯的,所以我在数据中拿不到是第几列,数据会一直显示最后一列的那个值。

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

展开阅读全文

没有更多推荐了,返回首页