为什么我的制表符自定义 header 过滤器在 keyup 时发生变化？

Question

重现：

运行代码段（推荐整页模式）
在 table 列 header
请注意，按住该键时，table 数据会根据 selected 'species'
松开钥匙，观察过滤后的table数据变化

我认为这可能与 https://github.com/olifolkerd/tabulator/issues/975 有关，我需要做一些事情来覆盖默认的制表符按键事件。

JSFiddle：https://jsfiddle.net/jjech/3th28pv0/229/

const speciesTypes = [ 'Human', 'Android', 'Betazoid', 'Klingon', 'Ferengi', 'Tamarian' ];

function multiSelectHeaderFilter(cell) {

 var values = speciesTypes;

 const filterFunc = (rowData) => {
   return values.includes(rowData['species']);
 }

  const getSelectedValues = (multiSelect) => {
    var result = [];
    var options = multiSelect && multiSelect.options;
    var opt;

    for (var i=0, iLen=options.length; i<iLen; i++) {
      opt = options[i];

      if (opt.selected) {
        result.push(opt.value || opt.text);
      }
    }
    return result;
  }

 const onChange = () => {
   var editor = document.getElementById('speciesSelector');
    values = getSelectedValues(editor);
    console.log("values: "+values);
    cell.getColumn().getTable().removeFilter(filterFunc);
    cell.getColumn().getTable().addFilter(filterFunc);
  }

 var select = document.createElement("select");
  select.multiple = "multiple";
 select.id = 'speciesSelector';
  select.style = 'width: 100%';
  speciesTypes.forEach(species => { 
   select.innerHTML += "<option id='"+species+"' value='"+species+"' selected='selected'>"+species+"</option>";
  });
  cell.getColumn().getTable().addFilter(filterFunc);
  select.addEventListener('change',onChange);
  return select;
}

var table = new Tabulator("#tabulator", {
 layout:"fitColumns",
 data:[ {name:'Geordi La Forge',species:'Human'}, {name:'Dathon', species:'Tamarian'}, {name:'Jean-Luc Picard', species:'Human'}, {name:'Worf, son of Mogh', species:'Klingon'}, {name:'Tasha Yarr', species:'Human'}, {name:'Data', species:'Android'}, {name:'Wesley Crusher', species:'Human'}, {name:'Jalad', species:'Tamarian'}, {name:'Lwaxana Troi', species:'Betazoid'}, {name:'Temba', species:'Tamarian'}, {name:'T\'Kuvma', species:'Klingon'}, {name:'Lore', species:'Android'}, {name:'Noonian Soongh', species:'Human'}, {name:'Darmok', species:'Tamarian'}, {name:'Reittan Grax', species:'Betazoid'}, {name:'Quark', species:'Ferengi'} ],
 headerSort:true,
 columns:[ {title:'Name',field:'name',sorter:'string'},{title:'Species',field:'species',sorter:'string',headerFilter:multiSelectHeaderFilter }, ],
});

//document.multiselect('#speciesSelector');

<html>
<head>
<link href="https://unpkg.com/tabulator-tables@4.5.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.5.3/dist/js/tabulator.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/mneofit/multiselect/styles/multiselect.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/mneofit/multiselect/multiselect.min.js"></script>
<script></script>
<style>
.tabulator .tabulator-header,
.tabulator .tabulator-header .tabulator-col
{
  overflow: unset;
}
</style>
</head>
<body>
<div id="tabulator"></div>
</body>
</html>

Answer 1

已通过向列定义添加 headerFilterLiveFilter:false 进行修复。

columns:[ {title:'Name',field:'name',sorter:'string'},{title:'Species',field:'species',sorter:'string',headerFilter:multiSelectHeaderFilter,headerFilterLiveFilter:false }, ],

https://jsfiddle.net/jjech/3th28pv0/237/

为什么我的制表符自定义 header 过滤器在 keyup 时发生变化？

Why is my tabulator custom header filter changing on keyup?

tabulator