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

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

在与您类似的情况下，但我使用了自定义选择或原生下拉菜单。 以下是解释所有内容的代码：（使用格式化程序，保持真实值......） 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>

Answer 2

然后交换值

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"
    }
    
  }
    


    },
  ],
});

<!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>

Answer 3

我遇到了同样的问题，我发现比创建自定义选择控件更简单的解决方法。您可以创建一个 Map 集合或 Record，它将选择键映射到选择值，然后在特定选择列定义上设置 formatter 函数，您可以在其中覆盖默认显示值。

composeSelectFormatter(dictionary) {
    return (cell) => {
        const value = cell.getValue();
        if (!value) return value;

        return dictionary[value];
}

}

然后在你的列定义中：

  columns: [ //define the table columns
    {
      title: "Name",
      field: "name",
      editor: "select",
      formatter: composeSelectFormatter(YOUR_DICTIONARY_RECORD_GOES_HERE),
      values: [ ... ]
  }