BootStrap智能表单实战系列(八)表单配置json详解
本章属于该系列的高级部分，将介绍表单中一些列的配置
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:'显示名称:'}} 该配置项为元素前面配置了一个单选框
效果图：
可以支持前后同时配置，详情请参照：第一章支持的简单类型
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详解的全部叙述，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
BootStrap智能表单实战系列(九)表单图片上传的支持
什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. Bootstrap 包的内容 基本结构:Bootstrap 提供了一个带有网格系统.链接样式.背景的基本结构.这将在 Bootst
-
BootStrap 智能表单实战系列(五) 表单依赖插件处理
什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. Bootstrap 包的内容 基本结构:Bootstrap 提供了一个带有网格系统.链接样式.背景的基本结构.这将在 Bootst
-
BootStrap智能表单实战系列(七)验证的支持
但凡是涉及到用户编辑信息然后保存的页面,都涉及到一个数据是否符合要求的检查,需要客服端和服务器端的校验的问题: 客服端的校验主要是为了提高用户体验,而服务器端的校验为了数据的合格性 该插件也为您支持到了表单验证,在需要验证的列的配置中加一项required:true 再生成表单元素前面的label的时候会自动在label前面生成一个*,用于提示 改列数据会进行校验 验证是使用了jquery validation,具体使用方式请参照jquery validation的api 代码如下(页面地址:h
-
Bootstrap表单布局样式代码
废话不多说了,直接给大家贴代码了. <form class="form-horizontal" role="form"> <fieldset> <legend>配置数据源</legend> <div class="form-group"> <label class="col-sm-2 control-label" for="ds_host"&
-
BootStrap 智能表单实战系列(十)自动完成组件的支持
web开发中,肯定遇到像百度.google这种搜索的功能吧,那智能表单中的自动完成可以做什么呢,下面来揭晓: 1.包含像google.百度等类似的简单搜索 2.复杂结构的支持,比如说 输入产品编号,需要将产品的编号.产品的名称.产品的单价.产品的备注信息等填写会表单中的某个位置 代码如下(页面地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form3-ele-autocomplete.html): 自动完成
-
BootStrap智能表单实战系列(四)表单布局介绍
什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是根据autoLayout来决定使用的栅格,通过设置autoLayout:'1,2,1,2,2,4' 表示 第一.二列占3格
-
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. Bootstrap 包的内容 基本结构:Bootstrap 提供了一个带有网格系统.链接样式.背景的基本结构.这将在 Bootst
-
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
Bootstrap提供了三种表单布局:垂直表单,内联表单和水平表单.下面逐一给大家介绍,有兴趣的朋友一起学习吧. 创建垂直或基本表单: •·向父 <form> 元素添加 role="form". •·把标签和控件放在一个带有 class .form-group 的 <div> 中.这是获取最佳间距所必需的. •·向所有的文本元素 <input>.<textarea> 和 <select> 添加 class .form-cont
-
BootStrap智能表单实战系列(十一)级联下拉的支持
什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. Bootstrap 包的内容 基本结构:Bootstrap 提供了一个带有网格系统.链接样式.背景的基本结构.这将在 Bootst
-
BootStrap智能表单实战系列(八)表单配置json详解
本章属于该系列的高级部分,将介绍表单中一些列的配置 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 表单元素的配置(
-
Python深度学习实战PyQt5安装与环境配置过程详解
目录 1. PyQt5 图形界面开发工具 1.1 从 CLI 到 GUI 1.2 PyQt5 开发工具 2. 安装 PyQt5 和 QtTools pip 安装 PyQt5 pip 安装 QtTools 3. QtDesigner 和 PyUIC 的环境配置 3.1 在 PyCharm 添加 Create Tools 3.2 添加 QtDesigner 工具 3.3 添加 PyUIC 工具 4. QtDesigner 和 PyUIC 的快速入门 4.1 QtDesigner 的启动和入门 新建一
-
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. Bootstrap 包的内容 基本结构:Bootstrap 提供了一个带有网格系统.链接样式.背景的基本结构.这将在 Bootst
-
BootStrap智能表单实战系列(三)分块表单配置详解
什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. Bootstrap 包的内容 基本结构:Bootstrap 提供了一个带有网格系统.链接样式.背景的基本结构.这将在 Bootst