腾讯云微搭低代码 数据列表实现批量删除

当前组件库数据表格组件不适配移动端,在移动端批量管理数据不是很方便,本篇实践主要介绍基于数据列表组件改造成可批量操作模型数据的实现思路。

相关产品
腾讯云微搭低代码 产品页,含版本规格、价格与购买入口。

一、实践方案

1. 在编辑器中使用布局组件,布局内容里添加数据列表组件并配置相应的数据模型。

2. 在数据列表最外层普通容器添加多选组件,多选组件选项数量只保留一个并清空选项内容。

注意:说明:

注意:

注意:

3. 在布局组件布局右侧添加“全选”和“选中删除”操作项,设置文字颜色与外边距。

注意:说明:

注意:“选中删除”文字样式:

注意:

4. 数组类型变量 check_array 用来接收数据列表选中项 _id。

5. 添加多选组件 change 事件,选中行或者取消选中行的时候动态更新变量 check_array 的 _id 集合。

({event}) => { $w.page.dataset.state.check_array.includes($w.item_listView1._id)? $w.page.dataset.state.check_array=$w.page.dataset.state.check_array.filter(item => item !== $w.item_listView1._id): $w.page.dataset.state.check_array.push($w.item_listView1._id) console.log('check_array',$w.page.dataset.state.check_array );}

注意:说明:

注意:上述表达式用了三元表达式,对当前变量 check_array 包含的 _id 集合进行动态的判断与赋值。

6. 在开发者模式下打印多选组件 change 事件。

取消选中某行,可以看到打印日志变量里的相应 _id 也删除了。

7. 配置选中删除事件。

7.1 新建数据查询 query1,其中查询条件即判断数据标识等于任意一个变量 check_array 中的元素(批量删除的关键条件)。

7.2 选中删除事件面板配置。

8. 配置全选事件。

8.1 将选项的选项值设为1。

8.2 新建数组变量 check_all,默认为空,多选组件选中值绑定变量 check_all。

8.3 “全选”相关事件配置,其中变量赋值是将变量 check_all 动态赋值为[1],即实现多选的全部选中。

({event}) => { //将数据列表的行id存到数组check_array $w.page.dataset.state.check_array=$w.listView1.records.map(item=>{return item['_id']}) console.log('check_array', $w.page.dataset.state.check_array); }

9. 单击“全选”效果展示。

10. 全选删除模型数据可以参考上述7.1步骤。

赞 (0)
上一篇 4天前
下一篇 4天前