标头过滤 - 使用向下箭头创建选择字段

Question

我正在使用 Tabulator 5.x。我有一个带有标题过滤的表。有问题的列是最后一列“转录”。有没有办法在选择框的右侧显示典型的向下箭头，向最终用户显示它是一个下拉列表，类似于您在 html 中使用选项？而不必单击过滤字段来查看选择。

我查看了文档，但没有看到任何使用向下箭头的示例。我也查看了 CSS，但如果确实存在的话，我什么也没做。

---

var table = new Tabulator("#transcription-table", {
height:"640px",
layout:"fitDataStretch",
ajaxURL:"get_transcriptions.php",
columns:[
    {title:"ID", field:"id", headerSort:false, visible:false},       
    {title:"Song Title", field:"songtitle", width:350, sorter:"string", headerFilter:"input"},
    {title:"Artist / Group", field:"artistgroup", widthGrow:1.5 ,sorter:"string", headerFilter:"input"},

    {title:"Transcribed", field:"transcribed", widthGrow:1.2, sorter:"string", headerTooltip:"Transcribed into music notation", editor:"select", editorParams:{values:{"Yes":"Yes", "No":"No"}}, headerFilter:true, headerFilterParams:{values:{"Yes":"Yes", "No":"No", "":""}}},
    
    ]
});

---

谢谢你。

Answer 1

您可以通过扩展编辑器模块来创建自己的编辑器

Tabulator.extendModule("edit", "editors", {
  selectwithdrop: function (cell, onRendered, success, cancel, editorParams) {
      var cellValue = cell.getValue().toUpperCase(),
            input = document.createElement("select");

        Object.keys(editorParams.values).forEach((key) => {
          let option = document.createElement("option");
          option.text = editorParams.values[key];
          option.value = key;
          input.add(option);
      });

      input.style.padding = "10px";
      input.style.width = "100%";
      input.style.boxSizing = "border-box";
      input.style.border = "1px solid #4b4b4b";
      input.style.borderRadius = "5px";
      input.style.outline = "none";

      input.value = cellValue;

      // onRendered(function () {
      //    input.focus();
      //    input.style.height = "100%";
      // });

      function onChange(e) {
          success(input.value);
      }

      //submit new value on blur or change
      input.addEventListener("change", onChange);
      // input.addEventListener("blur", onChange);

      //submit new value on enter

      return input;
  },
});

工作演示

CodeSandBox

Answer 2

制表符确实提供了内置选项来显示标题字段和单元格中的选择框。 然而，唯一的问题是它也将选择框应用于行。

这里是列定义的演示示例，用于在标题过滤器中显示选择框。额外的属性

editor, headerFilterParams, editorParams, clearable

需要提供

{{title:"Artist / Group", field:"artistgroup", headerFilter:true,visible:true,editor: "list", editorParams: { values:getHeaderValues() }, headerFilterParams: { values: getHeaderValues(), clearable: true }},

这是返回列表的函数供您参考

function getHeaderValues(){
    let planStatusLabels = {};
    Object.keys($plan_status_map_en).forEach(key => {
      planStatusLabels[key] = $plan_status_map_en[key].label;
  });
  return planStatusLabels;
  }

您可以跳过属性

editorParams

，单击单元格项目时它仍然会显示一个下拉列表，并且值将为 

no value

。

这里是制表器与演示的文档链接：

https://tabulator.info/examples/6.2?#filter-header

编辑： 解决方案非常简单。您只需将可编辑设置为 False 即可避免单击单元格时出现下拉菜单。 editable:false