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 智能表单系列 八 表单配置json详解的更多相关文章
- BootStrap 智能表单系列 九 表单图片上传的支持
本章介绍如何在生成表单后,可以支持上传图片后可以及时预览图片 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/maste ...
- BootStrap 智能表单系列 六 表单数据绑定(编辑页面的数据绑定)
本章介绍如何在生成表单后,将一个model的数据展示到form表单中(一般用于编辑页面) 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartF ...
- BootStrap 智能表单系列 五 表单依赖插件处理
这一章比较简单哦,主要就是生产表单元素后的一些后续处理操作,比如日期插件的渲染.一些autocomplete的处理等,在回调里面处理就可以了, demo: $("input.date-pic ...
- BootStrap 智能表单系列 四 表单布局介绍
表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是 ...
- Linux Shell系列教程之(八)Shell printf命令详解
本文是Linux Shell系列教程的第(八)篇,更多shell教程请看:Linux Shell系列教程 在上一篇:Linux Shell系列教程之(七)Shell输出这篇文章中,已经对Shell p ...
- 010-Scala单例对象、伴生对象实战详解
010-Scala单例对象.伴生对象实战详解 Scala单例对象详解 函数的最后一行是返回值 子项目 Scala伴生对象代码实战 object对象的私有成员可以直接被class伴生类访问,但是不可以被 ...
- ARP缓存表的构成ARP协议全面实战协议详解、攻击与防御
ARP缓存表的构成ARP协议全面实战协议详解.攻击与防御 1.4.3 ARP缓存表的构成 在局域网的任何一台主机中,都有一个ARP缓存表.该缓存表中保存中多个ARP条目.每个ARP条目都是由一个IP ...
- SQL Server 表的管理_关于事务操作的详解(案例代码)
SQL Server 表的管理_关于事务操作的详解(案例代码) 1.概念 事务(transaction): 是将多个修改语句组合在一起的方法,这个方法中的所有语句只有全部执行才能正确完成功能.即要么全 ...
- Spartan6系列之芯片配置模式详解
1. 配置概述 Spartan6系列FPGA通过把应用程序数据导入芯片内部存储器完成芯片的配置.Spart-6 FPGA可以自己从外部非易失性存储器导入编程数据,或者通过外界的微处理器.DSP等对 ...
随机推荐
- c语言中的制表符\t与空格
(本文不讨论制表符与空格缩进问题) 编程过程中,我们常常用多个空格或制表符分隔两个字符串,那么这两个在显示效果上有什么区别呢? 比较如下两行代码的输出效果 代码1: printf("1\t1 ...
- J2SE知识点摘记(十五)
1. 字节流和字符流的转换 以字符为导向的stream基本上有与之相对应的以字节为导向的Stream,两个对应类实现的功能相同,只是操作时的导向不同 字节输入流转换为字符输入流: Inp ...
- shell学习笔记
shell学习笔记 .查看/etc/shells,看看有几个可用的Shell . 曾经用过的命令存在.bash_history中,但是~/.bash_history记录的是前一次登录前记录的所有指令, ...
- 前端web应用的组件化(二) 徐飞
Web应用的组件化(二) https://github.com/xufei/blog/issues/7 管控平台 在上一篇中我们提到了组件化的大致思路,这一篇主要讲述在这么做之后,我们需要哪些外围手段 ...
- mysql 权限控制具体解释
概述 mysql权限控制在不同的上下文和不同的操作水平上都能够进行控制,他们包括例如以下几个 ** 管理权限能够同意用户管理mysql server的操作. 这些权限控制是全局的,不是针对某个特定的数 ...
- JavaScript之JS的执行环境和作用域
一.执行环境是JavaScript中最为重要的一个概念.执行环境定义了变量或函数有权访问的其他数据,决定了他们各自的行为,每个执行环境都有一个与之关联的变量对象(variable object),环境 ...
- 浅谈HtmlUnit的使用
一.htmlunit 是一款开源的java 页面分析工具,读取页面后,可以有效的使用htmlunit分析页面上的内容.项目可以模拟浏览器运行,被誉为java浏览器的开源实现.这个没有界面的浏览器,运行 ...
- C#实现多态之一抽象
1. 抽象类.抽象方法.抽象属性的特点 (1) 关键字:abstract (2) 抽象类只能是其他类的基类 (3) 抽象成员必须存在于抽象类中,但抽象类可以没有抽象成员, ...
- 对常量的引用(reference to const)的一般用途(转载)
如果是对一个常量进行引用,则编译器首先建立一个临时变量,然后将该常量的值置入临时变量中,对该引用的操作就是对该临时变量的操作.对C++常量引用可以用其它任何引用来初始化:但不能改变. 关于引用的初始化 ...
- nginx install lua module
#install luajit #http://luajit.org/download.html .tar.gz cd LuaJIT- make install PREFIX=/home/allen. ...