如何在制表器中创建多选标题过滤器？答案

【问题标题】：How do I create a multi-select header filter in tabulator?如何在制表器中创建多选标题过滤器？
【发布时间】：2020-02-14 01:29:51
【问题描述】：

多年来，Tabulator GitHub 存储库中已多次以各种形式提出此问题。这里有几个例子： https://github.com/olifolkerd/tabulator/issues/527, https://github.com/olifolkerd/tabulator/issues/1759

我正在寻找一个示例，说明如何使用某种形式的下拉菜单来实现这一点 --- 理想情况下，如 #1759（带复选框的下拉菜单）中所述，但另一种适用于我们的解决方案是“选择”编辑器选择/取消选择值时，在头部过滤器中添加/删除CSV（在＃527中提供的示例上延伸）。

希望有在制表器中使用自定义标题过滤器/编辑器经验的人可以提供一个多选标题过滤器下拉列表的示例，但如果没有，那么一旦我有一些有用的东西，我将自己发布一个 JSFiddle 链接。

【问题讨论】：

标签： tabulator

【解决方案1】：

结帐：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}
},

【讨论】：

当我过滤我的表时，它说：过滤值不是一个数组：...

【解决方案2】：

以下是“选择多个”类型制表器的自定义标题过滤器示例。如果需要，可以使用Chosen 或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/

【讨论】：

【解决方案3】：

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

如你所愿地扩展...

我不认为替换为不同样式的“下拉”将是微不足道的。

【讨论】：