显示图标以指示单元格附加有下拉列表/列表

Question

当使用列表编辑器从下拉菜单中选择值时，我希望未编辑的单元格有一个图标，显示它附加了一个列表。

看起来像标准 html 选择输入的东西，例如

伦敦V

而不是当前的行为，它们看起来与文本输入相同。

例如在可编辑示例中的位置和性别单元格上

https://tabulator.info/examples/5.5#editable

有没有一种简单的方法可以通过CSS样式来实现这一点？

我查看了构成表格单元格的元素，但无法弄清楚需要添加什么才能实现此目的。

谢谢

Answer 1

一种方法是使用自定义单元格格式化程序来更改单元格元素的显示方式。这是一个示例，我使用列表编辑器将向下箭头添加到颜色列：

const data = [
  { id: 1, name: 'Billy Bob', age: '12', gender: 'male', height: 1, col: 'red', dob: '', cheese: 1 },
  { id: 2, name: 'Mary May', age: '1', gender: 'female', height: 2, col: 'blue', dob: '14/05/1982', cheese: true },
  { id: 10, name: 'Margret Marmajuke', age: '16', gender: 'female', height: 5, col: 'yellow', dob: '31/01/1999' },
]

const table = new Tabulator('#example-table', {
  data: data,
  height: '300px',
  columns: [
    { title: 'Name', field: 'name' },
    { title: 'Age', field: 'age' },
    { title: 'Gender', field: 'gender' },
    { title: 'Height', field: 'height' },
    {
      title: 'Favourite Color',
      field: 'col',
      formatter: (cell) => cell.getValue() + '<span class="listArrow"></span>',
      editor: 'list',
      editorParams: {
        values: ['red', 'green', 'blue', 'orange', 'yellow'],
      },
    },
  ],
})

.listArrow {
  position: absolute;
  right: 8px;
  top: 8px;
  border: solid #333333;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 2px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<div id="example-table"></div>