一、实践方案
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步骤。