Mbos移动端开发——标签

Mbos移动端开发——标签原创

金蝶s-HR-绩效管理

金蝶s-HR-招聘管理

金蝶s-HR-核心平台

金蝶s-HR-移动应用

金蝶s-HR-知识分享

杨微

1人赞赏了该文章 417次浏览未经作者许可，禁止转载编辑于2023年05月26日 15:52:56

1 基础功能使用

1.1 创建页面

新建应用后，选择列表模式：带图双列列表、单操作列表

图片 1.png

以单操作列表为例创建页面：

图片 2.png

图片 3.png

预览效果

图片 4.png

1.2 方案切换

切换列表卡片方案，可调整标签位置

图片 5.png

图片 6.png

预览效果：

图片 7.png

1.3 删除标签

图片 8.png

1.4 新增标签

1.4.1 新增标签控件

图片 9.png

1.4.2 绑定字段

图片 10.png

图片 11.png

图片 12.png

1.5 修改标签样式

1.5.1 直接修改样式属性

图片 13.png

1.5.2 选择预置标签方案

图片 14.png

1.6 控制显示、隐藏

mbos('confirmState').hide()

mbos('confirmState').show()

因为id重复，此方法只能显示、隐藏第一个标签

图片 15.png

图片 16.png

2 功能拓展

因为字段数据经过mbos处理后，枚举类型、布尔类型的字段，只返回文本，未返回状态值，所以较复杂的控制，需要结合代码实现。

图片 17.png

2.1 不同value显示不同的样式

2.1.1 自定义标签字段

新增普通字段作为标签样式字段，隐藏标题，增加样式类

图片 18.png

图片 19.png

2.1.2 获取枚举列表数据

根据标签字段元数据，获取枚举列表，接口："/mbos/data/getEnum?enumtype="+元数据

图片 20.png

图片 21.png

图片 22.png

2.1.3 根据alias匹配value

匹配标签字段值与枚举值，并返写列表数据

图片 23.png

图片 24.png

2.1.4 根据value定义class

给标签字段绑定格式化函数，可设置标签的HTML

图片 25.png

选择自定义函数，定义函数名称

图片 26.png

js文件中写入对应函数方法，返回需要的HTML片段，并根据value定义class类

图片 27.png

2.1.5 自定义样式

在css文件中，编写样式代码

图片 28.png

效果如图：

图片 29.png

图片 30.png

2.2 其他字段控制显示、隐藏

例如：根据布尔字段，控制标签类字段的显示隐藏

图片 31.png

2.2.1 根据alias匹配value

同2.1.1、2.1.2、2.1.3

2.2.2 布尔类型值处理

定义布尔类型多语言数组

图片 32.png

匹配数据，重新赋值给列表数据

图片 33.png

2.2.3 绑定属性

将需要的状态值绑定到HTML属性上。

选中列表区域，查看HTML源码

图片 34.png

绑定属性并赋值：

图片 35.png

图片 36.png

2.2.4 显示、隐藏控制

通过属性、样式控制标签是否显示

图片 37.png

赞 1

赞 1 评论收藏 1