zoukankan      html  css  js  c++  java
  • 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 智能表单系列 首页 (已完结)

  • 相关阅读:
    flock对文件锁定读写操作的问题 简单
    hdu 2899 Strange Fuction(二分)
    hdu 2199 Can you solve this equation? (二分)
    poj 3080 Blue Jeans (KMP)
    poj 2823 Sliding Window (单调队列)
    poj 2001 Shortest Prefixes (trie)
    poj 2503 Babelfish (trie)
    poj 1936 All in All
    hdu 3507 Print Article (DP, Monotone Queue)
    fzu 1894 志愿者选拔 (单调队列)
  • 原文地址:https://www.cnblogs.com/xiexingen/p/4556020.html
Copyright © 2011-2022 走看看