清除 BootstrapTable 中的过滤器值

Question

我有一个带过滤器的 bootstrapTable，带有服务器端数据。

<table class="table table-condensed table-bordered table-hover" id="position-list"
data-toggle="table" 
data-page-list="[10, 25, 50, 100, ALL]"
data-url="/getData.jsp"
data-side-pagination="server"
data-pagination="true" 
data-click-to-select="true"
data-id-field="id"
data-show-footer="false"   
data-minimum-count-columns="2"                           
data-height="550" 
data-filter-control="true" 
data-filter-show-clear="true"
>
<thead>
<tr>
    <th data-sortable="true" data-field="Status" data-filter-control="select">Status</th>
      ....

行 data-filter-show-clear="true" 向 bootstrapTable 添加了一个按钮，效果很好。这是开发人员 http://issues.wenzhixin.net.cn/bootstrap-table/#extensions/filter-control.html

的演示

问题是我在屏幕的其他地方有自己的按钮，我想激活清除过滤器，但我不需要这个默认按钮。

我尝试过的一个选项是将以下代码附加到我的按钮

 $('.form-control').val('');
 $('#position-list').bootstrapTable('refresh');

但是它不起作用 - 通过调试 bootstrap-table.js 我可以看到 filterColumnsPartial 没有被重置，所以我的手动过滤器选择被忽略了。

有什么想法吗？

Answer 1

我用这个技巧解决了这个问题：

$('#yourCustomButtonId').on('click', function(){ $('.filter-show-clear').trigger('click') });

如果你需要隐藏按钮，你可以使用这个：

.filter-show-clear {visibility: hidden; position: absolute; top: -9999px}

这将解决问题。

注意：关于您的代码以及为什么不起作用，因为删除功能是删除过滤器、清除 cookie 和重置过滤器等

BootstrapTable.prototype.clearFilterControl = function () {
        if (this.options.filterControl && this.options.filterShowClear) {
            var that = this,
                cookies = collectBootstrapCookies(),
                header = getCurrentHeader(that),
                table = header.closest('table'),
                controls = header.find(getCurrentSearchControls(that)),
                search = that.$toolbar.find('.search input'),
                timeoutId = 0;

            $.each(that.options.valuesFilterControl, function (i, item) {
                item.value = '';
            });

            setValues(that);

            // Clear each type of filter if it exists.
            // Requires the body to reload each time a type of filter is found because we never know
            // which ones are going to be present.
            if (controls.length > 0) {
                this.filterColumnsPartial = {};
                $(controls[0]).trigger(controls[0].tagName === 'INPUT' ? 'keyup' : 'change');
            } else {
                return;
            }

            if (search.length > 0) {
                that.resetSearch();
            }

            // use the default sort order if it exists. do nothing if it does not
            if (that.options.sortName !== table.data('sortName') || that.options.sortOrder !== table.data('sortOrder')) {
                var sorter = header.find(sprintf('[data-field="%s"]', $(controls[0]).closest('table').data('sortName')));
                if (sorter.length > 0) {
                    that.onSort(table.data('sortName'), table.data('sortName'));
                    $(sorter).find('.sortable').trigger('click');
                }
            }

            // clear cookies once the filters are clean
            clearTimeout(timeoutId);
            timeoutId = setTimeout(function () {
                if (cookies && cookies.length > 0) {
                    $.each(cookies, function (i, item) {
                        if (that.deleteCookie !== undefined) {
                            that.deleteCookie(item);
                        }
                    });
                }
            }, that.options.searchTimeOut);
        }
    };

我厌倦了找到一个清晰的按钮选项，但我找不到一个，所以你需要触发当前过滤器或构建核心原型的清晰功能依赖或任何其他方式....

Answer 2

您也可以使用

$('#yourCustomButtonId').on('click', function(){ $('table').bootstrapTable('clearFilterControl') }); })

Answer 3

更清洁的解决方案：

$('#position-list').bootstrapTable('filterBy', {});

清除 BootstrapTable 中的过滤器值

Clear Filter Values in BootstrapTable

jquery

twitter-bootstrap

bootstrap-table

bootstrap-4