使用BootStrap Table封装js 时 detailView detailFormatter的问题

发布于 2022-09-07 19:49:13 字数 6607 浏览 17 评论 0

问题描述

使用BootStrap Table封装js 时 detailView detailFormatter时不可用

问题出现的环境背景及自己尝试过哪些方法

使用默认的方法是没问题的:
$('#tableCompany').bootstrapTable({

               height: 650,
               detailView: true,
              detailFormatter: function (index, row) {
                 return '<div class="form-group has-success"><label class="col-sm-2 control-label">备注:</label><label class="col-sm-4">' + row.Remark + '</label><label class="col-sm-2 control-label">登记日期:</label><label class="col-sm-4">' + timeFormatter(row.LogTime) + '</label></div></br>';
                },
             columns: [
                   ],
            });

用下述封装过的js就有问题:

   var tableList = { id:"listTable"};
    $(function () {
        var defaultColunms = tableList.initColumn();
         var config = {
            detailView: true,
                detailFormatter: function (index, row) {
                    return '<div class="form-group has-success"><label class="col-sm-2 control-label">备注:</label><label class="col-sm-4">' + row.Remark + '</label><label class="col-sm-2 control-label">登记日期:</label><label class="col-sm-4">' + timeFormatter(row.LogTime) + '</label></div></br>';
                }}
        var table = new BSTable(tableList.id, "/Company/GetJsonData", defaultColunms,config );
        tableList.table = table.init();
    });

    tableList.initColumn = function () {
    return []}

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

封装js :
(function () {

var BSTable = function (bstableId, url, columns, extendConfig) {
    this.btInstance = null;//jquery和BootStrapTable绑定的对象
    this.bstableId = bstableId; 
    this.url = url;
    this.method = "get";
    this.paginationType = "server";//默认分页方式是服务器分页,可选项"client"
    this.toolbarId = bstableId + "Toolbar";
    this.columns = columns;
    this.height = 690;//默认表格高度690
    this.data = {};
    this.queryParams = {}; // 向后台传递的自定义参数
    this.extendConfig = extendConfig;
};

BSTable.prototype = {
    /**
     * 初始化bootstrap table
     */
    init: function () {
        var tableId = this.bstableId;
        var qParams = this.queryParams;
        var defaultConfig = {
            contentType: "application/json",
            url: this.url,              //请求地址
            method: this.method,        //ajax方式,post还是get
            ajaxOptions: {              //ajax请求的附带参数
                data: this.data
            },
            toolbar: "#" + this.toolbarId,//顶部工具条
            striped: true,              //是否显示行间隔色
            cache: false,               //是否使用缓存,默认为true
            pagination: true,           //是否显示分页(*)
            sortable: true,             //是否启用排序
            sortOrder: "asc",          //排序方式
            pageNumber: 1,                  //初始化加载第一页,默认第一页
            pageSize: 15,               //每页的记录行数(*)
            pageList: [15, 30, 50, 100],    //可供选择的每页的行数(*)
            queryParamsType: 'limit',   //默认值为 'limit' ,在默认情况下 传给服务端的参数为:offset,limit,sort
            queryParams: function (params) {
                var temp = {
                    rows: params.limit,
                    page: (params.offset) / params.limit + 1,
                    sidx: params.sort,
                    sord: params.order,
                    keywords: params.search
                };
                return $.extend(temp, qParams);
            }, // 向后台传递的自定义参数
            sidePagination: this.paginationType,   //分页方式:client客户端分页,server服务端分页(*)
            search: true,              //是否显示表格搜索,此搜索是客户端搜索,不会进服务端
            strictSearch: false,         //设置为 true启用 全匹配搜索,否则为模糊搜索
            showColumns: true,          //是否显示所有的列
            showRefresh: true,          //是否显示刷新按钮
            minimumCountColumns: 2,     //最少允许的列数
            clickToSelect: true,        //是否启用点击选中行
            searchOnEnterKey: false,     //设置为 true时,按回车触发搜索方法,否则自动触发搜索方法
            columns: this.columns,      //列数组
            height: this.height,
            icons: {
                refresh: 'glyphicon-repeat',
                toggle: 'glyphicon-list-alt',
                columns: 'glyphicon-list'
            },
            iconSize: 'outline'
        };
        var bsTableConfig = {};
        if (typeof this.extendConfig == "object") {
            bsTableConfig = $.extend(defaultConfig, this.extendConfig);
        }
        else {
            bsTableConfig = defaultConfig;
        }
        console.log(bsTableConfig);
        this.btInstance =
            $('#' + tableId).bootstrapTable(bsTableConfig);
        return this;
    },
    /**
     * 向后台传递的自定义参数,此处传递的变量的值不可变
     * 如果值一直在变化中,需要在refresh中通过url参数传递
     * @param param
     */
    setQueryParams: function (param) {
        this.queryParams = param;
    },
    /**
     * 设置分页方式:server 或者 client
     */
    setPaginationType: function (type) {
        this.paginationType = type;
    },
    /**
     * 设置ajax post请求时候附带的参数
     */
    set: function (key, value) {
        if (typeof key == "object") {
            for (var i in key) {
                if (typeof i == "function")
                    continue;
                this.data[i] = key[i];
            }
        } else {
            this.data[key] = (typeof value == "undefined") ? $("#" + key).val() : value;
        }
        return this;
    },

    /**
     * 设置ajax post请求时候附带的参数
     */
    setData: function (data) {
        this.data = data;
        return this;
    },

    /**
     * 清空ajax post请求参数
     */
    clear: function () {
        this.data = {};
        return this;
    },

    /**
     * 刷新 bootstrap 表格
     * Refresh the remote server data,
     * you can set {silent: true} to refresh the data silently,
     * and set {url: newUrl} to change the url.
     * To supply query params specific to this request, set {query: {foo: 'bar'}}
     */
    refresh: function (parms) {
        if (typeof parms != "undefined") {
            this.btInstance.bootstrapTable('refresh', parms);
        } else {
            this.btInstance.bootstrapTable('refresh');
        }
    },
    /**
   * 获取选中行数据
   */
    getSelections: function () {
        return this.btInstance.bootstrapTable('getSelections');
    }
};
window.BSTable = BSTable;

}());

你期待的结果是什么?实际看到的错误信息又是什么?

期待的结果:图片描述

用封装js显示的结果:
图片描述

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文