FastAdmin默认集成了多个第三方组合,如表单验证、文件上传、下拉列表、时间选择、城市选择、Selectpage,所有的组件都必须使用Form.api.bindevent("form[role=form]")
来进行初始化,如果不进行初始化是无法对相应组件进行渲染和事件绑定,同时表单提交成功后也不会关闭当前窗口。
如果我们想单独为元素绑定事件和渲染,我们可以使用如下的代码
组件 | 代码 | 介绍 |
---|---|---|
文件上传 | Form.events.plupload($("form")); | 渲染并绑定form中的上传组件 |
动态下拉列表 | Form.events.selectpage($("form")); | 渲染并绑定form中的Selectpage组件 |
表单验证 | Form.events.validator($("form")); | 渲染并绑定form中的表单验证 |
城市选择 | Form.events.citypicker($("form")); | 渲染并绑定form中的城市选择组件 |
日期时间 | Form.events.datetimepicker($("form")); | 渲染并绑定form中的日期时间组件 |
下拉列表 | Form.events.selectpicker($("form")); | 渲染并绑定form中的Selectpicker组件 |
附件选择 | Form.events.faselect($("form")); | 渲染并绑定form中的选择附件组件 |
键值组件 | Form.events.fieldlist($("form")); | 渲染并绑定form中的键值组件 |
开关组件 | Form.events.switcher($("form")); | 渲染并绑定form中的开关组件 |
滑块组件 | Form.events.slider($("form")); | 渲染并绑定form中的滑块组件 |
如果是动态生成的元素,默认是没有绑定事件的,可以使用上述的代码进行绑定事件。其中$("form")
为所需绑定事件元素的父级元素,并不限定为必须是一个form
,也可以是个div
或p
元素。
Form.api.bindevent
共有四个元素,分别如下:
名称 | 类型 | 说明 |
---|---|---|
form | string、object | 元素容器,并不限定一定是个form元素,也可以是div或其它元素 |
success | function | 成功后的回调,回调参数:data,ret |
error | function | 失败后的回调,回调参数:data,ret |
submit | function | 提交前的回调,回调参数:success,error |
Form.api.bindevent($("form"), function(data,ret){
//成功的回调,如果返回false,将不会出现提示消息
//return false;
}, function(data, ret){
//失败的回调,如果返回false,将不会出现提示消息
//return false;
}, function(success, error){
//如果返回falsle,将阻止表单的提交
//return false;
//如果处理成功后我们可以使用Form.api.submit(this, success, error);再次提交表单
});
如果我们需要给一个文本框单独绑定一个组件,例如我们只需要给文本框绑定日期时间选择组件
,我们可以采用下面的方式。
require(['form'], function(Form){
Form.events.datetimepicker($("#parentdiv"));
});
注意这里的$("#parentdiv")
为文本框父元素的选择对象。