# JS增强—表单API
[TOC]
> JS增强api围绕着that关键词
> JS增强定义的方法内可使用 `that`关键字,该关键字指向当前页面的vue实例,那就意味着可以用`that`调用任何当前页面的实例方法/属性
## 表单API
| 功能描述| 语法 | 参数 |
| --- | ------ |--- |
| 获取某下拉组件的下拉选项 | that.getSelectOptions(field)| field:字段名称|
| 设置某下拉组件的下拉选项 | that.changeOptions(field,options)| field:字段名称<br>option:新设置的下拉选项 每一项由value和label组成|
| 改变表单的值 | that.triggleChangeValues(param)| param:表单值对象,格式{控件名:控件值}|
| 进入表单页面立即触发change事件,需要在js增强中定义show方法, 给immediateEnhance赋值true| that.immediateEnhance = true | 当为true则,进入表单页若有change事件立即触发,否则不会,默认false |
| 获取当前表单数据 | 见下 | |
| 获取某个字段的值 | 见下 | |
| 修改某个字段的值 | 见下 | |
| 发起ajax请求 | getAction,postAction,deleteAction | 方法参数参考src/api/manage.js |
| 时间格式化 | that.simpleDateFormat(millisecond, format) | millisecond:毫秒数,<br>format:yyyy-MM-dd hh:mm:ss 根据需求自定义格式|
|lodash|that.lodash.methodName|具体使用什么工具方法参考[lodash官方文档](https://lodash.com)|
## 表单事件
| 事件方法 | 描述 |
| --- | --- |
| ~~show~~ | 页面表单初始化时触发(不支持获取数据) |
| loaded | 表单数据加载完成后触发 (支持获取表单数据) |
| beforeSubmit | 表单数据提交之前 [详细文档](http://doc.jeecg.com/2061290) |
## API代码
### 初始化表单方法
```
show(){
console.log('form',that)
//this.form.setFieldsValue({"name":"name值"})
that.$nextTick(() => {
//age是对应表的字段名
that.form.setFieldsValue({"age":"age值"})
});
}
```
### 修改字段值
> 字段采用online表单配置的字段英文名
```
that.triggleChangeValue("字段",“值”)
```
### 获取全部表单数据
```
let formData = that.form.getFieldsValue()
```
### 获取表单字段值
```
let sex = that.form.getFieldValue("sex")
```
### 字段值变更触发方法
> ruz_date 是字段名字,所有的字段触发方法都统一写在方法onlChange里。
> onlChange()方法必须与前一段代码有`回车`或者`空格`,否则会报错。
```
onlChange(){
return {
ruz_date(){
let value = event.value
//alert('触发控件',value)
//根据入职日期,自动计算出入职年数
if(value!=null && value!=""){
let currDate = new Date(value.replace(/-/g, "\/"));
let d = new Date();
let ru_year_num = d.getFullYear()-currDate.getFullYear()
let values = {'ru_year_num':ru_year_num + 1}
that.triggleChangeValues(values)
}
}
}
}
```
### 修改表单字段下拉属性
```
that.changeOptions(field,options)
```
> 疑问:此方法能否涉及到 radio、select、搜索下拉等功能。
### 修改表下拉属性
## 示例
### 通过页面多个字段计算出某个字段的值
### 三级联动示例(ajax)
### 通过自定义button提交流程(侧重提交表单数据)
### 动态的控制字段组件的显示与隐藏
### 动态的控制字段组件是否禁用
```
//示例:调用simpleDateFormat格式化时间
show(){
console.log(that.simpleDateFormat(new Date().getTime(),'yyyy年MM月dd日 hh时mm分ss秒'));
}
```
- 项目介绍
- 新手入门教程
- 开发环境准备
- 基础环境要求
- 基础环境与工具安装
- 开发环境搭建
- 如何启动项目
- 平台技术点
- Maven私服设置
- 切换其他数据库
- Websorm通过SVN下载项目
- docker搭建开发环境
- 前端多环境构建配置2.4+
- 快速开始
- HelloWorld
- 上线发布
- JAR部署方案
- WAR部署方案
- 极简部署方案
- Docker镜像制作
- JAR分离打包
- 开启Nginx压缩
- bak
- 2.3 Docker镜像制作
- JAR分离打包方案二
- 2.3前端配置API地址
- 微服务切换
- 微服务整体解决方案2.4+
- 单体升级为微服务方案2.4+
- 微服务快速调试2.4+
- 微服务熔断/降级/限流2.4+
- 微服务Feign接口调用示例2.4+
- jeecg-boot-starter 2.4+
- xxl-job定时任务集成2.4+
- Redisson分布式锁集成2.4+
- rabitmq消息队列集成2.4+
- Redis缓存集成2.4+
- 消息总线用法2.4+
- jeecg-cloud-module2.4+
- 单体升级为微服务方案2.3
- 系统监控跨域问题修复2.3
- 微服务中新增服务接口2.3
- 微服务上线发布
- 微服务上线部署(Windows)
- 微服务上线部署(Centos)
- 微服务上线部署(Ubuntu)
- docker-compose发布
- 2.3版微服务文档
- 微服务配置中心
- RabbitMq安装教程Win
- 通过docker-compose文件部署微服务项目
- 代码生成器
- 代码生成器简介
- 代码生成器使用教程
- 代码生成器配置文件
- 如何自定义生成器模板
- 弃用GUI模式(不建议使用)
- 代码生成器模板
- 如何使用代码生成器
- JAR方式发布如何使用代码生成器
- 生成代码优化
- Online导入表过滤规则
- 常见问题(代码生成)
- 后端开发技巧
- 常用问题汇总
- 自定义注解用法
- Spring缓存注解@Cacheable
- 字典翻译注解@Dict
- 数据权限注解@PermissionData
- 日志记录注解@AutoLog
- 菜单路由配置
- 菜单配置说明
- 带参数路由菜单
- 路由菜单规则
- 菜单快速SQL
- 聚合路由菜单
- 数据快照功能如何用?
- 快速创建module模块
- 旧:新建maven模块项目?
- 查询过滤器用法
- 系统日志怎么插入?
- 自定义sql分页实现
- 针对敏感数据,加密传递方案
- redis 如何使用?
- 事务如何使用?
- 动态数据源使用
- 定时任务如何开发?
- 系统通知接口
- 消息推送接口
- JeecgBoot连接达梦数据库
- 接口敏感数据安全
- 批量插入效率建议
- 短信接口配置(阿里大鱼短信)
- 自定义注解限制重复提交
- 邮箱配置文档
- 公文发文收文
- WPS配置文档
- 公文发文收文使用手册
- WPS集成代码解读
- 积木报表设计器数据集使用
- 父子编码使用说明
- 我的文档安全配置
- 文档预览
- 在线多数据源
- 导入校验工具类
- druid数据库密码加密
- 系统文件上传
- 统一文件上传规则
- MinIO配置
- 阿里云OSS配置
- UI前端开发技巧
- 如何更改默认主题
- Form表单开发特殊性
- Icon图标扩展方法
- vuex使用详解
- vue路由带参总结
- 全局配置文件
- 列表自定义列实现
- 国际化改造方案
- 常用命令
- 报表开发
- 报表开发技术点
- 自定义报表组件
- 源码解读
- 自定义组件
- 前端技巧
- components包下文件描述
- JDictSelectTag字典标签
- duplicateCheck表单字段重复校验通用JS
- JVxeTable行编辑
- 组件配置文档
- 自定义组件
- 封装自定义组件
- 自定义组件增强
- 使用示例
- 常见问题解答
- JEditableTable帮助文档
- JMultiSelectTag多选组件
- JPopup弹窗选择组件
- JSearchSelectTag字典表的搜索组件
- JSelectDepart部门选择组件
- JSelectMultiUser用户多选组件
- JSelectUserByDep根据部门选择用户
- JTreeDict分类字典树形下拉组件
- JTreeSelect树形下拉框 (异步加载)
- JInput 查询组件
- JCron 帮助文档
- JCategorySelect 帮助文档
- JUpload上传组件
- JImageUpload图片上传组件
- JSuperQuery高级查询组件
- JAreaLinkage省市县三级联动
- JEllipsis超长截取显示
- JDate 日期组件
- JCheckbox组件
- JCodeEditor组件
- JSelectMultiple多选下拉组件
- JTreeSelect树形下拉组件
- JImportModal组件
- JAsyncTreeList异步树表格
- JFormContainer使用文档
- JMarkdownEditor使用文档
- 前端开发坑(一定要注意)
- 按需加载方案
- 按需加载@减小打包
- JeecgBoot实战-按需加载方案
- 表格的换行与不换行
- 旧:表格的换行与不换行
- 主子表子表下拉框、时间框弹框被遮挡优化
- 前端依赖包package.json
- 如何实现多列表单
- 前端字典缓存用法
- 自定义首页
- 门户首页Portal权限控制
- 系统权限用法
- JAVA请求权限控制
- 页面按钮权限用法
- 列表列字段权限控制
- 表单权限
- 显示隐藏控制
- 禁用控制用法一
- 禁用控制用法二
- 子表行字段的禁用和隐藏控制
- 数据权限
- 数据权限规则篇
- 数据权限用法篇
- 编码对接数据权限(未用查询过滤器)
- 权限配置自定义SQL
- 二级部门权限管理
- 填值规则(编码生成)
- 校验规则(高级校验)
- 列表列字段导出权限示例
- 备份
- 通过URL方式配置数据权限
- Online表单
- Online菜单配置
- Online开发初体验
- Online表单配置
- Online表单一对多表单配置
- Online表单删除说明
- Online表单标准字段说明
- Online树列表表单配置
- Online表单配置参数说明
- online 导入导出值转换器
- Online表单填值规则配置
- Online表单排版
- Online树列表表单配置(个性化)
- Online表单查询配置说明
- Online表单使用表单设计器
- Online表单控件
- 下拉框@多选框@单选框
- 下拉多选
- 下拉搜索
- Popup控件
- 富文本控件
- 时间控件
- 用户选择器
- 部门选择器
- 自定义树控件
- 分类字典树控件
- Online之popup使用
- 下拉联动组件
- markdown编辑器
- 省市区组件
- 字段排列顺序调整
- 字段显示隐藏控制
- 字段校验规则使用
- 控件配置Href
- 控件默认值表达式
- 开关控件
- Online权限配置( 新版 20200914)
- 字段权限配置与授权
- 按钮权限配置与授权
- 数据权限配置与授权
- Online权限配置
- 列表字段权限(显示与隐藏)
- 表单字段权限(隐藏和禁用)
- 列表按钮权限(隐藏)
- 列表数据权限
- 树形表单数据权限配置
- 二次开发(在线增强)
- online基础篇-JS增强
- online基础篇-JS增强(表单渲染)
- JS增强 API
- 列表
- 表单
- JS增强 实战示例
- 列表自定义按钮
- 表单自定义按钮 改变控件的值
- 修改控件值【从表】
- 修改控件值【单(主)表】
- online表单JS增强实现下拉联动
- 表单提交前事件
- 页面加载时设置表单默认值
- online基础篇-SQL增强
- online基础篇-自定义按钮
- Online自定义按钮-表达式用法
- online基础篇-java增强
- Online java增强 导入
- Online java增强 导出
- Online java增强 查询
- online升级篇-表单API接口
- online升级篇-扩展控件类型
- edu
- Online表单专题课程
- 备注
- Online表单权限配置按钮/列/表单字段的显示或隐藏
- 列表权限
- 列表字段的显示或隐藏
- 列表操作按钮的显示或隐藏
- 列表自定义按钮的显示或隐藏
- 表单权限
- 表单字段的显示或隐藏
- 表单字段的禁用或可编辑
- Online导出支持图片
- Online表单视图功能
- JVXETable和JEditableTable切换方式
- 通过字段href实现3张表的关联
- 从数据库导入表单配置排除表名
- 表单配置[扩展参数]使用手册
- Online报表
- Online图表
- Online图表配置手册
- 列表数据显示规则
- 组合报表的配置方式
- 如何配置菜单
- 常见问题
- JS增强
- 参数说明
- Online报表
- online报表-使用步骤
- online报表-动态参数
- 如何配置报表菜单
- Online报表权限配置
- Online报表系统变量应用
- 参数说明
- Online报表排序
- 字段href
- 字典配置
- online报表-合计
- online报表-配置分组标题
- 高级实战技巧
- HBuilderX打包APP
- 1.Build-JeecgBoot项目
- 2.HBuilderX 打包APP
- HBuilder打包APP手机端安装配置教程
- Websocket业务对接
- WebSocket的集成
- SAAS多租户用法
- 如何集成积木报表
- 【内测】使用jdk14启动项目
- CAS单点登录
- CAS单点登录服务端准备
- 单点登录流程图
- 单点登录配置说明(2.3.1+)
- archive
- 2.JeecgBoot后端对接CAS步骤
- 3.JeecgBoot前端项目对接CAS步骤(2.3.0)
- 表单设计器
- 介绍
- 基础操作
- 配置字段属性
- 配置表单属性
- 配置到菜单
- 移动表单设计
- 表单多视图(移动)
- 表单组件
- 基础字段
- 单选、多选、下拉框
- 日期、时间选择器
- 高级组件
- 文本
- 按钮
- 分隔符
- 文件上传和图片上传
- 布局组件
- Tabs
- 卡片
- 栅格布局
- JEECG字段
- 设计子表
- 表字典(POPUP/下拉)
- 用户组件、部门组件
- 高级操作
- JS增强
- 全局JS增强
- 按钮JS增强
- JS增强示例
- CSS增强
- 表单增强
- 自定义接收URL
- 外部JS\CSS增强
- 控件取值
- 默认值表达式
- 远程API取值
- 填值规则
- 数据绑定映射
- 业务场景
- 远端选项数据
- 高级查询
- Elasticsearch安装与配置
- 高级查询界面
- 权限配置
- 表单字段权限
- 列表数据权限
- 列表按钮权限
- 角色授权
- 路由配置
- 表单对外接口
- 二次开发
- 自定义新控件
- 上传配置(七牛配置)
- 上传云存储自定义2.4+
- 旧:基础操作手册
- 旧:高级操作手册
- AutoPOI(Excel工具)
- 快速文档
- 单表数据导出多表头示例
- 单表数据多表头导入注意
- 导出自定义选择列导出
- @excel注解使用
- excel根据模板导出
- 一对多导出needMerge
- 第三方登录
- 企业微信配置
- 钉钉配置
- 企业微信集成方案
- APP开发
- 后台推送消息给移动端
- 小结
- 编码规范
- 代码规范
- 建表规范
- 个人备忘录
- 小白实战课程
- 任务节点直接关联多节点分支
- 使用排他网管的分支
- 并行网管分支
- 任务节点人员配置表达式使用
- 会签属性循环集合表达式使用
- 流程监听
- 节点配置地址
- 多数据源使用
- 自定义开发流程小结
- 登录时不选择部门不能进入主页面
- docker安装中文字体
- cloud system api
- jvxe升级 - LOWCOD-812
- cloud 跨域问题
- online同步数据库 问题
- online自动测试
- jeecg-uniapp开发
- 开发环境搭建
- 项目简介
- 打包项目
- APP打包
- 微信小程序打包
- H5打包
- 小程序发布
- API接口配置
- uniapp推送
- 后台定时unipush推送配置
- FQA
- 数据库兼容问题
- postgres int类型 实体布尔类型插入数据失败
- docker制作达梦数据库镜像