一张图解析 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