解决fastadmin selectpage下拉框遮顶问题

最新推荐文章于 2025-07-04 11:56:37 发布

tcyu_01

最新推荐文章于 2025-07-04 11:56:37 发布

阅读量509

点赞数

CC 4.0 BY-SA版权

分类专栏： fastadmin 文章标签： javascript php jquery

本文链接：https://blog.csdn.net/tcyu_01/article/details/112987359

fastadmin 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何修复FastAdmin框架中selectpage组件的下拉框显示异常，导致遮挡上方内容的问题。关键步骤是修改selectpage.js文件，在openup函数内添加条件判断，动态调整下拉框的位置，避免遮挡，并展示了具体的代码实现。

解决fastadmin selectpage下拉框遮顶问题

找到fastadmin-selectpage/selectpage.js文件，open up中添加一个判断语句
在这里插入图片描述
为了方便复制，将代码贴出来

if (top < 0){
     // top = '100'
     top = offset.top + (p.multiple ? el.container.outerHeight() : inputHeight);
     el.result_area.removeClass('shadowUp shadowDown').addClass('shadowDown');
     top += dist;
 }

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

tcyu_01

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

fastadmin selectpage下拉框多字段显示

05-25

1502

后台selectpage返回值添加字段 $result = [ $primarykey => isset($item[$primarykey]) ? $item[$primarykey] : '', $field => isset($item[$field]) ? $item[$field] : '', 'money' => isset($item['money']) ? $item['money'] : ''//添加的字段 ]; js添加,在需要添加的页面添加方法就行

fastadmin多级联动下拉框的使用（selectpicker，cxselect，selectpage的使用）

向宇

03-22

6313

fastadmin多级联动下拉框的使用（s 更多使用查看官方文档：https://doc.fastadmin.net/doc/182.html php代码 public function _initialize() { parent::_initialize(); $statusList = [ '0' => __('Status 0'), '1' => __('Status 1'), '2' => __('Status 2'),

参与评论您还未登录，请先登录后发表或查看评论

【若依】表格最后一行数据的按钮下拉列表被遮挡 & bootstrap上拉列表 & bootstrap获取数据条数

hanne_lovegood的博客

08-15

3532

Bootstrap有提供上拉菜单，在div 元素上加 dropup 类，可以改为上拉菜单。只要知道总行数，再获取到最后一行，让其下拉列表变成上拉，就不会被遮挡了。

JS版常见问题(一)层遇到select框时?

阿信的专栏

06-19

2588

当层遇到下拉框时总是挡不了select框?其实这是IE的BUG,其它的浏览器没有这个问题,对于这个问题论坛里不少提出,在这里提供我的几种方法,各有各的好处,有错,有好的意见者提出,谢谢.1.最直接的方法:隐藏下拉框.下面提供的是一个比较通用的一组函数:test.htm------------var HideElementTemp = new Array();//点击菜单时，调用

fastadmin中，selectpage 的全部参数有哪些？

写写代码

05-02

1840

除以上列出的常用参数外，还有一些其他的参数，如语言、匹配器、数据去重等，可根据具体需求进行配置。

巧用jquery解决下拉菜单被Div遮挡的相关问题

10-26

本篇文章主要是对巧用jquery解决下拉菜单被Div遮挡的相关问题进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助

导航下拉菜单被遮住或显示不全问题所在和解决办法

w36680130的博客

08-28

534

导航下拉菜单被遮住或显示不全问题所在和解决办法

selectpage,fastadmin下拉框搜索

05-26

2181

复制方法根据备注修改增加编辑selectpage没有作用，直接手写方法查找数据库，关联弃用$this->selectpage 某些地方需要根据自己对应表和值更改数据，有问题看备注，可以评论咨询 /** * selectpage自定义搜索,显示,用于页面编辑和增加页面展示调用方法 */ public function get_pid(){ $userRelationModel = new \app\common\model\UserRelation();//

FastAdmin关联字段下拉框无法显示解决方案

qq_46040294的博客

07-20

3532

问题描述： fastadmin关联表时下拉框不显示数据，打开F12报以下错误： SQLSTATE[42S22]: Column not found: 1054 Unknown column 'name' in 'order clause' 代码如下： <div class="form-group"> <label class="control-label col-xs-12 col-sm-2">{:__('News_list_id')}:</label> &l

fastadmin实现关联查询并用两种办法给明细搜索框绑定selectpage下拉事件

向宇

03-17

2444

fastadm /application/admin/model/info/User.php模型关联表，绑定字段 use app\admin\model\Admin; public function admin() { return $this->belongsTo(Admin::class, 'admin_id')->setEagerlyType(0)->bind('username'); } 绑字段也可以关联查询时绑定 $list = $this->model

fastadmin实现selectpage下拉列表拼接两个数据库字段数据

weixin_46001736的博客

12-30

2060

fastadmin实现selectpage下拉列表拼接两个数据库字段数据

FastAdmin 动态下拉(SelectPage)的使用

巴啦啦臭魔仙的博客

01-07

7228

其中，data-source 为数据源 URL。

fastadmin 里面的selectpage见解

奥特曼想做个好人的博客

02-03

2099

data-search-field=“nickname” — 搜索字段 data-source 提供数据源的URL地址或JSON数据 data-source=“category/index” data-field 列表显示读取的字段 data-field=“username” data-primary-key 列表选中后渲染的字段 data-primary-key=“uid” data-pagination 是否开启分页 data-pagination=“true” data-page-size 分页大小

解决fastadmin增加页面和编辑页面下拉框不显示问题

一只胡萝卜

07-31

1万+

如题，在使用fastadmin生成的add.html和edit.html文件中，下拉框的内容不显示，在文档中组件–》动态下拉列表中有说明，需要添加属性来支持 1.add.html <div class="form-group"> <label class="control-label col-xs-12 col-sm-2">{:__('Class_id'...

FastAdmin踩坑与解决记录（不定时更新）

最新发布

gooier的博客

07-04

564

FastAdmin 框架中 SelectPage 组件的多表关联查询优化方案针对 FastAdmin 框架中 SelectPage 组件在多表关联查询时存在的字段限制和信息展示不足问题，本文提出了创新解决方案：通过重构数据处理逻辑解除字段返回限制，支持全字段返回和任意表关联前端采用灵活的数据格式配置，实现多维度字段组合展示新增智能空选项机制防止误操作优化后显著提升了数据检索的完整性和可读性。通过修改 Backend 控制器中的 joinSelectPage

fastadmin selectpage返回树状结构数据

04-22

### FastAdmin SelectPage 返回树状结构数据格式与用法在 FastAdmin 中，`SelectPage` 是一种常见的用于前端页面选择器的数据接口设计方式。为了实现 `SelectPage` 返回树状结构数据的功能，可以按照以下方式进行处理。 #### 数据格式示例当需要返回树状结构数据时，通常会遵循 JSON 格式的嵌套对象表示方法。下面是一个典型的树状结构数据格式： ```json [ { "id": 1, "title": "父节点 1", "children": [ { "id": 2, "title": "子节点 1-1" }, { "id": 3, "title": "子节点 1-2" } ] }, { "id": 4, "title": "父节点 2", "children": [] } ] ``` 这种数据格式可以通过修改后台 API 接口逻辑来支持 `SelectPage` 的需求[^1]。 #### 后台接口实现在 FastAdmin 的控制器中，通过自定义查询逻辑并调整返回数据的结构即可满足需求。具体实现如下所示： ```php public function selectpage() { $model = new \app\admin\model\YourModel(); // 替换为实际模型名称 $list = $model->where($this->selectpageWhere)->order('id asc')->select(); // 构建树形结构 $treeList = []; foreach ($list as &$item) { $item['value'] = $item['id']; // 设置 value 字段供前端使用 $item['label'] = $item['title']; // 设置 label 字段供前端显示 unset($item['id'], $item['title']); // 移除多余字段 } // 使用 fastadmin 提供的 tree 方法构建树形结构 $treeList = Tree::instance()->init($list, 'value', 'parent_id', 'children')->getTreeArray(0); return json(['code' => 0, 'data' => $treeList]); } ``` 上述代码实现了以下几个功能： 1. 查询符合条件的数据列表。 2. 将原始数据转换成适合前端使用的 `value-label` 结构。 3. 利用 `Tree` 类库生成树形结构数组。 #### 前端调用示例在前端页面中，可以直接通过 `api/selectpage` 接口获取到树状结构数据，并将其绑定至下拉框或其他组件上。例如，在 Vue.js 或其他框架中可这样使用： ```html <el-cascader v-model="selectedValue" :options="treeData" clearable></el-cascader> ``` ```javascript export default { data() { return { selectedValue: [], treeData: [] // 存储树状结构数据 }; }, created() { this.fetchTreeData(); }, methods: { fetchTreeData() { axios.get('/api/selectpage').then(response => { if (response.data.code === 0) { this.treeData = response.data.data; } }); } } }; ``` 以上代码展示了如何从前端发起请求并将返回的树状结构数据显示出来[^1]。 --- ###