Simon.Sun 发表于 2023-10-11 17:23:36

一看就会,超有用活字格技能:一百八十七、使用图文列表实现标签选择

本帖最后由 Simon.Sun 于 2023-10-11 17:26 编辑

开局一张图:

有时候我们需要实现上面这样标签选择的功能:

[*]以小卡片的形式展示选择的标签,卡片里可能会有标签对应的类型图标;
[*]点击标签,修改背景色,表示标签选中,再次点击可以取消选中;
[*]可以获取到选择的标签列表,以供其他地方使用。


聪明的格友们可能想到了既然是一个一个的小卡片,是不是能够借助图文列表实现呢?没错,就是图文列表...

实现思路:
1. 使用图文列表绑定标签字典数据源,这样我们可供选择的标签项就有了;

2. 要实现图文列表点击后,能够改变颜色以标识选中,这里可以借助图文列表的单元格样式;

这里我们只给图文列表的选择行设置了背景色,其他都继承自一般状态。这样呢,当我们点击图文列表的每个条目时,就会选择该条目,背景色就改变了。这样就实现了我们想要的选中效果。

3. 那么点击选中的条目,取消选中改怎么实现呢?根据上一步的思路,是不是只要在点击图文列表条目时,能够移除当前行的选择状态是不是就可以了。具体做法如下:
3.1. 给图文列表的模板页添加背景图片,并设置透明度为 100%

3.2. 将行选择状态绑定到图文列表的模板页里,这个行选择状态是图文列表内置的属性,为 0 表示图文列表条目对应的行未选中,为 1 选中;

3.3. 给这个背景图片设置点击命令,用设置变量命令修改行选择状态的值,当为 0 的时候修改成 1(选中),为 1 的时候修改成 0(取消选中):


4. 如果我们想获取图文列表目前已经选择的所有条目,再使用一个表格选择项容器就好啦,绑定图文列表对应的表格就好啦。


这样就能实现我们最终想要的效果:


最后附上 Demo(9.0.6.0),欢迎大佬们下载体验:





页: [1]
查看完整版本: 一看就会,超有用活字格技能:一百八十七、使用图文列表实现标签选择