BootStrap智能表单实战系列(八)表单配置json详解


Posted in Javascript onJune 13, 2016

 本章属于该系列的高级部分,将介绍表单中一些列的配置

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:'显示名称:'}} 该配置项为元素前面配置了一个单选框

效果图:

BootStrap智能表单实战系列(八)表单配置json详解

可以支持前后同时配置,详情请参照:第一章支持的简单类型

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智能表单实战系列(八)表单配置json详解的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript attachEvent传递参数的办法
Dec 14 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
Apr 17 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
May 10 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 Javascript
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
ExtJS中设置下拉列表框不可编辑的方法
May 07 Javascript
构造函数+原型模式构造js自定义对象(最通用)
May 12 Javascript
使用JavaScript实现连续滚动字幕效果的方法
Jul 07 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
理解javascript封装
Feb 23 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 Javascript
JS div匀速移动动画与变速移动动画代码实例
Mar 26 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 #Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 #Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 #Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
Jun 13 #Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 #Javascript
JS/jQ实现免费获取手机验证码倒计时效果
Jun 13 #Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
Jun 13 #Javascript
You might like
需要发散思维学习PHP
2009/06/29 PHP
PHP数据流应用的一个简单实例
2012/09/14 PHP
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
作为PHP程序员应该了解MongoDB的五件事
2013/06/03 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
js实现拖动缓动效果
2020/01/13 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
[46:47]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS NE
2014/05/22 DOTA
[01:07:47]Secret vs Optic Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
深入理解Python中的元类(metaclass)
2015/02/14 Python
Pthon批量处理将pdb文件生成dssp文件
2015/06/21 Python
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
python算法表示概念扫盲教程
2017/04/13 Python
python八皇后问题的解决方法
2018/09/27 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
python和js交互调用的方法
2020/06/23 Python
Python学习之time模块的基本使用
2021/01/17 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
给同事的道歉信
2014/01/11 职场文书
行政助理工作职责范本
2014/03/04 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
政工例会汇报材料
2014/08/26 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
详解Java实现数据结构之并查集
2021/06/23 Java/Android
MyBatis 动态SQL全面详解
2021/10/05 MySQL