动态显示(Favisible)
动态显示组件是FastAdmin开发的一个非常强大的按逻辑验证动态显示元素的组件,常用于一些组件的按需显示和联动显示,目前在FastAdmin1.3.3+版本支持该功能。
功能特性
1、支持多操作符验证逻辑,目前支持>、>=、<、<=、==、!=
2、支持正则验证逻辑
3、支持多条件验证,逻辑与&&逻辑或||条件验证支持
使用方法
给你的表单中的需要按逻辑动态显示的元素添加data-favisible="条件逻辑表达式"即可。
目前在常规管理->系统配置中新增配置可以直接使用
条件逻辑表达式
| 表达式 | 说明 |
|---|---|
| mode=basic | 当表单中的mode组件值为basic时显示 |
| mode=basic,advanced | 当表单中的mode组件值为basic或advanced时显示 |
| age>=23 | 当表单中的age组件值大于等于23时显示 |
| age=regex:/\d+/i | 当表单中的age组件值匹配任意数字时显示 |
| mode=basic&&type=hobby | 当表单中的mode组件值为basic且type值为hobby时显示 |
| mode=basic||gender=male | 当表单中的mode组件值为basic或gender值为male时显示 |
| mode=basic&&name=Lily||gender=male | 当表单中的(mode组件值为basic且name为Lily) 或 gender值为male时显示 |
不支持的多条件表达式
mode=basic||gender=male&&mode=advanced||name=Lily以上逻辑表达式将按或条件拆分为3段,并不支持按与条件拆分为2段。
使用示例
功能实现了点击单选按钮会根据选中的值显示对应的DIV元素
HTML代码
<form id="demo-form">
<input type="radio" name="row[type]" value="value1" checked /> 类型1
<input type="radio" name="row[type]" value="value2" /> 类型2
<div data-favisible="type=value1">显示内容1</div>
<div data-favisible="type=value2">显示内容2</div>
</form>JS代码
Form.api.bindevent($("#demo-form"));温馨提示
表单中的名称必须为row[组件名称],如name="row[组件名称]"
当元素隐藏后,表单将忽略必填验证
当条件逻辑表达式的操作符为>、>=、<、<=时,将强制把验证的值做parseFloat转换。
逻辑表达式的名称只支持字母、数字、下划线
文档最后更新时间:2023-07-31 08:12:06
著作权归应用插件开发者所有,未经许可,禁止转载、复制此文档的任何内容。
未解决你的问题?请到「问答社区」反馈你遇到的问题