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 智能表單系列 七 驗證的支持

本系列首頁:BootStrap 智能表單系列 首頁 (已完結)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM