最佳实践|分类列表

分类列表;自关联;选中关联

导语

我们在用各种软件时,总是会看到一些分类,比如电商平台的商品分类,资讯平台的文章分类等等;分类可以更好的帮助用户准确快速地找到商品,提高用户体验度。

效果展示

页面构成

  • 一级分类与二级分类通过「category(分类)表」自关联实现类别筛选;
  • 二级分类与商品内容通过「category(分类)表」与「product(商品)表」两表关联实现内容筛选;

* 参考流程

难点解析

难点一

已知 category(分类)数据模型中包含了以下全部分类,如何在「一级分类_选择视图」中仅展示一级分类中内容,在「二级分类_选择视图」中仅展示二级分类中的内容?

解析

  • 对 category(分类)数据模型建立一对多的自关联,从而形成parent(父)与children(子)关系,对于一级分类中的数据,无需设置parent值,即设置过滤条件 parent_category 为空,对于二级分类中的数据,需设置parent值,即设置过滤条件 parent_category 非空
  • 「参考下方 ⬇️ 难点二内容」同时,在管理后台需要对二级分类中的数据添加 parent 值,parent 值为其所属一级分类的ID值。

方案

  1. category 数据模型建立一对多“自关联”
  2. 在选择视图组件的过滤条件中判断父级 ( parent_category ) 是否为空,一级分类父级为空,二级分类父级非空。

效果


难点二

点击「一级分类_选择视图」中选项,「二级分类_选择视图」如何筛选出对应一级分类下的二级分类内容?
(例:点击“服饰类”,二级分类仅展示“衬衣、夹克、裙子、裤子”)

解析

  • 通过设置过滤条件实现,即过滤出 parent_category 值等于「一级分类_选择视图」所选项的 ID 值;
  • 同时,在管理后台需要对二级分类中的数据添加 parent 值,parent 值为其所属一级分类的ID值。

方案

  1. 增加「二级分类_选择视图」过滤条件:parent_category 值为「一级分类_选择视图」所选项的 ID 值
  2. 生成预览后,在管理后台中设置二级分类项的 parent_category 为其对应一级分类的 ID 值

效果


难点三

点击「一级分类_选择视图」中选项,「二级分类_选择视图」未默认选中。

解析

选择视图中,选项按照「数据来源」中「选择哪个字段?」进行显示,如项目中选择 idx 字段,且默认值为1,则进入该分类列表页面后默认选中 idx 为1的选项。

方案

根据数据来源所选字段设置默认值

效果


难点四

二级分类与商品内容如何通过「category(分类)表」与「product(商品)表」两表关联实现内容筛选?

解析

  • 「category(分类)表」与「product(商品)表」建立一对多关系;
  • 设置过滤条件:筛选出与二级分类所选项 ID 值相等的数据;
  • 同时,在管理后台需要对 product 中的数据添加 category 值,category 值为其所属二级分类的ID值。

方案

效果

温馨提醒

「二级分类」选择视图组件与「内容」列表组件的垂直布局模式均为「充满父组件」,其中一个组件需要开启「浮动」,否则会错位。

2022-06-28
2 8