动态显示(Favisible)

动态显示组件是FastAdmin开发的一个非常强大的按逻辑验证动态显示元素的组件,常用于一些组件的按需显示和联动显示,目前在FastAdmin1.3.3+版本支持该功能。

功能特性

1、支持多操作符验证逻辑,目前支持>、>=、<、<=、==、!=
2、支持正则验证逻辑
3、支持多条件验证,逻辑与&&逻辑或||条件验证支持

使用方法

给你的表单中的需要按逻辑动态显示的元素添加data-favisible="条件逻辑表达式"即可。
目前在常规管理->系统配置新增配置可以直接使用

条件逻辑表达式

表达式说明
mode=basic当表单中的mode组件值为basic时显示
mode=basic,advanced当表单中的mode组件值为basicadvanced时显示
age>=23当表单中的age组件值大于等于23时显示
age=regex:/\d+/i当表单中的age组件值匹配任意数字时显示
mode=basic&&type=hobby当表单中的mode组件值为basictype值为hobby时显示
mode=basic||gender=male当表单中的mode组件值为basicgender值为male时显示
mode=basic&&name=Lily||gender=male当表单中的(mode组件值为basicnameLily) 或 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
著作权归应用插件开发者所有,未经许可,禁止转载、复制此文档的任何内容。