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

Question

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

当我选择某些内容时，会显示存储的值，但不会显示标签(单击列表时会显示)。我希望存储的值是数据库中的 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",
    }
}},
    ],
});

Answer 1

在像您这样的类似情况下，但我使用了自定义选择或 native 下拉菜单。
以下是解释所有内容的代码:(使用格式化程序，保持真实值......)
Tabulator 4.6.3 DataList and DisplayList Demo for select editor

var userData = [{
  "FullName": "",
  "LoginName": "none"
}, {
  "FullName": "Steve Boberson",
  "LoginName": "steve"
}, {
  "FullName": "Bob Jimmerson",
  "LoginName": "bob"
}, {
  "FullName": "Jim Stevenson",
  "LoginName": "jim"
}];

var customNativeSelect = function(cell, onRendered, success, cancel) {
  var cellRealValue = cell.getElement().dataset.loginName;
  cellRealValue = (typeof cellRealValue === "undefined") ? "none" : cellRealValue;

  //Create and append select list
  var selectList = document.createElement("select");

  selectList.style.width = "100%";
  selectList.style.boxSizing = "border-box";

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

  function onChange() {
    if (selectList.selectedOptions[0].value != cellRealValue) {
      success(selectList.selectedOptions[0].value);
      // Store value to cell dataset; will be done by formatter
      /* cell.getElement().dataset.loginName = selectList.selectedOptions[0].value */
      alert("Here is what the actual looks like: " + JSON.stringify(cell.getTable().getData()))
    } else { // No change
      cancel();
    }
  }

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

  //submit new value on enter
  selectList.addEventListener("keydown", function(e) {
    if (e.keyCode == 13) {
      onChange();
    }

    if (e.keyCode == 27) {
      cancel();
    }
  });

  //Create and append the options
  for (var i = 0; i < userData.length; i++) {
    var option = document.createElement("option");
    option.value = userData[i].LoginName;
    option.text = userData[i].FullName;

    if (userData[i].LoginName === cellRealValue) {
      option.selected = "selected";
    }
    selectList.appendChild(option);
  }

  return selectList;
};

var filterState = false;

var tabledata = [{
    itemId: '3423'
  },
  {
    name: 'steve'
  },
  {
    lastDate: '34/56/0000'

  },
  {
    completed: 'yes'
  }
];

var table = new Tabulator("#html-table", {
  data: tabledata, //assign data to table
  layout: "fitColumns",
  tooltips: true,
  tooltipsHeader: true,
  placeholder: "No Data Available", //display message to user on empty table
  height: "300px",
  columns: [{
    title: "ID",
    field: "itemId",
    headerFilter: false
  }, {
    title: "Name",
    field: "name",
    headerFilter: false,
    editor: customNativeSelect,
    formatter: function(cell) {
      var value = cell.getValue();

      for (var i = 0; i < userData.length; i++) {
        if (userData[i].LoginName === value) {
          // Store value to cell dataset
      cell.getElement().dataset.loginName = value;
      value = userData[i].FullName;
          break;
        }
      }
      return value;
    }
  }, {
    title: "Last Date",
    field: "lastDate",
    headerFilter: false
  }, {
    title: "Completed",
    field: "completed",
    headerFilter: false
  }, ]
});

function showHideFilters() {
  if (filterState == false) {
    table.updateColumnDefinition("itemId", {
      headerFilter: true
    });
    table.updateColumnDefinition("name", {
      headerFilter: true
    });
    table.updateColumnDefinition("lastDate", {
      headerFilter: true
    });
    table.updateColumnDefinition("completed", {
      headerFilter: true
    });
    filterState = true;
  } else {
    table.updateColumnDefinition("itemId", {
      headerFilter: false
    });
    table.updateColumnDefinition("name", {
      headerFilter: false
    });
    table.updateColumnDefinition("lastDate", {
      headerFilter: false
    });
    table.updateColumnDefinition("completed", {
      headerFilter: false
    });
    filterState = false;
  }

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.6.3/css/tabulator.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.6.3/js/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body>
  <button onClick="showHideFilters()">
    Show/Hide Filters
    </button>
  <div id="html-table">
  </div>
</body>

</html>