fastadmin下的自定义组件使用

1、fastadmin中拥有的组件

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中的滑块组件

2、使用举例

动态下拉列表(SelectPage)

FastAdmin中的动态下拉列表使用的是优秀强大的Selectpage插件来支持，FastAdmin对其进行了二次开发。
下面介绍一个最基础的动态下拉列表示例，如下

                <div class="col-xs-12 col-sm-6 col-md-3">
                    <div class="form-group">
                        <label class="control-label">用户名</label>
                        <input type="hidden" class="operate" data-name="username" value="="/>
                        <div>
                            <input id="c-category_id" data-source="auth/admin/index" data-primary-key="username"
                                   data-field="username" class="form-control selectpage" name="username" type="text"
                                   value="" style="display:block;">
                        </div>
                    </div>
                </div>

 

1 、自动绑定。需要给class添加一个selectpage，因为后面会在中 require-form.js 中进行自动绑定（如下图），

当然我们可以自己进行一些自定义事件的绑定

2、 数据源。其次需要增加一个 data-source="auth/admin/index" 这个属性，auth/admin/index为我们控制器提交列表的方法，用来自动获取下拉的数据。

当然，如果不需要自动写入数据，可以自己写入。

3、显示字段。data-primary-key="username"  data-field="username"  name="username"

FastAdmin的Selectpage列表中显示字段默认读取的是name字段，如果我们返回的列表中不包含name字段，将无法展现下拉列表数据。此时我们需要添加使用data-field="你要显示的字段"即可。

FastAdmin的Selectpage列表中主键字段默认读取的是id字段，如果我们的主键不是id字段，则我们可以添加并使用data-primary-key="你的主键ID字段"来修改。

Selectpage所支持的扩展属性

属性	功能	示例
data-source	提供数据源的URL地址	data-source="category/index"
data-field	列表显示读取的字段	data-field="username"
data-primary-key	列表选中后渲染的字段	data-primary-key="uid"
data-pagination	是否开启分页	data-pagination="true"
data-page-size	分页大小	data-page-size="10"
data-multiple	是否支持多选	data-multiple="true"
data-max-select-limit	最多可选择数量	data-max-select-limit="3"
data-order-by	排序字段	data-order-by="id"
data-params	自定义扩展参数	data-params='{"custom[type]":"test"}'
data-select-only	是否为只读模式	data-select-only="true"

Selectpage的data-params支持function类型,如果需要动态传参(例如联动查询),则可以在JS中将data-params写为data-params="status=normal"或添加一个function处理即可
FastAdmin在生成CRUD时会对包含下划线的字段默认生成动态下拉列表，比如user_id将自动生成data-source="user/index"
默认读取的是id和name字段，如果需要修改，请参考上方的参数修改方法。

data-params自定义扩展参数支持使用function动态返回数据，请在表单初始化之前使用，例如传递动态选择的类型

$("#c-name").data("params", function (obj) {
    return {custom: {type: $("#c-type").val()}};
});