雷达智富

首页 > 内容 > 程序笔记 > 正文

程序笔记

fastadmin 动态下拉组件 SelectPage

2024-09-26 20
1. 前言2. 常规用法3. 常用属性4. 数据源

1. 前言


FastAdmin 中的动态下拉列表使用的是优秀强大的 Selectpage 插件,FastAdmin 对其进行了二次开发

这个插件适合用于下拉框数据较多时,比如: 发布文章时选择哪个用户发布的。并且支持下拉多选,非常实用

更多用法参考 FastAdmin 官方文档

2. 常规用法


基础用法: 给表单元素的 class 添加一个 selectpage,然后再添加一个 data-source 属性提供数据源

<input id="c-name" class="form-control selectpage" data-source="category/selectpage">

3. 常用属性


属性 功能
data-source 提供数据源的 URL 地址或 JSON 数据
data-field 自定义显示字段,默认为 name
data-primary-key 自定义主键字段,默认为 id
data-params 自定义扩展参数

4. 数据源


data-source 支持 Object远程URL 返回两种方式,如:

// Objectdata-source='[{"id":"1","name":"标题1"},{"id":"2","name":"标题2"}]'// 远程URLdata-source="category/selectpage"

当使用 远程URL 的方式时需要远程返回 JSON 数据,如:

// 其中 list 为数据列表, total 为总记录数,总记录数将用于前端显示分页使用{"list":[{"id":1,"name":"admin"},{"id":2,"name":"liang"}],"total":30}

Selectpage 列表中显示字段默认是 name,主键字段默认是 id

<!-- data-field 自定义显示字段、data-primary-key 自定义主键字段 --><input data-source="category/selectpage" data-field="title" data-primary-key="value">
更新于:18天前
赞一波!

文章评论

评论问答