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 相关文章推荐
学习ExtJS fit布局使用说明
Oct 08 Javascript
js弹出确认是否删除对话框
Mar 27 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
javascript封装简单实现方法
Aug 11 Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
Nuxt.js开启SSR渲染的教程详解
Nov 30 Javascript
js中值引用和地址引用实例分析
Jun 21 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仿盗链代码
2012/06/03 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
js 与 php 通过json数据进行通讯示例
2014/03/26 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
js图片无缝滚动插件使用详解
2020/05/26 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
python的依赖管理的实现
2019/05/14 Python
python读取大文件越来越慢的原因与解决
2019/08/08 Python
浅析python中while循环和for循环
2019/11/19 Python
python计算二维矩形IOU实例
2020/01/18 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
大学生职业生涯规划书参考模板
2014/03/05 职场文书
奉献演讲稿范文
2014/05/21 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
2015年工商所工作总结
2015/05/21 职场文书