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 相关文章推荐
js验证模型自我实现的具体方法
Jun 21 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
jquery实现图片上传之前预览的方法
Jul 11 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
jquery仿京东商品放大浏览页面
Jun 06 jQuery
Vue0.1的过滤代码如何添加到Vue2.0直接使用
Aug 23 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
JavaScript监听一个DOM元素大小变化
Apr 26 Javascript
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
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/03/10 PHP
来自phpguru得Php Cache类源码
2010/04/15 PHP
写php分页时出现的Fatal error的解决方法
2011/04/18 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
PHP函数引用返回的实例详解
2016/09/11 PHP
phpStudy 2016 使用教程详解(支持PHP7)
2017/10/18 PHP
php post换行的方法
2020/02/03 PHP
Yii Framework框架开发微信公众平台示例
2020/04/26 PHP
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
JavaScript里 ==与===区别详解
2016/08/16 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
JavaScript实现随机五位数验证码
2019/09/27 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
Python运行报错UnicodeDecodeError的解决方法
2016/06/07 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
施华洛世奇意大利官网:SWAROVSKI意大利
2018/07/23 全球购物
方正Java笔试题
2014/07/03 面试题
2014自荐信的写作技巧
2014/01/28 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
九年级历史教学反思
2016/02/19 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书
导游词之桂林山水
2019/09/20 职场文书
详解Redis瘦身指南
2021/05/26 Redis