动态显示组件是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
转换。
逻辑表达式的名称只支持字母、数字、下划线