详细解读BootStrap智能表单系列八表单配置json详解

简介: 详细解读BootStrap智能表单系列八表单配置json详解

本章属于该系列的高级部分,将介绍表单中一些列的配置

1、config列的配置:

主要用于控制布局 :config:{autoLayout:true|'1,2,2,4'}

true:根据配置项最里层的数量来自动使用不同的栅格,

'1,2,2,4':使用指定的栅格来布局,如果配置的列数不足的情况将使用第一项(n,n 为一项)

2、hides的配置项

hides:【{id:'xxx',value:''}//代码效果参考:http://www.ezhiqi.com/zx/art_3728.html】

此项是可选的,主要用于编辑时存放一些不可见的列(如主键ID的值)

3、eles 表单元素的配置(重点)

eles的配置支持2中情况,一种是分组的情况,另外一种是非分组的情况,

eles:【【】,【】】  //非分组的情况,使用交叉数组存放配置列,我暂且把里层的数组称为组配置项,把组里面的配置项称为元素配置项

eles:{'groupName':【】}  //分组的情况,使用json对象来存放

组配置项里层就是单个的元素配置项了,【{ele:{id:'',name:''}}】

细心的博友发现为什么要在元素配置项里面多此一举加一个ele,然后再ele里面存放元素的属性,而不是直接放在元素配置项里面呢

当然是考虑到以后的扩展性,其实元素配置项的完整写法是:{label:{},ele:{}}

A、label:即表达元素前面的提示字符,label里面的配置项:{target:'#contain.id',className:'col-sm-2',text:'#contain.title'}

target:for的元素,默认为ele的id, className:改label上应用的class, text:显示在label中的文字,默认为ele中的title,如果ele中配置了required:true 还将会在label里层生成一个 用来做校验的提示

B、ele:即真正表达元素的配置

{

type:'',id:'',name:'',value:'',className:'col-sm-4',

readonly:false,disable:false,extendAttr:{key:value},required:false,

render:'',

prev:{type:'button',iconClassName:'',ele{render:''}},

next:{iconClassName:'',ele{render:''}},

}

type:目前支持 text(默认)、select、radio、checkbox、textarea、datetime、search

  note:当为select、radio、checkbox的时候,需要为该项设置数据源,items:【{text:'',value:'',select:'可选'}】

  select:withNull:true,将会在数据源的基础上加多一些 --请选择-- 空项

  checkbox:items里面的配置项可以有id、和name及select

render:'',html标签,优先级最高,当为该项设置了其他配置无效,如:render:''

  另外针对pre和next也同样适用,pre:{ele:{render:''}}

pre:用于为元素配置特性选项,

如{ele:{pre:{text:''},type:'text',name:'DisplayName',title:'显示名称:'}} 该配置项为元素前面配置了一个单选框

效果图:

可以支持前后同时配置,详情请参照:第一章支持的简单类型

className:改表单元素适用的class,  className:'col-sm-4'

readonly:false,disable:false  用于设置元素的状态disable、readonly

value:设置元素的默认值

extendAttr:{key:value} 键值对形式,仅支持html5的data-会在元素上生成data-的前缀

  demo:  extendAttr:{select:true}  会在元素上生成一个data-select=true 的扩展属性

组表单配置:'组名':【】

demo:  '个人信息':【{},{}】

相当于多了一层,其他没什么区别,具体请参照:分块表单配置的介绍

上一章:BootStrap 智能表单系列 七 验证的支持

本系列首页:BootStrap 智能表单系列 首页 (已完结)

相关文章
|
1月前
|
JSON Java 数据安全/隐私保护
java中的http请求的封装(GET、POST、form表单、JSON形式、SIGN加密形式)
java中的http请求的封装(GET、POST、form表单、JSON形式、SIGN加密形式)
|
5天前
|
JavaScript
TypeScript编译(tsconfig.json配置)
TypeScript编译(tsconfig.json配置)
5 0
|
23天前
|
Web App开发 JavaScript
使用CRXjs、Vite、Vue 开发 Chrome 多页面插件,手动配置 vite.config.ts 和 manifest.json 文件
使用CRXjs、Vite、Vue 开发 Chrome 多页面插件,手动配置 vite.config.ts 和 manifest.json 文件
25 0
|
27天前
|
JavaScript 编译器 IDE
36.【TypeScript 教程】tsconfig.json 配置
36.【TypeScript 教程】tsconfig.json 配置
13 0
|
1月前
|
JSON 运维 Kubernetes
云效产品使用报错问题之流水线中配置了AppStack,构建时下载的制品内容为json字符串,如何解决
本合集将整理呈现用户在使用过程中遇到的报错及其对应的解决办法,包括但不限于账户权限设置错误、项目配置不正确、代码提交冲突、构建任务执行失败、测试环境异常、需求流转阻塞等问题。阿里云云效是一站式企业级研发协同和DevOps平台,为企业提供从需求规划、开发、测试、发布到运维、运营的全流程端到端服务和工具支撑,致力于提升企业的研发效能和创新能力。
|
1月前
|
前端开发 JavaScript 容器
Bootstrap 5 保姆级教程(十五):表单
Bootstrap 5 保姆级教程(十五):表单
|
12天前
|
存储 JSON JavaScript
【chat-gpt问答记录】python将数据存为json格式和yaml格式
【chat-gpt问答记录】python将数据存为json格式和yaml格式
26 1
|
17天前
|
存储 JSON JavaScript
使用Python处理JSON格式数据
使用Python处理JSON格式数据
|
18天前
|
JSON JavaScript 测试技术
掌握JMeter:深入解析如何提取和利用JSON数据
Apache JMeter教程展示了如何提取和使用JSON数据。创建测试计划,包括HTTP请求和JSON Extractor,设置变量前缀和JSON路径表达式来提取数据。通过Debug Sampler和View Results Tree监听器验证提取结果,然后在后续请求和断言中使用这些数据。此方法适用于复杂测试场景,提升性能和自动化测试效率。
29 0
|
14天前
|
JSON 关系型数据库 MySQL
实时计算 Flink版产品使用问题之在使用CDAS语法同步MySQL数据到Hologres时,如果开启了字段类型宽容模式,MySQL中的JSON类型会被转换为什么
实时计算Flink版作为一种强大的流处理和批处理统一的计算框架,广泛应用于各种需要实时数据处理和分析的场景。实时计算Flink版通常结合SQL接口、DataStream API、以及与上下游数据源和存储系统的丰富连接器,提供了一套全面的解决方案,以应对各种实时计算需求。其低延迟、高吞吐、容错性强的特点,使其成为众多企业和组织实时数据处理首选的技术平台。以下是实时计算Flink版的一些典型使用合集。