本章屬于該系列的高級(jí)部分，將介紹表單中一些列的配置

1、config列的配置：

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

true:根據(jù)配置項(xiàng)最里層的數(shù)量來(lái)自動(dòng)使用不同的柵格，

'1,2,2,4':使用指定的柵格來(lái)布局，如果配置的列數(shù)不足的情況將使用第一項(xiàng)(n,n 為一項(xiàng))

2、hides的配置項(xiàng)

hides:[{id:'xxx',value:''}]

此項(xiàng)是可選的，主要用于編輯時(shí)存放一些不可見(jiàn)的列(如主鍵ID的值)

3、eles 表單元素的配置(重點(diǎn))

eles的配置支持2中情況，一種是分組的情況，另外一種是非分組的情況，

eles:[[],[]]　　//非分組的情況，使用交叉數(shù)組存放配置列，我暫且把里層的數(shù)組稱(chēng)為組配置項(xiàng)，把組里面的配置項(xiàng)稱(chēng)為元素配置項(xiàng)

eles:{'groupName':[]}　　//分組的情況，使用json對(duì)象來(lái)存放

組配置項(xiàng)里層就是單個(gè)的元素配置項(xiàng)了，[{ele:{id:'',name:''}}]

細(xì)心的博友發(fā)現(xiàn)為什么要在元素配置項(xiàng)里面多此一舉加一個(gè)ele，然后再ele里面存放元素的屬性，而不是直接放在元素配置項(xiàng)里面呢

當(dāng)然是考慮到以后的擴(kuò)展性，其實(shí)元素配置項(xiàng)的完整寫(xiě)法是:{label:{},ele:{}}

A、label：即表達(dá)元素前面的提示字符，label里面的配置項(xiàng)：{target:'#contain.id',className:'col-sm-2',text:'#contain.title'}

target：for的元素，默認(rèn)為ele的id， className：改label上應(yīng)用的class， text:顯示在label中的文字，默認(rèn)為ele中的title,如果ele中配置了required：true 還將會(huì)在label里層生成一個(gè)<span> 用來(lái)做校驗(yàn)的提示

B、ele:即真正表達(dá)元素的配置

{ 
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(默認(rèn))、select、radio、checkbox、textarea、datetime、search

　　note:當(dāng)為select、radio、checkbox的時(shí)候，需要為該項(xiàng)設(shè)置數(shù)據(jù)源，items:[{text:'',value:'',select:'可選'}]

　　select:withNull:true,將會(huì)在數(shù)據(jù)源的基礎(chǔ)上加多一些 --請(qǐng)選擇-- 空項(xiàng)

　　checkbox:items里面的配置項(xiàng)可以有id、和name及select

render:''，html標(biāo)簽，優(yōu)先級(jí)最高，當(dāng)為該項(xiàng)設(shè)置了其他配置無(wú)效，如：render:'<input type="file" name="" id="" />'

　　另外針對(duì)pre和next也同樣適用,pre：{ele:{render:''}}

pre：用于為元素配置特性選項(xiàng)，

如{ele:{pre:{text:'<input type="radio">'},type:'text',name:'DisplayName',title:'顯示名稱(chēng):'}} 該配置項(xiàng)為元素前面配置了一個(gè)單選框

效果圖：

可以支持前后同時(shí)配置，詳情請(qǐng)參照：第一章支持的簡(jiǎn)單類(lèi)型

className：改表單元素適用的class,　　className:'col-sm-4'

readonly:false,disable:false　　用于設(shè)置元素的狀態(tài)disable、readonly

value：設(shè)置元素的默認(rèn)值

extendAttr:{key:value} 鍵值對(duì)形式，僅支持html5的data-會(huì)在元素上生成data-的前綴

　　demo:　　extendAttr:{select:true}　　會(huì)在元素上生成一個(gè)data-select=true 的擴(kuò)展屬性

組表單配置：'組名':[]

demo：　　'個(gè)人信息':[{},{}]

以上所述是小編給大家介紹的BootStrap智能表單實(shí)戰(zhàn)系列(八)表單配置json詳解的全部敘述，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論