Tabulator 4.9.3下拉框提交数据到C#出现整型字段类型不匹配如何解决？

问题根源 #

Tabulator的select编辑器默认会将选中值统一转为字符串类型，即使你定义的ProductIDSelect对象的键是数字类型，最终存入行数据时也会变成字符串格式的数值，导致后端整型字段校验失败。

解决方案 #

你可以根据自己的开发习惯选择以下任意一种方式处理：

1. 列编辑时实时转换类型

在对应下拉列的配置中添加cellEdited回调，选中值后立即转为数字类型：

{
  title: "ProductID", 
  field: "productID", 
  sorter: "number", 
  minWidth: 100, 
  width: 150, 
  editable: Editable, 
  validator: "required", 
  hozAlign: "left", 
  editor: "select", 
  editorParams: { values: ProductIDSelect }, 
  formatter: "lookup", 
  formatterParams: ProductIDSelect,
  // 新增以下回调，编辑完成后自动转数字
  cellEdited: function(cell) {
    const val = cell.getValue();
    if (!isNaN(Number(val))) {
      cell.setValue(Number(val), true); // 第二个参数为true避免重复触发编辑事件
    }
  }
}

注：你原有配置中重复定义了sorter和editor属性，后续的赋值会覆盖前面的，建议删掉冗余的sorter: "string"和editor: "number"避免逻辑混乱

2. 提交数据前统一批量转换

拿到表格全量数据后，统一处理需要转数值的字段，再提交给后端，这种方式适配多字段批量处理场景：

// 获取表格原始数据
const rawData = table.getData();
// 处理字段类型
const submitData = rawData.map(item => {
  return {
    ...item,
    productID: Number(item.productID),
    // 其他需要转整型的下拉字段都可以在这里添加
  }
});
// 再把submitData提交到C#后端即可

3. 后端兼容处理（无需改前端）

如果你不想修改前端代码，可以在C#后端配置JSON反序列化规则，自动把字符串格式的数字转为整型：

• 如果你用的是System.Text.Json：给对应模型字段添加[JsonNumberHandling(JsonNumberHandling.AllowReadingFromString)]特性即可
• 如果你用的是Newtonsoft.Json：全局配置JsonSerializerSettings的NumberParseHandling = NumberParseHandling.Int64

内容的提问来源于stack exchange，提问作者Msediq