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 智能表单系列 首页 (已完结)

  • 相关阅读:
    用Fiddler模拟低速网络环境
    定制 Fiddler 之将请求发往另一服务器
    软件测试流程进阶----两年软件测试总结
    Fiddler 4 抓包(APP HTTPS )
    JMeter报错 ERROR o.a.j.t.JMeterThread: Test failed!
    Python显示百分比
    python 2 到 3 的新手坑
    Python运行的17个时新手常见错误小结
    Python去除字符串的空格
    js控制媒体查询样式/判断是PC端还是移动端
  • 原文地址:https://www.cnblogs.com/xiexingen/p/4556020.html
Copyright © 2011-2022 走看看