Jeecg Boot中onlchange事件获取值问题的分析与解决方案

问题背景

在使用Jeecg Boot 3.7.2版本开发过程中，开发人员发现当在online表单（包括单表或一对一表）中使用js增强onlchange事件时，通过value=event.row.num获取的数值并非当前输入的最新值，而是变化前的旧值。例如，当用户输入"222"时，获取到的值却是"22"，这显然不符合预期行为。

问题分析

这种现象属于表单控件值更新时机的问题。在表单控件的值变化过程中，存在两个关键时间点：

1. 旧值保存阶段：控件值发生变化时，系统首先会保存当前控件的旧值
2. 新值更新阶段：随后才会将新值更新到数据模型中

在Jeecg Boot的原实现中，onlchange事件的触发时机被设置在旧值保存阶段之后、新值更新阶段之前，这就导致了获取到的是变化前的旧值而非最新输入的值。

解决方案

针对这个问题，Jeecg Boot开发团队已经提供了两种解决方案：

1. 升级版本：该问题已在后续版本中修复，建议用户升级到最新版本

2. 临时解决方案（适用于3.7.2版本）：

   • 使用event.value替代event.row.num来获取当前控件的值
   • event.value会直接获取DOM元素的当前值，而不会经过数据模型的中间状态

技术原理

理解这个问题的关键在于明白表单控件值更新的生命周期：

1. 用户输入触发change事件
2. 框架捕获事件并处理
3. 保存旧值到临时变量
4. 触发onlchange回调
5. 更新数据模型中的值
6. 界面刷新

在修复版本中，团队调整了事件触发时机，确保在数据模型更新后再触发回调，从而保证获取到的是最新值。

最佳实践建议

1. 在使用onlchange事件时，明确区分：

   • event.row.num：获取数据模型中的值（可能滞后）
   • event.value：获取DOM元素的实时值

2. 对于关键业务逻辑，建议：

   • 优先使用event.value确保获取最新值
   • 必要时可以结合两者使用，实现更复杂的业务逻辑

3. 在升级版本时，注意测试相关功能，确保兼容性

总结

Jeecg Boot作为一款优秀的快速开发框架，其online表单功能极大提高了开发效率。理解框架内部的事件机制和值更新流程，有助于开发者更好地使用框架功能并快速定位问题。对于这类值获取时机问题，掌握event.value的用法是一个实用的解决方案。