sbadmin表单事件

Form表单

自定义表单

生成后我们必须引入表单事件才能使有的表单组件正确显示（一般用的是Form.api.bindevent("form[role=form]");进行组件初始化）

引入表单js模块

//直接引入
require(['form'], function(Form){});

//当我们在新建了项目在/public/assets/js/控制器名.js中引入:（模块化加载的依赖引入） 
define(['jquery', 'bootstrap', 'backend', 'form'], function ($, undefined, Backend, Form) {

});

上面说我们一般用的是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中的选择键值配置组件

除了上面的表单组件可以快速生成表单元素，还有其他快速生成的方式：

如:图片上传：

<div class="form-group">
    <label for="c-avatar" class="control-label col-xs-12 col-sm-2">头像:</label>
    <div class="col-xs-12 col-sm-8">
        <div class="input-group">
            <input id="c-avatar" data-rule="" class="form-control" size="50" name="avatar" type="text" value="img/101010.jpg">
            <div class="input-group-addon no-border no-padding">
                <span><button type="button" id="plupload-avatar" class="btn btn-danger plupload" data-input-id="c-avatar" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-avatar"><i class="fa fa-upload"></i> 上传</button></span>
                <span><button type="button" id="fachoose-avatar" class="btn btn-primary fachoose" data-input-id="c-avatar" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> 选择</button></span>
            </div>
            <span class="msg-box n-right" for="c-avatar"></span>
        </div>
        <ul class="row list-inline plupload-preview" id="p-avatar"></ul>
    </div>
</div>
//无需表单事件？

View Code

该表单事件定义在require.form.js

变量、方法：

Form.config.fieldlisttpl

方法：（！为Form.api.bindevent("form[role=form]");总事件对象调用的）

events：

Form.events.validator ! 渲染并绑定form中的表单验证

Form.events.selectpicker !下拉列表（友好）非多选

Form.events.selectpage ! 渲染并绑定form中的Selectpage组件

Form.events.cxselect ! 联动

Form.events.citypicker ! 渲染并绑定form中的城市选择组件

Form.events.datetimepicker ! 渲染并绑定form中的日期时间组件

Form.events.daterangepicker

Form.events.plupload ! 渲染并绑定form中的上传组件

Form.events.faselect ! 渲染并绑定form中的选择附件组件

Form.events.fieldlist ! 渲染并绑定form中的选择键值配置组件

Form.events.switcher ! 开关组件

Form.events.bindevent !

api

Form.api.submit

Form.api.bindevent

Form.api.custom={}//表单自定义事件存储对象

Form.api.bindevent("form[role=form]");
包含了：Form.events下的这些事件

  events.bindevent(form);

                events.validator(form, success, error, submit);

                events.selectpicker(form);

                events.daterangepicker(form);

                events.selectpage(form);

                events.cxselect(form);

                events.citypicker(form);

                events.datetimepicker(form);

                events.plupload(form);

                events.faselect(form);

                events.fieldlist(form);

                events.switcher(form);

View Code