## setTrigger('触发表单项名', '触发的值', '触发后显示的表单项名' [, '是否清除原有值'])
| 版本 | 新增功能 |
| --- | --- |
| 1.0.6 | 支持设置是否清除原有值 |
有时候,选择某些表单项或者填写某个值后,希望显示某些表单项,那么就可以用到触发器了,它可以让你很轻松就实现动态显示和隐藏某些表单项。
比如,我们希望用户选择“广州”之后,显示“邮编”和“电话”两个表单项,选择其他则隐藏这两项。
~~~
$list_province = ['gz' => '广州', 'sz' => '深圳', 'sh' => '上海'];
return ZBuilder::make('form')
->addSelect('city', '城市', '', $list_province)
->addText('zipcode', '邮编')
->addText('mobile', '电话')
->setTrigger('city', 'gz', 'zipcode,mobile')
->fetch();
~~~
这样设置之后,表单默认不会显示“邮编”和“电话”这两项内容,只有用户选择了“广州”之后,这两项才会显示,选择其他选项,则“邮编”和“电话”会隐藏起来,并清空内容。
也可以设置成,选择“广州”显示“邮编”,选择“深圳”显示“电话”。
~~~
$list_province = ['gz' => '广州', 'sz' => '深圳', 'sh' => '上海'];
return ZBuilder::make('form')
->addSelect('city', '城市', '', $list_province)
->addText('zipcode', '邮编')
->addText('mobile', '电话')
->setTrigger('city', 'gz', 'zipcode')
->setTrigger('city', 'sz', 'mobile')
->fetch();
~~~
上面的写法也可以用数组来设置
~~~
$list_province = ['gz' => '广州', 'sz' => '深圳', 'sh' => '上海'];
$trigger = [
['city', 'gz', 'zipcode'],
['city', 'sz', 'mobile'],
];
return ZBuilder::make('form')
->addSelect('city', '城市', '', $list_province)
->addText('zipcode', '邮编')
->addText('mobile', '电话')
->setTrigger($trigger)
->fetch();
~~~
或者我们希望无论选择“广州”还是“深圳”,都显示“邮编”和“电话”。
~~~
$list_province = ['gz' => '广州', 'sz' => '深圳', 'sh' => '上海'];
return ZBuilder::make('form')
->addSelect('city', '城市', '', $list_province)
->addText('zipcode', '邮编')
->addText('mobile', '电话')
->setTrigger('city', 'gz,sz', 'zipcode,mobile')
->fetch();
~~~
也可以设置连续触发,比如,选择“广州”则显示“邮编”,“邮编”填写“123”则显示“电话”。
~~~
$list_province = ['gz' => '广州', 'sz' => '深圳', 'sh' => '上海'];
return ZBuilder::make('form')
->addSelect('city', '城市', '', $list_province)
->addText('zipcode', '邮编')
->addText('mobile', '电话')
->setTrigger('city', 'gz', 'zipcode')
->setTrigger('zipcode', '123', 'mobile')
->fetch();
~~~
### 触发表单项名
目前,触发表单项名仅支持下拉菜单(非多选)、单选、单行文本框这三种表单项类型。
### 触发的值
触发的值可以写一个,也可以写多个,多个值用逗号隔开。
### 触发后显示的表单项名
目前不支持普通联动、范围、拖动排序、静态文本这四种表单项类型。
>[danger] 注意,触发后显示的表单项名不能重复,比如下面的例子
~~~
->setTrigger('model', '2', 'content,detail_template')
->setTrigger('model', '3', 'list_template,detail_template')
~~~
原本我们的预期是,当model的值为2时显示content和detail_template,当model的值为3时显示list_template和detail_template。
但事实上当model的值为2时,detail_template会被隐藏,这是因为此时model不是3,所以list_template和detail_template会被隐藏。如果要达到预期的效果,需要改写下规则,将相同的表单项名写在同一个触发内。
~~~
->setTrigger('model', '2,3', 'detail_template')
->setTrigger('model', '2', 'content')
->setTrigger('model', '3', 'list_template')
~~~
这样就可以达到我们预期的效果了。
### 是否清除原有值(1.0.6+)
从1.0.6版本开始,支持设置是否清除原有值。在默认的情况下,会清除原有值。比如:
~~~
$list_province = ['gz' => '广州', 'sz' => '深圳', 'sh' => '上海'];
return ZBuilder::make('form')
->addSelect('city', '城市', '', $list_province)
->addText('zipcode', '邮编')
->addText('mobile', '电话')
->setTrigger('city', 'gz', 'zipcode')
->setTrigger('zipcode', '123', 'mobile')
->fetch();
~~~
当城市的值发生改变时,它所关联的邮编(zipcode)会自动清除掉原有值,如果不希望被清除掉,可以添加第四个参数为false。
~~~
$list_province = ['gz' => '广州', 'sz' => '深圳', 'sh' => '上海'];
return ZBuilder::make('form')
->addSelect('city', '城市', '', $list_province)
->addText('zipcode', '邮编')
->addText('mobile', '电话')
->setTrigger('city', 'gz', 'zipcode', false)
->setTrigger('zipcode', '123', 'mobile')
->fetch();
~~~
这样,不管城市的值如何变,邮编原有的值不会被清除。
- 序言
- 环境搭建
- 下载及安装
- 目录结构
- 快速构建器(ZBuilder)
- 表单(form)
- 设置页面标题
- 设置页提示信息
- 设置表单提交地址
- 隐藏按钮
- 添加按钮
- 设置按钮标题
- 添加表单项
- 复选
- 单选
- 日期
- 时间
- 开关
- 标签
- 数组
- 分组
- 范围
- 按钮
- 数字框
- 密码框
- 取色器
- 下拉菜单
- 普通联动
- 快速联动
- 拖拽排序
- 静态文本
- 格式文本
- 日期时间
- 日期范围
- 图片裁剪
- 百度地图
- 单文件上传
- 多文件上传
- 单图片上传
- 多图片上传
- 隐藏表单项
- 图标选择器
- 单行文本框
- 多行文本框
- 百度编辑器
- CKEditor编辑器
- wang编辑器
- markdown编辑器
- summernote编辑器
- 图片展示(1.1.0+)
- 单文件展示(1.1.0+)
- 多文件展示(1.1.0+)
- 下拉菜单Ajax(1.3.3+)
- 复杂表格(1.4.3+)
- 数据表格(1.4.3+)
- 分组下拉菜单(1.4.3+)
- 表格选取(1.4.3+)
- 穿梭框(1.4.3+)
- 添加表单项通用方法
- 直接设置表单项
- 表单布局
- 设置Tab按钮列表
- 设置表单数据
- 引入js文件
- 引入css文件
- 设置额外JS代码
- 设置额外CSS样式
- 设置额外HTML代码
- 是否ajax方式提交
- 设置模版路径
- 设置触发器
- 设置表单提交确认框
- 自定义表单项(1.0.6+)
- 设置表单提交方式(1.0.6+)
- 模板变量赋值(1.0.7+)
- 设置页面空表单项提示(1.0.7+)
- 自定义扩展表单图标(1.2.0+)
- 设置表单令牌(1.3.1+)
- 新窗口打开返回的url(1.4.4+)
- 表格(table)
- 设置页面标题
- 设置页面提示信息
- 添加一列
- 字段类型
- switch
- status
- yesno
- text.edit
- textarea.edit
- password
- url
- tel
- number
- icon
- byte
- date
- time
- datetime
- date.edit
- time.edit
- datetime.edit
- picture
- pictures
- select
- callback
- link
- text
- img_url
- files(1.1.1+)
- popover(1.4.4+)
- 添加多列
- 添加数量索引
- 添加快捷编辑的验证器
- 设置表格数据
- 隐藏第一列多选框
- 添加表头排序
- 添加表头筛选
- 添加表头筛选条件
- 添加时间段筛选
- 添加一个右侧按钮
- 添加多个右侧按钮
- 添加一个顶部按钮
- 添加多个顶部按钮
- 自动添加按钮
- 自动编辑按钮
- 替换右侧按钮
- 设置搜索参数
- 设置数据库表名
- 设置插件名称
- 设置表格主键
- 设置Tab按钮列表
- 设置分页
- 去除分页
- 引入js文件
- 引入css文件
- 设置额外JS代码
- 设置额外CSS样式
- 设置额外HTML代码
- 设置额外HTML代码-模板文件(1.4.0+)
- 设置模版路径
- 添加行class名
- 添加顶部下拉筛选
- 设置页面空数据提示(1.0.7+)
- 模板变量赋值(1.0.7+)
- 设置使用原始数据字段(1.0.8+)
- 设置搜索区域(1.1.0+)
- 设置表格高度(1.3.0+)
- 固定左列(1.3.0+)
- 固定右列(1.3.0+)
- 设置列宽(1.3.0+)
- 设置隐藏列(1.3.0+)
- 侧栏(aside)
- 添加区块
- 设置Tab按钮列表
- 追加Tab按钮列表
- 设置当前tab
- 设置单个tab内容
- 设置多个tab内容
- 追加tab内容
- 覆盖侧栏
- 模块开发
- 创建模块信息文件
- 安装模块
- 模块配置
- 控制器
- 创建菜单节点
- 第一个控制器
- 模块参数配置页面
- 方法参考
- 数据授权(1.3.2+)
- 插件开发
- 插件入口文件
- 插件基本信息
- 管理界面的字段信息
- 新增或编辑的字段信息
- 插件钩子
- 触发器
- 原数据库表前缀
- 插件配置信息
- 安装和卸载Sql文件
- 控制器
- 模型
- 验证器
- 视图
- 方法参考
- 实践教程
- 变量参考
- 函数参考
- 安全相关
- 常见问题
- 其他杂项
- 更新日志
- 升级指导
- 贡献名单
- 关于文档