表格组件实现批量修改数据

最近更新时间:2024-03-15 11:06:31

我的收藏

业务场景

在实际的数据表格应用中,我们经常需要一次性更改多条数据的值,这种修改可以是简单的表单填写操作,也可以是对一批数据进行复杂的计算操作,常见的应用场景包括:批量更改用户密码、批量设置商品折扣、批量修改文章标题等。




实现思路

数据表格中进行多行勾选,先获取数据表格的选中值,经过数据处理,将选中行的数据标识整理成数组,然后在数据模型的批量更改方法中,添加相关的筛选条件。




实施方案

1. 在应用中新建页面,选择数据管理模板表格与表单页



2. 数据管理页面列表展示。



3. 在页面上方工具栏中添加批量修改按钮组件和弹窗组件。
3.1 界面大纲树和布局展示。



3.2 批量修改按钮绑定点击事件,其中逻辑分支中的事件是为了判断是否勾选为空,只有存在勾选项的情况下,才能执行打开弹窗动作,弹窗中涉及批量操作需要更改的字段展示。



说明:
$w.table1.selectedRecords获取当前表格的选中值。
$w.table1.selectedRecords.map(item=>{return item["_id"]}),使用 js 的 map 语法将选中行的数据标识整理成数组。
3.3 如果勾选项为空,提示窗口展示。



3.4 弹窗内容添加单行输入框组件,在这里以专业字段为例。



3.5 弹窗组件底部确定按钮绑定调用数据源方法事件,执行成功时,调起消息事件,显示批量更改成功消息提示,消息事件执行成功,关闭弹窗。



3.6 调用数据源方法,查询数据标识条件如下,其中 $w.table1.selectedRecords.map(item=>{return item["_id"]}) 为表格选中行的数据标识数组。



3.7 调用数据源方法,入参字段专业需用表达式绑定上述3.4步骤弹窗中输入框组件的输入值 $w.input3.value




效果展示

1. 在表格组件中选中数据行。



2. 单击上方工具栏批量修改,在出现的弹窗里填写需要更改的字段内容。



3. 批量更改成功,结果展示。




其它说明

说明:
数据表格组件当前已支持的方法包含新建、删除、导出、导入,无需其它配置,即可使用。