BootStrap智能表單實(shí)戰(zhàn)系列(八)表單配置json詳解
本章屬于該系列的高級部分,將介紹表單中一些列的配置
1、config列的配置:
主要用于控制布局 :config:{autoLayout:true|'1,2,2,4'}
true:根據(jù)配置項(xiàng)最里層的數(shù)量來自動使用不同的柵格,
'1,2,2,4':使用指定的柵格來布局,如果配置的列數(shù)不足的情況將使用第一項(xiàng)(n,n 為一項(xiàng))
2、hides的配置項(xiàng)
hides:[{id:'xxx',value:''}]
此項(xiàng)是可選的,主要用于編輯時(shí)存放一些不可見的列(如主鍵ID的值)
3、eles 表單元素的配置(重點(diǎn))
eles的配置支持2中情況,一種是分組的情況,另外一種是非分組的情況,
eles:[[],[]] //非分組的情況,使用交叉數(shù)組存放配置列,我暫且把里層的數(shù)組稱為組配置項(xiàng),把組里面的配置項(xiàng)稱為元素配置項(xiàng)
eles:{'groupName':[]} //分組的情況,使用json對象來存放
組配置項(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)的完整寫法是:{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 還將會在label里層生成一個(gè)<span> 用來做校驗(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,將會在數(shù)據(jù)源的基礎(chǔ)上加多一些 --請選擇-- 空項(xiàng)
checkbox:items里面的配置項(xiàng)可以有id、和name及select
render:'',html標(biāo)簽,優(yōu)先級最高,當(dāng)為該項(xiàng)設(shè)置了其他配置無效,如:render:'<input type="file" name="" id="" />'
另外針對pre和next也同樣適用,pre:{ele:{render:''}}
pre:用于為元素配置特性選項(xiàng),
如{ele:{pre:{text:'<input type="radio">'},type:'text',name:'DisplayName',title:'顯示名稱:'}} 該配置項(xiàng)為元素前面配置了一個(gè)單選框
效果圖:
可以支持前后同時(shí)配置,詳情請參照:第一章支持的簡單類型
className:改表單元素適用的class, className:'col-sm-4'
readonly:false,disable:false 用于設(shè)置元素的狀態(tài)disable、readonly
value:設(shè)置元素的默認(rèn)值
extendAttr:{key:value} 鍵值對形式,僅支持html5的data-會在元素上生成data-的前綴
demo: extendAttr:{select:true} 會在元素上生成一個(gè)data-select=true 的擴(kuò)展屬性
組表單配置:'組名':[]
demo: '個(gè)人信息':[{},{}]
以上所述是小編給大家介紹的BootStrap智能表單實(shí)戰(zhàn)系列(八)表單配置json詳解的全部敘述,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- Bootstrap表單布局樣式代碼
- BootStrap智能表單實(shí)戰(zhàn)系列(四)表單布局介紹
- BootStrap 智能表單實(shí)戰(zhàn)系列(五) 表單依賴插件處理
- BootStrap智能表單實(shí)戰(zhàn)系列(六)表單編輯頁面的數(shù)據(jù)綁定
- BootStrap智能表單實(shí)戰(zhàn)系列(七)驗(yàn)證的支持
- BootStrap智能表單實(shí)戰(zhàn)系列(九)表單圖片上傳的支持
- BootStrap 智能表單實(shí)戰(zhàn)系列(十)自動完成組件的支持
- BootStrap智能表單實(shí)戰(zhàn)系列(十一)級聯(lián)下拉的支持
- 第七篇Bootstrap表單布局實(shí)例代碼詳解(三種表單布局)
相關(guān)文章
javascript調(diào)試之DOM斷點(diǎn)調(diào)試法使用技巧分享
在開發(fā)中,偶爾會遇到類似這樣的問題:頁面上的一個(gè)DOM元素被改了屬性,但是我們卻不知道是哪個(gè)腳本更改的2014-04-04淺談nodeName,nodeValue,nodeType,typeof 的區(qū)別
本文主要簡單介紹了nodeName,nodeValue,nodeType,typeof 的區(qū)別,算是知識點(diǎn)的一個(gè)小總結(jié),希望對小伙伴們有所幫助2015-01-01BootStrap模態(tài)框和select2合用時(shí)input無法獲取焦點(diǎn)的解決方法
在bootstrap的模態(tài)框里使用select2插件,會導(dǎo)致select2里的input輸入框沒有辦法獲得焦點(diǎn),沒有辦法輸入。怎么解決這個(gè)問題呢?下面小編給大家?guī)砹薆ootStrap模態(tài)框和select2合用時(shí)input無法獲取焦點(diǎn)的解決方法,一起看看吧2017-09-09JS實(shí)現(xiàn)表單中點(diǎn)擊小眼睛顯示隱藏密碼框中的密碼
這篇文章主要介紹了JS實(shí)現(xiàn)表單中點(diǎn)擊小眼睛顯示隱藏密碼框中的密碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考價(jià)值,需要的朋友可以參考下2020-04-04