详细解读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:''}//

此项是可选的,主要用于编辑时存放一些不可见的列(如主键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 智能表单系列 首页 (已完结)

相关文章
|
20天前
|
前端开发 数据安全/隐私保护 容器
Bootstrap5 表单1
本章介绍如何使用 Bootstrap5 创建表单,包括堆叠和内联表单布局。表单元素如 `<input>`、`<textarea>` 和 `<select>` 使用 `.form-control` 类后宽度为 100%。示例展示了如何创建包含邮箱、密码输入框及复选框的堆叠表单,并使用 `.form-label` 确保标签有适当内边距。
|
19天前
Bootstrap5 表单3
使用 `<textarea>` 标签和 `.form-control` 类创建和调整大小的表单文本框示例,包括大、中、小三种尺寸的输入框。
|
19天前
Bootstrap5 表单4
介绍禁用/只读表单、纯文本输入及取色器的使用方法。通过设置 `disabled` 和 `readonly` 属性,可使输入框变为禁用或只读状态;使用 `.form-control-plaintext` 类可去除输入框边框,实现纯文本显示效果;添加 `.form-control-color` 类则可创建取色器。示例代码展示了具体应用。
|
1月前
|
Java 数据库连接 数据库
springboot启动配置文件-bootstrap.yml常用基本配置
以上是一些常用的基本配置项,在实际应用中可能会根据需求有所变化。通过合理配置 `bootstrap.yml`文件,可以确保应用程序在启动阶段加载正确的配置,并顺利启动运行。
122 2
|
19天前
|
数据安全/隐私保护
Bootstrap5 表单2
内联表单示例:通过在表单中使用 `.row` 和 `.col` 类,可以使输入框等表单元素并排显示。此例展示了一个包含邮箱和密码输入框的内联表单。
|
2月前
|
存储 JavaScript 前端开发
TypeScript :使用mock提供数据&as const 的使用&tsconfig.json配置
本文介绍了如何在项目中使用 Mock 提供数据,包括安装依赖、配置 Vite 和 TypeScript,以及如何使用 `as const`、元组和 tsconfig.json 配置文件。通过这些配置,可以实现更灵活和高效的开发体验。
|
4月前
|
移动开发 JavaScript 前端开发
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
这篇文章介绍了在UniApp H5项目中处理跨域问题的两种方法:通过修改manifest.json文件配置h5设置,或在项目根目录创建vue.config.js文件进行代理配置,并提供了具体的配置代码示例。
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
|
2月前
|
XML JSON 前端开发
C#使用HttpClient四种请求数据格式:json、表单数据、文件上传、xml格式
C#使用HttpClient四种请求数据格式:json、表单数据、文件上传、xml格式
527 0
|
5月前
tasks.json、launch.json、c_cpp_properties.json配置
tasks.json、launch.json、c_cpp_properties.json配置
89 0
N..
|
7月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
70 0
下一篇
DataWorks