如何在制表器中创建多选标题过滤器? [英] How do I create a multi-select header filter in tabulator?

问题描述

多年来，这个问题在 Tabulator GitHub 存储库中以各种形式被问过多次.这里有几个例子:https://github.com/olifolkerd/tabulator/issues/527、https://github.com/olifolkerd/tabulator/issues/1759

This question has been asked several times in various forms over the years in the Tabulator GitHub repository. Here are a few instances: https://github.com/olifolkerd/tabulator/issues/527, https://github.com/olifolkerd/tabulator/issues/1759

我正在寻找一个示例，说明如何使用某种形式的下拉菜单来实现这一点 --- 理想情况下如 #1759(带复选框的下拉菜单)中所述，但另一个适用于我们的解决方案是选择"编辑器在选择/取消选择值时在标题过滤器中添加/删除 CSV(扩展到 #527 中提供的示例).

I'm looking for an example of how to achieve this using a dropdown menu of some form --- ideally as described in #1759 (dropdown with checkboxes) but another solution that would work for us is a "select" editor that adds/removes CSVs in the header filter when a value is selected/deselected (extending on the example provided in #527).

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

Hopefully someone with experience working with custom header filters / editors in tabulator can provide an example of a multi-select header filter dropdown, but if not, then I will post a JSFiddle link myself once I've got something that works.

推荐答案

这里是多选"类型制表符的自定义标题过滤器示例.如果需要，可以使用外部源(例如 Chosen 或 multiselect.js

Here is an example of a custom header filter for tabulator of 'select multiple' type. It can be converted to a dropdown style if desired using external sources such as Chosen or multiselect.js

(我建议在整页视图中运行以下代码片段).

(I recommend running the below Code Snippet in Full Page view).

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/

这篇关于如何在制表器中创建多选标题过滤器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！