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里层生成一个<span> 用来做校验的提示

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:"<input type="file" name="" id="" />"

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

pre：用于为元素配置特性选项，

如{ele:{pre:{text:"<input type="radio">"},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智能表单实战系列（八）表单配置json详解的全部叙述，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！