问如何在制表器中创建多选择头过滤器？
EN

Stack Overflow用户

提问于 2020-02-13 17:29:51

回答 3查看 3.9K关注 0票数 3

多年来，在制表器GitHub存储库中，这个问题已多次以各种形式被问到。下面是几个例子：https://github.com/olifolkerd/tabulator/issues/527，https://github.com/olifolkerd/tabulator/issues/1759

我正在寻找一个如何使用某种形式的下拉菜单来实现这一目标的示例--理想的方法是#1759 (带有复选框的下拉菜单)，但是另一个对我们有用的解决方案是一个"select“编辑器，当一个值被选中/取消选中(扩展到#527中提供的示例)时，它会在标题过滤器中添加/删除CSV。

希望有经验的人与自定义标题过滤器/编辑器在制表器可以提供一个多选择头过滤器下拉，但如果没有，那么我将张贴我自己的JSFiddle链接，一旦我得到了一些工作。

tabulator

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-02-18 08:54:59

下面是一个用于“选择多个”类型的制表器的自定义头过滤器的示例。如果需要，可以使用外部源(如选好或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/

票数 2

Stack Overflow用户

发布于 2021-06-11 10:24:15

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