一张图解析 FastAdmin 中的表格列表

前言

该图片取自 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