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 相关文章推荐
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
一个JQuery操作Table的代码分享
Mar 30 Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
使用jquery实现以post打开新窗口
Mar 19 Javascript
jquery带翻页动画的电子杂志代码分享
Aug 21 Javascript
javascript小数精度丢失的完美解决方法
May 31 Javascript
JS 日期与时间戮相互转化的简单实例
Jun 22 Javascript
加载 vue 远程代码的组件实例详解
Nov 20 Javascript
Vue组件化开发思考
Feb 02 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
Weex开发之地图篇的具体使用
Oct 16 Javascript
正则表达式基础与常用验证表达式
Jun 16 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
Terran兵种介绍
2020/03/14 星际争霸
php 301转向实现代码
2008/09/18 PHP
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
PDO::errorCode讲解
2019/01/28 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
2016/12/29 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
Element-ui table中过滤条件变更表格内容的方法
2018/03/02 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
如何在vue里添加好看的lottie动画
2018/08/02 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
vue3实现v-model原理详解
2019/10/09 Javascript
超详细小程序定位地图模块全系列开发教学
2020/11/24 Javascript
Python正则表达式匹配ip地址实例
2014/10/09 Python
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
Python的Flask框架中Flask-Admin库的简单入门指引
2015/04/07 Python
Python中的多重装饰器
2015/04/11 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
Python lambda表达式用法实例分析
2018/12/25 Python
Python中使用socks5设置全局代理的方法示例
2020/04/15 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
环境工程大学生自荐信
2013/10/21 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书