[TOC] #### 前言 ---  该图片取自 fastadmin 问答区: [https://ask.fastadmin.net/article/323.html](https://ask.fastadmin.net/article/323.html) ```javascript // 初始化表格 table.bootstrapTable({ // 禁止双击打开编辑页面 dblClickToEdit: false, // 关闭快速搜索 search: false, // 关闭浏览模式 showToggle: false, // 关闭自定义显示列 showColumns: false, // 关闭导出功能 showExport: false, // 关闭通用搜索 commonSearch: false, }) ``` #### 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` 表示禁用该字段的通用搜索 ```javascript 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%"]` 属性即可 ```html <a href="javascript:;" class="btn btn-success btn-add" data-area='["100%","100%"]'> <i class="fa fa-plus"></i> {:__('Add')} </a> ``` 如果想要自定义按钮并添加事件，我们需要在视图中添加相应的 HTML 代码，然后在对应的 JS 文件中添加按钮的执行事件 增加自定义按钮后应在 `权限管理-菜单规则` 中添加该按钮的权限 ```html <a href="javascript:;" class="btn btn-success btn-test"> <i class="fa fa-plus"></i>导出 </a> ``` ```javascript var Controller = { // ... } $('.btn-test').click(function () { console.log('btn-test 被点击了..'); }) ``` 工具栏按钮是写在 html 文件中的，要想隐藏按钮，注释掉即可  #### 5. 动态渲染统计信息 --- 有些时候需要在页面额外显示服务端传回的动态数据，比如: 数据合计。修改 `index.html` 视图 (一般放在工具栏) ```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` 性指定搜索字段 ```javascript // 自定义快速搜索文本框中的 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` ```javascript table.bootstrapTable({ // 关闭浏览模式切换 showToggle: false, // 关闭自定义显示列切换 showColumns: false, // 关闭导出功能 showExport: false, // basic 导出当前页数据 selected 导出选中的行 exportDataType: 'basic', // 关闭通用搜索功能 commonSearch: false, columns: [[ // visible: false 字段列默认隐藏 // operate: false 字段列不参与通用搜索 { field: 'name', title: __('Name'), visible: false, operate: false } ]] }) ``` #### 9. 复选框 --- 一键生成菜单的视图文件默认都有复选框，不需要复选框删除 js 中 columns 属性的 `{ checkbox: true }` 即可 ``` table.bootstrapTable({ // 启用跨页选择 maintainSelected: true, columns: [[ // 不需要复选框时移除下面代码即可 { checkbox: true }, ]] }) ``` #### 10. 分类名称(关联查询) --- ``` protected $relationSearch = true; // 关联查询 ``` #### 11. 标志 --- ``` table.bootstrapTable({ columns: [[ { field: 'index', title: '标志', // 渲染标志字段 formatter: Table.api.formatter.flag, // 扩展额外的颜色 custom: { aaa: 'info', bbb: 'danger' } }, ]] }) ``` #### 12. 图片和图片组 --- ``` // formatter: Table.api.formatter.image 支持的数据值 https://img.itqaq.com/7b275c.png // formatter: Table.api.formatter.images 支持以下两种数据值 // https://img.itqaq.com/7b275c.png,https://img.itqaq.com/bdab5.png 字符串 // ["https://img.itqaq.com/7b275c.png", "https://img.itqaq.com/bdab5.png"] 图片数组 ``` ```javascript table.bootstrapTable({ columns: [[ { field: 'img', title: '图片', formatter: Table.api.formatter.image }, { field: 'imgs', title: '图片组', formatter: Table.api.formatter.images }, ]] }) ``` #### 13. 开关 --- ```javascript table.bootstrapTable({ columns: [[ { field: 'status', title: '状态', // formatter:Table.api.formatter.toggle 生成开关组件 // yes、no 自定义开和关对应的值 formatter: Table.api.formatter.toggle, yes: 'open', no: 'close', } ]] }) ``` #### 14. 状态渲染 --- ```javascript table.bootstrapTable({ columns: [[ { field: 'status', title: '状态', // 开启状态渲染 formatter: Table.api.formatter.status, // 扩展值显示颜色 custom: { rejected: 'danger', agreed: 'success' } } ]] }) ``` #### 15. 自定义按钮 --- ``` table.bootstrapTable({ columns: [[ { field: 'buttons', width: "120px", title: __('按钮组'), table: table, events: Table.api.events.operate, // 自定义按钮 formatter: Table.api.formatter.buttons, buttons: [] } ]] }) ```