组件配置

初始化配置项

字段配置项

组件示例

文本input类型

日期类型

下拉选择项类型

checkbox复选框类型

radio单选框类型

文本域类型

弹出表格类型

按钮类型

其它类型

隐藏类型

事件方法

表单取(赋)值

表单序列化取值

表单赋值

接收页面传参

如果你厌倦了繁琐冗长、难以记忆的传统表单元素,那么你不妨尝试一下Sweet为你量身打造的表单生态组件,它集成了文本、文本域、复选框和单选框等基本表单元素,并且拓展集成了 日期下拉以及 弹出表格等各种表单插件,配置简单,功能强大。
组件配置
初始化配置项 sweet.formCreate({})
参数 是否必传 类型 默认值 作用
target 必传 String类型,必须是css选择器 body 组件渲染的目标元素
formEle 非必传 Array Object attr object 行自定义属性
overstep Boolean false 该行是否在更多展开显示
col Array Object 字段配置项
字段配置项 col
参数 是否必传 类型 默认值 作用
eleType 必传 String( input/ date/ select/
checkbox/ radio/ textarea/ eject/ button/ other)
input 表单类型,input是文本类型,select是下拉类型,
date是日期类型,eject是弹出表格类型,
checkbox是复选框类型,radio是单选框类型,
textarea是文本域类型,button是按钮类型,other是自定义元素。
colspan 非必传 Number 3 字段宽度所占网格数
icon 非必传 Boolean/String false 值为ture,生成默认图标;值为class名,生成指定图标;值为false,无图标。
图标用法参见 font-awesome
label 非必传 String 字段标题
placeholder 非必传 String label 字段提示,默认为请输入label
val 非必传 String 字段默认值
attr 非必传 Object 自定义属性
visible 非必传 Boolean true 字段是否显示
event 非必传 Object(focus/input/click...) 为元素绑定事件,与 jquery事件名完全一致
组件示例
文本input类型

● 通过Sweet表单组件,你可以最快捷最规范的生成各式各样的文本框。
● 不必担心适应不了你复杂多变的需求,因为你可以随心所欲的配置自定义属性

日期类型

● 底层依然是 my97 DatePicker,但在Sweet表单组件的它更为易用。

下拉选择项类型

sweet.select下拉选择项组件在表单组件中,配置不变,完全适用。

checkbox复选框类型

● checkbox复选框与select的多选模式非常相似,通过item属性绑定数据源。

radio单选框类型

● radio单选框与select的单选模式非常相似,通过item属性绑定数据源。

文本域类型

● 文本域类型用于展示字数比较多的字段,与原生textarea一样支持行数设定。

弹出表格类型

● 在表单组件中使用 弹出表格,完全遵循原来的配置规范。

按钮类型
其它类型

● Sweet表单组件提供了自定义元素的机制other类型,您可以自定义为p、a以及div等任意标签。

隐藏类型

● 通过定义class名(class=wj_hide),隐藏某行。

● 通过定义overstep属性,将该行设置在展开更多中显示。

查询信息

● 通过配置属性(visible:false),完全隐藏某个字段。

● 通过定义class名(class=wj_hide),隐藏某个字段,保留标题。

事件方法

● 字段配置项中的event用于给元素绑定事件。
● 事件名与 jquery事件完全一致。

表单取(赋)值
表单序列化取值

sweet.getFormDatas("ele"),内置的表单序列化取值方法,可用于form表单批量取值,没有form不会调用。
● 该方法通过name属性取值,并将name属性值作为关键字,最终以键值对形式返回。
● 我们推荐表单元素都要设置name属性,同一个form中name不能重复(radio和checkbox类型除外)。
● 设置了disabled属性的字段元素,不能通过表单序列化方法取值。

表单赋值

sweet.giveFormDatas("ele",data),内置的表单序列化赋值方法,可用于form表单批量取值,没有form不会调用。
● 该方法接收键值对,以name属性值为键匹配字段赋值。

接收页面传参

sweet.getQueryString(),内置的接收页面传参方法。
● 该方法可传参数名name,获取制定字段值,也可省略获取全部字段值。如下