BarryWearBurberry 2022-03-02 13:37 采纳率: 81.8%
浏览 226
已结题

bootstrap table动态列使用footerformatter

问题遇到的现象和发生背景

bootstrap table动态提取表头,并将与表头对应的数据拼接显示,现在有新的需求,需要在每一列的下方显示Max,Min等信息,想着使用footerformatter方法,在动态获取表头的getColumns()方法里的myColumns push footerformatter函数来实现,但一直报错,


function getColumns() {
    // 加载动态表格
    $.ajax({
        url : prefix + "/getcolumns?maintableId=" + maintableId+"&type="+type,
        type : 'get',
        dataType : "json",
        async : false,
        success : function(returnValue) {
            // 未查询到相应的列,展示默认列
            if (returnValue.rows.length <= 0) {
                //没查到列的时候把之前的列再给它
                myColumns = null;
            } else {
                // 异步获取要动态生成的列
                arr = returnValue.rows;
                $.each(arr, function(i, item) {
                myColumns.push({                
                       "field" : item.columnDatabase.replaceAll("_",""),
                       "title" : item.columnBusiness,
                        //width : 50,
                        switchable: true,
                        sortable: true,
                        footerformatter: function(rows){
                               var columns = item.columnDatabase.replaceAll("_","");
                               var sum = 0;
                                     for (var i=0;i<rows.length;i++) {
                                      sum += rows[i].columns
                                        }
                                    return sum;
                              }                       
                    });                                                    
                });
            }
            myColumnsJson = JSON.stringify(myColumns);
            console.log(myColumnsJson);
            console.log(myColumns);
            return myColumnsJson;
        }
    });
}

function load() {
    $('#exampleTable')
            .bootstrapTable(
                    {
                        method : 'get', // 服务器数据的请求方式 get or post
                        url : prefix + "/list",
                        //+ "?maintableId=" + maintableId+"&type="+type, // 服务器数据的加载地址
                        //showRefresh : true,
                        //showToggle : true,
                        //showColumns : true,
                        // rowStyle: rowStyle,
                        iconSize : 'outline',
                        toolbar : '#exampleToolbar',
                        striped : true, // 设置为true会有隔行变色效果
                        dataType : "json", // 服务器返回的数据类型
                        pagination : true, // 设置为true会在底部显示分页条
                        // queryParamsType : "limit",
                        // //设置为limit则会发送符合RESTFull格式的参数
                        singleSelect : false, // 设置为true将禁止多选
                        // contentType : "application/x-www-form-urlencoded",
                        // //发送到服务器的数据编码类型
                        pageSize : 10, // 如果设置了分页,每页数据条数
                        pageNumber : 1, // 如果设置了分布,首页页码
                        //search : true, // 是否显示搜索框
                        showFooter: true,
                        showColumns : false, // 是否显示内容下拉框(选择显示的列)
                        sidePagination : "server", // 设置在哪里进行分页,可选值为"client" 或者 "server"
                        queryParams : function(params) {
                            return {
                                //说明:传入后台的参数包括offset开始索引,limit步长,sort排序列,order:desc或者,以及所有列的键值对
                                limit: params.limit,
                                offset:params.offset,
                                maintableId:maintableId,
                                type:type,                            
                                page : (params.offset / params.limit) + 1, //当前页码
                               // name:$('#searchName').val(),
                               // username:$('#searchName').val()
                            };
                        },
                        // //请求服务器数据时,你可以通过重写参数的方式添加一些额外的参数,例如 toolbar 中的参数 如果
                        // queryParamsType = 'limit' ,返回参数必须包含
                        // limit, offset, search, sort, order 否则, 需要包含:
                        // pageSize, pageNumber, searchText, sortName,
                        // sortOrder.
                        // 返回false将会终止请求
                        columns : myColumns
                    });
}

getColumns()对应的xml

 <select id="column" resultType="com.goermicro.oar.domain.ColreltableDO">
            SELECT  COLUMN_BUSINESS, COLUMN_DATABASE
              FROM OAR_COLRELTABLE 
              <where>  
                    <if test="process != null and process != ''"> and PROCESS = #{process} </if>
                    <if test="product != null and product != ''"> and PRODUCT = #{product} </if>                 
                    <if test="type != null and type != ''"> and TYPE = #{type} </if>
                    <if test="tableName != null and tableName != ''"> and tableName = #{tableName} </if>
                  </where>
              ORDER BY ID ASC 
     </select>


数据库表头和列的对应关系

img

运行结果及报错内容

img

如何解决,或者别的思路

  • 写回答

2条回答 默认 最新

  • CSDN专家-showbo 2022-03-02 14:07
    关注

    sum += rows[i].columns
    ==>改成下面这样
    sum += rows[i][columns]

    要不获取的是数据行中columns这键的值,而不是columns变量存储的键名称的值

    哈哈哈哈哈。。最主要的问题。。没区分大小写。。-_-||。。

    footerFormatter,不是footerformatter

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 3月10日
  • 已采纳回答 3月2日
  • 修改了问题 3月2日
  • 修改了问题 3月2日
  • 展开全部

悬赏问题

  • ¥15 streamingtool
  • ¥15 MATLAB图像问题
  • ¥20 树莓派5做人脸情感识别与反馈系统
  • ¥15 selenium 控制 chrome-for-testing 在 Linux 环境下报错 SessionNotCreatedException
  • ¥15 使用pyodbc操作SQL数据库
  • ¥15 MATLAB实现下列
  • ¥30 mininet可视化打不开.mn文件
  • ¥50 C# 全屏打开Edge浏览器
  • ¥80 WEBPACK性能优化
  • ¥30 python拟合回归分析