BootstrapTable动态修改实例对象Options等属性参数

如何在不使用BootstrapTable提供的API的情况下直接修改对象内部属性值？

先说文本的解决方案：使用$table.data(‘bootstrap.table‘)方法。

• 背景

在使用BootstrapTable（version: 1.12.1）开发项目过程中，遇到一个业务需求，需要在表格加载完成后，根据前端运算隐藏相关列。

• 方案

使用$table.bootstrapTable(‘getOptions’)获取并更新列相关属性，最后执行refreshOptions更新表格

var options = $table.bootstrapTable('getOptions');
var columns = options.columns[0];

for (var i = 0; i < columns.length; i++) {
    if(...){
        columns[i].visible = false;
    }
}

//url置空，避免没必要的请求
$table.bootstrapTable('refreshOptions', { columns: columns, url: null });

//如何恢复url?

• 问题分析

按上述方案执行后，发现翻页时数据无更新，原因是url被置为null了。

如下BootstrapTable源码所示，使用提供的API：getOptions获取到的是对象参数的拷贝。

//BootstrapTable 部分源码

//...

BootstrapTable.prototype.getOptions = function () {
    //Deep copy
    return $.extend(true, {}, this.options);
};

//...

BootstrapTable.prototype.refreshOptions = function (options) {
    //If the objects are equivalent then avoid the call of destroy / init methods
    if (compareObjects(this.options, options, true)) {
        return;
    }
    this.options = $.extend(this.options, options);
    this.trigger('refresh-options', this.options);
    this.destroy();
    this.init();
};

//...

因此修改该方法获取到的参数并不影响对象的原属性。而使用官方开放的方法refreshOptions()则在更新参数配置的同时会触发重建表格等一系列操作。那该如何仅修改对象内部属性呢？

$table.bootstrapTable({...});

var options = $table.bootstrapTable('getOptions');

options.url = newUrl;//该操作不会修改实例原有参数

$table.bootstrapTable('refreshOptions', { url: newUrl });//该操作可修改实例参数，但同时会重建表格

• 解决方案

通过阅读源码可知，BootstrapTable将实例对象属性保存在对应Jquery对象的data中，通过访问data(‘bootstrap.table’)即可获取相关属性并动态修改。

//使用如下方法即可获得对象实时参数并修改
var data = $table.data('bootstrap.table');
data.options.url = newUrl;//该操作后，url属性值已更新，不会触发数据请求和DOM变动