一张图解析 FastAdmin 中的表格列表
前言
1. 菜单名称和描述
2. TAB 过滤选项卡
3. 通用搜索
4. 工具栏按钮
5. 动态渲染统计信息
6. 快速搜索
7. 浏览模式、显示隐藏列、导出、通用搜索
9. 复选框
10. 分类名称(关联查询)
11. 标志
12. 图片和图片组
13. 开关
14. 状态渲染
15. 自定义按钮
前言
该图片取自 fastadmin 问答区: https://ask.fastadmin.net/article/323.html
1. 菜单名称和描述
默认生成的 CRUD
当一键生成 CRUD 时, fastadmin 会自动创建表的控制器, 并将表注释作为控制器类的文档注释存放在文件中
php think crud -t test
一键生成菜单时,将自动取控制器类的文档注释作为菜单的名称
在后台 权限管理-菜单规则
中修改菜单的备注,填写备注后菜单名称和描述区域将自动显示
php think menu -c test
2. TAB 过滤选项卡
在一键生成 CRUD 时,表中如果存在 status 字段且为 enum
类型,则会生成相应的 TAB 过滤选项卡
php think crud -t test
如果需要生成其它字段的过滤选项卡,则可以在一键生成 CRUD时使用 --headingfilterfield=字段名
php think crud -t test --headingfilterfield=state
3. 通用搜索
通用搜索表单内容是根据 table.bootstrapTable
配置的 columns
属性决定的。如果要删除某一列的搜索,在 js 中配置 operate:false
即可,operate 用于查询时的操作符,默认为 =
,修改为 false
表示禁用该字段的通用搜索
table.bootstrapTable({ // 关闭通用搜索 commonSearch: false, // 通用搜索表单默认显示 searchFormVisible: true, columns: [[ // operate: false 字段列不参与通用搜索 { field: 'img', title: '图片', operate: false }, // searchList 将通用搜索中的状态修改为下拉选择框 { field: 'status', title: '状态', searchList: { 1: __('Open'), 0: __('Close') } } ]]})
4. 工具栏按钮
一键生成菜单时会自动生成 添加、编辑、删除、更多按钮的 HTML,这些按钮会根据用户是否拥有的权限来决定显示或隐藏
我们可在控制器对应的视图文件 index.html
中任意添加、删除、修改对应的按钮,这几个自动生成的按钮都通过拥有的 class
属性来绑定相关的事件,例如添加按钮拥有 btn-add
这个 class,框架已经占有的 class 如下所示:
btn-add: 添加按钮btn-edit: 编辑按钮btn-del: 删除按钮btn-import: 导入按钮btn-more: 更多按钮btn-multi: 指操作使用btn-disabled: 添加此 class 后则只有在列表有选中数据时按钮才会变为可使用
如果想要点击 添加按钮
默认全屏,那么给添加按钮加上 data-area='["100%","100%"]
属性即可
<a href="javascript:;" class="btn btn-success btn-add" data-area='["100%","100%"]'> <i class="fa fa-plus"></i> {:__('Add')}</a>
如果想要自定义按钮并添加事件,我们需要在视图中添加相应的 HTML 代码,然后在对应的 JS 文件中添加按钮的执行事件
增加自定义按钮后应在 权限管理-菜单规则
中添加该按钮的权限
<a href="javascript:;" class="btn btn-success btn-test"> <i class="fa fa-plus"></i>导出</a>
var Controller = { // ...}$('.btn-test').click(function () { console.log('btn-test 被点击了..');})
5. 动态渲染统计信息
有些时候需要在页面额外显示服务端传回的动态数据,比如: 数据合计。修改 index.html
视图 (一般放在工具栏)
<a href="javascript:;" class="btn btn-default" style="font-size:14px;color:dodgerblue;"> <i class="fa fa-dollar"></i> <span class="extend"> 金额:<span id="money">0</span> 单价:<span id="price">0</span> </span></a>
然后在控制器对应的 JS 中的 index 方法中添加以下的 JS,data 是表格数据接口的返回值
// 当表格数据加载完成时table.on('load-success.bs.table', function (e, data) { // 这里可以获取从服务端获取的JSON数据 console.log(data); // 这里我们手动设置底部的值 $("#money").text(data.extend.money); $("#price").text(data.extend.price);});
6. 快速搜索
快速搜索查询条件: where 字段 like '%关键词%'
快速搜索在键入关键词时将实时从服务端搜索数据,当数据表数据较大时,建议关闭此功能(在表格初始化时关闭)
默认只会搜索主键id这个字段,如果需要搜索其它字段,则需要在控制器中定义 $searchFields
性指定搜索字段
// 自定义快速搜索文本框中的 placeholder, 必须在 table.bootstrapTable() 前定义$.fn.bootstrapTable.locales[Table.defaults.locale]['formatSearch'] = function () { return "自定义placeholder文本"};// 表格初始化table.bootstrapTable({ // 关闭快速搜索 search: false,})
如果使用了关联查询,此时快速搜索默认的根据 id 查询会报错
// 关联查询with(["admin"])// 快速搜索报错SQLSTATE[23000]: Integrity constraint violation: 1052 Column 'id' in where clause is ambiguous
定义属性指定查找的字段,字段前面带上表名前缀即可
// 快速搜索时执行查找的字段(user是当前模型)protected $searchFields = ['user.id', 'admin.username'];
7. 浏览模式、显示隐藏列、导出、通用搜索
浏览模式可以切换卡片视图和表格视图两种模式,关闭此功能使用: showToggle: false
显示隐藏列可以快速切换字段列的显示和隐藏,关闭此功能使用: showColumns: false
导出按钮默认将导出整个表的所有行,关闭导出功能使用: showExport: false
通用搜索指表格上方的搜索,关闭此功能使用: commonSearch: false
table.bootstrapTable({ // 关闭浏览模式切换 showToggle: false, // 关闭自定义显示列切换 showColumns: false, // 关闭导出功能 showExport: false, // basic 导出当前页数据 selected 导出选中的行 exportDataType: 'basic', // 关闭通用搜索功能 commonSearch: false, columns: [[ // visible: false 字段列默认隐藏 <span cla更新于:18天前
相关文章
- 【说站】python列表追加元素出错的解决
- fastadmin 动态下拉组件 SelectPage
- .Net开源框架列表
- phpoffice/phpexcel 读取Excel表格数据
- phpoffice/phpexcel 导出Excel表格数据
- Vue指令之列表渲染
- Layui 数据表格重载
- Layui 数据表格方法渲染中的复杂表头简单使用示例
- 人人商城 V3.18.1 小程序端获取商品列表接口
- 使用 Python 删除大于特定值的列表元素
- 用于查找子列表总和的 Python 程序
- Python 数据类型详细篇:列表
- 如何使用 Python 检查两个列表是否反向相等?
- 使用Python按另一个列表对子列表进行分组
- 使用 Python 创建使用 for 循环的元组列表
- 大分类下显示子栏目列表并分页!
- 随自己的要求调用任何级别的栏目列表代码
- 实现列表页搜索功能
- 文章标题列表页的栏目标题实现隐藏的
- 列表页栏目样式风格代码