需求背景
当前官方组件库数据表格组件不适配移动端,在移动端批量管理数据不是很方便,本篇实践主要介绍基于数据列表组件改造成可批量操作模型数据的实现思路。
实践方案
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 集合进行动态的判断与赋值。
$w.item_listView1._id
表示当前选中行的 _id。$w.page.dataset.state.check_array.includes($w.item_listView1._id)
判断数组变量 check_array 是否包含当前选中行 _id。$w.page.dataset.state.check_array=$w.page.dataset.state.check_array.filter(item => item !== $w.item_listView1._id):filter
方法去除变量 check_array 中当前行 _id,然后重新赋值给变量 check_array,一般是取消选项的时候触发。$w.page.dataset.state.check_array.push($w.item_listView1._id)
对数组变量 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步骤。