bootstrap table 使用cookie filter的bug解决

原创已于 2022-06-15 16:39:11 修改 · 501 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #bug #javascript

于 2022-06-15 16:37:13 首次发布

bootstraptable 专栏收录该内容

1 篇文章

订阅专栏

本文档详细记录了在使用BootstrapTable时遇到的一个问题，即在输入搜索关键字时，未完成输入就触发搜索导致汉字无法正常输入的bug。作者通过逐步定位代码，发现在`bootstrap-table-filter-control.js`文件中，搜索事件被错误地触发。解决方法是禁用`enableControls(false)`，在初始化BootstrapTable时设置`disableControlWhenSearch: false`，防止搜索时锁定输入控件。这有助于确保用户可以完整输入搜索条件。

开发的所有项目的表格table，全部采用bootstraptable实现的，主要是该开源项目由中国人制作，所以实现方式和文档符合中国人的逻辑，

Bootstrap Table中文网

本人采用bootstrap3.0的版本

在使用bootstraptable中的扩展cookie 和 filter 组件会出现在列表头输入搜索时，没有输入完成就马上触发搜索，比如拼音没拼完汉字时就触发提交搜索，因此造成汉字无法打出的bug，排查很久原因，是出现在bootstrap-table-filter-control.js文件中，一步步定位

key: "onColumnSearch",
      value: function onColumnSearch(_ref2) {
        var currentTarget = _ref2.currentTarget,
            keyCode = _ref2.keyCode;

        if ($__default['default'].inArray(keyCode, [37, 38, 39, 40]) > -1) {
          return;
        }

        copyValues(this);
        var text = $__default['default'].trim($__default['default'](currentTarget).val());
        var $field = $__default['default'](currentTarget).closest('[data-field]').data('field');
        this.trigger('column-search', $field, text);

        if ($__default['default'].isEmptyObject(this.filterColumnsPartial)) {
          this.filterColumnsPartial = {};
        }

        if (text) {
          this.filterColumnsPartial[$field] = text;
        } else {
          delete this.filterColumnsPartial[$field];
        }

        this.options.pageNumber = 1;
        this.enableControls(false);
        this.onSearch({
          currentTarget: currentTarget
        }, false);
      }

再找到注销this.enableControls(false);后bug消失，因此找到enableControls

key: "enableControls",
      value: function enableControls(enable) {
        if (this.options.disableControlWhenSearch && this.options.sidePagination === 'server') {
          var searchControls = getSearchControls(this);

          if (!enable) {
            searchControls.prop('disabled', 'disabled');
          } else {
            searchControls.removeProp('disabled');
          }
        }
      }

searchControls.prop('disabled', 'disabled');

这里造成的，原来是开启搜索disable 输入控件造成的，因此在初始化bootstaptable，构造参数时一定要：

disableControlWhenSearch: false,

即不能开启搜索锁定控件不能搜索的功能