在 FastAdmin 框架中,表格的排列顺序主要依据以下规则和配置决定,结合前端交互与后端逻辑实现动态排序: 一、默认排序规则二、用户交互排序- 表头点击排序
- 列配置需添加 sortable: true 属性以启用排序:javascript
| columns: [[ |
| { field: 'id', title: 'ID', sortable: true }, |
| { field: 'name', title: '名称' } |
| ]] |
- 用户点击表头时,前端发送排序请求(如 sort=id&order=desc),后端根据参数执行数据库查询:php
| // 控制器中处理排序逻辑 |
| $sort = $this->request->get('sort', 'id'); |
| $order = $this->request->get('order', 'desc'); |
| $list = Db::name('table')->order($sort, $order)->select(); |
- 拖拽排序
通过 Ajax 与后端交互实现实时排序:
- 前端配置拖拽事件:javascript
| Table.api.init({ |
| dragsort_url: 'ajax/weigh' // 拖拽排序接口 |
| }); |
- 后端更新排序字段(如 sort):php
| public function sort() { |
| $ids = explode(',', $this->request->post('ids')); |
| $field = 'sort'; // 自定义排序字段 |
| foreach ($ids as $k => $id) { |
| Db::name('table')->where('id', $id)->update([$field => $k + 1]); |
| } |
| $this->success(); |
| } |
三、自定义排序逻辑四、排序规则总结
[td]场景 | 依据 | 配置位置 | 默认加载 | id 降序或 weigh 字段 | 前端 JS 初始化参数 | 用户点击表头 | 列配置的 sortable: true | 前端列定义 + 后端查询 | 拖拽排序 | 自定义排序字段(如 sort) | 前端事件 + 后端 Ajax | 特殊需求 | 手动指定排序字段和顺序 | 后端控制器强制排序 |
通过灵活配置前后端逻辑,FastAdmin 可实现从简单表头点击到复杂拖拽排序的多样化需求。
|