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 相关文章推荐
Node.js常用工具之util模块
Mar 09 Javascript
vue语法之拼接字符串的示例代码
Oct 25 Javascript
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
webpack4打包vue前端多页面项目
Sep 17 Javascript
Node.js npm命令运行node.js脚本的方法
Oct 10 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 Javascript
vue.js中导出Excel表格的案例分析
Jun 11 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 Javascript
js实现简单五子棋游戏
May 28 Javascript
jquery简易手风琴插件的封装
Oct 13 jQuery
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 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
为查询结果建立向后/向前按钮
2006/10/09 PHP
PHP clearstatcache()函数详解
2010/03/02 PHP
PHP开发负载均衡指南
2010/07/17 PHP
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
Yii框架安装简明教程
2020/05/15 PHP
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
node.js中的fs.statSync方法使用说明
2014/12/16 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
微信小程序获取音频时长与实时获取播放进度问题
2018/08/28 Javascript
webpack4简单入门实例
2018/09/06 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
关于JS模块化的知识点分享
2019/10/16 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
python读写ini文件示例(python读写文件)
2014/03/25 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
python单线程下实现多个socket并发过程详解
2019/07/27 Python
Python读取表格类型文件代码实例
2020/02/17 Python
Django ModelForm操作及验证方式
2020/03/30 Python
如何基于线程池提升request模块效率
2020/04/18 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
美国网上眼镜供应商:LEOTONY(眼镜、RX太阳镜和太阳镜)
2017/10/31 全球购物
木工主管岗位职责
2013/12/08 职场文书
三月学雷锋活动总结
2014/06/26 职场文书
党的群众路线教育实践活动个人对照检查材料(公安)
2014/11/05 职场文书
社区好人好事材料
2014/12/26 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
Python使用DFA算法过滤内容敏感词
2022/04/22 Python