一张图解析 FastAdmin 中的表格列表
一张图解析 FastAdmin 中的表格列表
前言
该图片取自 fastadmin 问答区: https://ask.fastadmin.net/article/323.html
1. 菜单名称和描述
默认生成的 CRUD
当一键生成 CRUD 时, fastadmin 会自动创建表的控制器, 并将表注释作为控制器类的文档注释存放在文件中
php think crud -t test一键生成菜单时，将自动取控制器类的文档注释作为菜单的名称
在后台 权限管理-菜单规则 中修改菜单的备注，填写备注后菜单名称和描述区域将自动显示
php think menu -c test2. TAB 过滤选项卡
在一键生成 CRUD 时，表中如果存在 status 字段且为 enum 类型，则会生成相应的 TAB 过滤选项卡
php think crud -t test如果需要生成其它字段的过滤选项卡，则可以在一键生成 CRUD时使用 --headingfilterfield=字段名
dingfilterfield=字段名
php think crud -t test --headingfilterfield=state3. 通用搜索
通用搜索表单内容是根据 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腾讯云开发者
