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禁用键盘功能键让右击及其他键无效
Oct 09 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 Javascript
Javascript动画效果(4)
Oct 11 Javascript
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
js原生方法被覆盖,从新赋值原生的方法
Jan 02 Javascript
微信小程序的tab选项卡的实现效果
May 15 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 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
虫族 ZERG 概述
2020/03/14 星际争霸
smarty基础之拼接字符串的详解
2013/06/18 PHP
php跨域cookie共享使用方法
2014/02/20 PHP
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
浅谈php7的重大新特性
2015/10/23 PHP
PHP中的session安全吗?
2016/01/22 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
PHP从零开始打造自己的MVC框架之类的自动加载实现方法详解
2019/06/03 PHP
JavaScript的Date()方法使用详解
2015/06/09 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
Python利用IPython提高开发效率
2016/08/10 Python
pygame游戏之旅 载入小车图片、更新窗口
2018/11/20 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
浅谈Pandas Series 和 Numpy array中的相同点
2019/06/28 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
市场营销方案范文
2014/03/11 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
2015年个人思想总结
2015/03/09 职场文书
教师远程培训心得体会
2016/01/09 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
python 如何在 Matplotlib 中绘制垂直线
2021/04/02 Python
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电