如何在制表符中创建 multi-select header 过滤器？

Question

这些年来，这个问题在 Tabulator GitHub 存储库中以各种形式被问过几次。以下是几个实例： https://github.com/olifolkerd/tabulator/issues/527, https://github.com/olifolkerd/tabulator/issues/1759

我正在寻找一个示例，说明如何使用某种形式的下拉菜单实现此目的 --- 理想情况下如 #1759（带有复选框的下拉菜单）中所述，但另一个对我们有用的解决方案是 "select" 编辑器，当值为 selected/deselected 时，header 过滤器中的 adds/removes CSV（扩展 #527 中提供的示例）。

希望有在制表符中使用自定义 header 过滤器/编辑器经验的人可以提供 multi-select header 过滤器下拉列表的示例，但如果没有，那么我会 post 一个 JSFiddle link 我自己，一旦我得到了一些有用的东西。

Answer 1

查看我对 Tabulator Multiple Filter in the same Column (show dropbox)

的回答

按您认为合适的方式扩展...

我认为替换为不同样式的 "pulldown" 会很简单

Answer 2

这里是 'select multiple' 类型制表符的自定义 header 过滤器示例。如果需要，可以使用 Chosen or multiselect.js

等外部资源将其转换为下拉样式

（我推荐运行以下全页视图中的代码片段）。

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.class = "chosen-select";
  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,
    headerFilterLiveFilter: false
  }, ],
});

<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>
  </head>

  <body>
    <div id="tabulator"></div>
  </body>

</html>

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

Answer 3

结帐：https://github.com/olifolkerd/tabulator/issues/527#issuecomment-850900451

AkshayaBrianTauro

的简单回答

{
    field: "book_name",
    title: "Book Name",
    headerFilterPlaceholder: " ",
    headerFilter: 'select',
    headerFilterFunc:"in",
    headerFilterParams: {values:true, sortValuesList:"asc", multiselect:true}
},

如何在制表符中创建 multi-select header 过滤器？

How do I create a multi-select header filter in tabulator?

tabulator