如何在单元格下拉列表中显示标签值而不是存储值？

Question

如何在单元格下拉列表中显示标签值而不是存储值？

我正在使用 Tabulator.js 创建交互式表格。我有一个下拉单元格（编辑器类型：选择），并找到了如何在从列表中选择时显示不同的标签（可以在此处找到说明，第三种方式）。

当我选择某些内容时，会显示存储的值，但不会显示标签（单击列表时会显示标签）。我希望存储的值是数据库中的 ID，并且我根本不希望用户看到它，而只是看到标签文本。

这是一些示例代码：

var table = new Tabulator("#example-table", {
    data:tabledata,           //load row data from array
    layout:"fitColumns",      //fit columns to width of table
    responsiveLayout:"hide",  //hide columns that dont fit on the table
    tooltips:true,            //show tool tips on cells
    addRowPos:"top",          //when adding a new row, add it to the top of the table
    history:true,             //allow undo and redo actions on the table
    pagination:"local",       //paginate the data
    paginationSize:7,         //allow 7 rows per page of data
    movableColumns:true,      //allow column order to be changed
    resizableRows:true,       //allow row order to be changed
    initialSort:[             //set the initial sort order of the data
        {column:"name", dir:"asc"},
    ],
    columns:[                 //define the table columns
        {title:"Name", field:"name", editor:"select", editorParams:{
    values:{
        "steve":"Steve Boberson",
        "bob":"Bob Jimmerson",
        "jim":"Jim Stevenson",
    }
}},
    ],
});

Run Code Online (Sandbox Code Playgroud)

Answer 1

dot*_*pro 0

只需交换值即可

const tabledata = [{
    name: 'Steve Stevenson'
  },
  {
    name: 'Bob Boberson'
  },
  {
    name: 'Tim Timmersonn'

  },
  {
    name: 'Steve Boberson'
  }
];


const table = new Tabulator("#example-table", {
  data: tabledata, //load row data from array
  layout: "fitColumns", //fit columns to width of table
  responsiveLayout: "hide", //hide columns that dont fit on the table
  tooltips: true, //show tool tips on cells
  addRowPos: "top", //when adding a new row, add it to the top of the table
  history: true, //allow undo and redo actions on the table
  pagination: "local", //paginate the data
  paginationSize: 7, //allow 7 rows per page of data
  movableColumns: true, //allow column order to be changed
  resizableRows: true, //allow row order to be changed
  initialSort: [ //set the initial sort order of the data
    {
      column: "name",
      dir: "asc"
    },
  ],
  columns: [ //define the table columns
    {
      title: "Name",
      field: "name",
      editor: "select",

  
  editorParams: {
  
    values: {
      "Steve Boberson": "steve",
      "Bob Jimmerson": "bob",
      "Jim Stevenson": "jim"
    }
    
  }
    


    },
  ],
});

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>

<html>

<head>

  <link href="https://unpkg.com/tabulator-tables@4.2.7/dist/css/tabulator.min.css" rel="stylesheet">
  <script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.2.7/dist/js/tabulator.min.js"></script>


</head>

<body>
  <div id="example-table"></div>

</body>

</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，6 月前
查看次数：	2715 次
最近记录：	3 年前