LigerUI下frm与grid的交互

我们来实现一个效果,如果点击汇入,然后选择了数据然后点击确认之后,遍历我的grid,把第一个不为空的FEmployee塞入frm里面的BPFEmployee

我们首先需要明确,当用户点击汇入按钮并选择数据后,我们需要将选中的数据添加到grid中。在添加数据之后,我们需要检查grid中是否有数据,然后找到第一个非空的FEmployee值,并将其设置到表单的BPFEmployee字段中。

具体步骤:

在汇入数据的回调函数中(即onSelect事件),我们添加了新的行到grid中。

在添加行之后,我们遍历grid的所有行(包括新添加的行),找到第一个FEmployee不为空的行。

如果找到了这样的行,我们就将表单中的BPFEmployee设置为该行的FEmployee值,同时更新BPFEmpName(因为表单中BPFEmployee对应的文本字段是BPFEmpName,但注意我们表单中存储的是工号,显示的是姓名,所以这里需要根据实际情况处理)。

但是,在汇入数据的回调中,我们添加行后,可能还没有立即更新到grid的数据源,所以我们可以直接遍历刚刚添加的数据(即event.data)来找到第一个非空的FEmployee。

然而,在汇入数据的回调中,我们添加行时已经将行数据添加到grid中,但此时我们也可以从event.data中获取到这些数据。

修改汇入数据的onSelect事件处理函数:

原代码片段(在importData函数中):

c 复制代码
onSelect: function (event) {
let firstRowWithEmployee = null; // 用于记录第一个有业务员的行
for (var index in event.data) {
    var rowData = event.data[index];

    // 在添加行之前,检查这一行是否有FEmployee,并且我们还没有记录第一个有业务员的行
    if (!firstRowWithEmployee && rowData.FEmployee) {
        firstRowWithEmployee = rowData;
    }

    ... // 原来的添加行代码
}

// 如果找到了有业务员的行,设置到表单
if (firstRowWithEmployee) {
    const frm = liger.get("frm");
    frm.setData({
        BPFEmployee: firstRowWithEmployee.FEmployee,
        BPFEmpName: firstRowWithEmployee.FEmpName
    });
}

总结修改步骤:

在导入数据的grid列配置中添加一个隐藏列,返回业务员姓名字段(FEmpName)。

在onSelect事件中,遍历event.data,记录第一个有FEmployee的行(包括该行的FEmpName)。

在添加完所有行后,如果表单的BPFEmployee字段为空,则用第一个有业务员的行的数据设置表单的BPFEmployee和BPFEmpName。

注意:由于我们添加了隐藏列,需要确保后端返回的数据中有FEmpName字段。

由于后端返回的数据中是否有FEmpName字段取决于后端,所以我们需要和后端确认。如果后端没有返回,那么我们需要调整后端接口。

如果后端暂时无法返回,我们可以考虑另一种方式:在导入数据时,我们只获取了业务员工号(FEmployee),而没有姓名。那么我们可以通过工号去请求姓名。但是这样会增加请求次数,而且我们不知道工号对应的姓名,所以需要调用一个接口。

考虑到时间,我们假设后端在返回导入数据时,同时返回FEmpName(业务员姓名)。

如果后端无法返回,我们可以暂时不设置姓名,只设置工号,然后让用户自己通过工号去选择业务员(因为业务员字段是一个popup,用户可以选择)。但是这样体验不好。

因此,我们尽量要求后端返回业务员姓名。

这样,就可以完成我们的需求

相关推荐
画中有画6 分钟前
时序数据库在物联网系统中的应用
数据库·物联网·时序数据库
Dwzun12 分钟前
基于SpringBoot3+Vue3的油莎豆种植管理系统
java·前端·vue.js·spring boot·后端·python·计算机网络
小码哥_常6 小时前
一套自己部署的 IM,客户端是同一份 Flutter
前端·后端
Decay__6 小时前
05_MySQL 常用 SQL 大全 —— 诊断、管理、优化辅助 SQL 与三大系统库速查
运维·数据库·sql·mysql·架构
蜗牛攻城狮8 小时前
微前端四大方案选型对比与最佳实践:qiankun、micro-app、wujie、Module Federation
前端·微前端·qiankun·前端架构·micro-app·wujie
学长毕设9 小时前
基于SpringBoot的实验室资产管理系统
java·spring boot·后端
她说可以呀10 小时前
Vue插槽
前端·javascript·vue.js
qq_4480111610 小时前
Vue + Jinja2两套模版与法冲突造成undefinedError
前端·javascript·vue.js
zzu123zsw10 小时前
从臃肿的模板调用到声明式契约:深入 UniHttp 动态代理与多渠道生命周期扩展
java·spring boot·microsoft·unihttp
aixingpan10 小时前
aixingpan.cn API开发文档:前端查询夏令时和时区接口指南
前端·php