编辑表单时如何将数据库decimal值转为带千位分隔符的autonumeric格式

问题根源 #

你遇到的两个异常都是因为没有使用AutoNumeric官方API操作输入框导致的：

• 直接用val()给AutoNumeric绑定的输入框赋值，插件无法识别原始decimal格式，触发内部校验规则后会清空值，也就是你遇到的鼠标悬浮数值消失的问题
• 提交时直接上传带千位分隔符的字符串，后端无法将其转换为decimal类型，最终存储为NULL

具体解决步骤 #

1. 修改编辑页字段赋值逻辑 #

不要用jQuery的val()给AutoNumeric管理的数字字段赋值，改用插件自带的赋值方法，所有金额类字段都要修改，示例如下：

// 仅保留非AutoNumeric字段的val()赋值逻辑，以下为AutoNumeric字段的修改示例
// 旧写法（删除）
// $('#nett_budget').val(data.nett_budget);
// $('#gross_value').val(data.gross_value);
// $('#nett_cashback').val(data.nett_cashback);
// $('#nett_bundling').val(data.nett_bundling);

// 新写法（jQuery版AutoNumeric适用，如果你用原生初始化可对应替换为实例.set()方法）
$('#nett_budget').autoNumeric('set', data.nett_budget);
$('#gross_value').autoNumeric('set', data.gross_value);
$('#nett_cashback').autoNumeric('set', data.nett_cashback);
$('#nett_bundling').autoNumeric('set', data.nett_bundling);

修改后数据库返回的原始decimal值会被AutoNumeric自动格式化为带千位分隔符的样式正常展示，不会出现悬浮清空的问题。

2. 修复提交存储异常 #

两种方案二选一即可：

前端处理（推荐）

在表单提交事件中，先调用AutoNumeric的get方法拿到原始数值，再提交给后端：

$('#editMediaOrderForm').on('submit', function () {
  // 把所有AutoNumeric字段的值替换为无格式的原始数字
  $('#nett_budget').val($('#nett_budget').autoNumeric('get'));
  $('#gross_value').val($('#gross_value').autoNumeric('get'));
  $('#nett_cashback').val($('#nett_cashback').autoNumeric('get'));
  $('#nett_bundling').val($('#nett_bundling').autoNumeric('get'));
  return true;
});

后端处理

在接口接收参数后，先把字段中的千位分隔符移除，再转换为decimal类型存储，以PHP为例：

$nettBudget = str_replace(',', '', $request->input('nett_budget'));
// 再将$nettBudget存入数据库对应字段即可

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