[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: [] } ]] }) ```