[TOC] #### 前言 ---  該圖片取自 fastadmin 問(wèn)答區(qū): [https://ask.fastadmin.net/article/323.html](https://ask.fastadmin.net/article/323.html) ```javascript // 初始化表格 table.bootstrapTable({ // 禁止雙擊打開(kāi)編輯頁(yè)面 dblClickToEdit: false, // 關(guān)閉快速搜索 search: false, // 關(guān)閉瀏覽模式 showToggle: false, // 關(guān)閉自定義顯示列 showColumns: false, // 關(guān)閉導(dǎo)出功能 showExport: false, // 關(guān)閉通用搜索 commonSearch: false, }) ``` #### 1. 菜單名稱和描述 --- 默認(rèn)生成的 CRUD 當(dāng)一鍵生成 CRUD 時(shí), fastadmin 會(huì)自動(dòng)創(chuàng)建表的控制器, 并將表注釋作為控制器類的文檔注釋存放在文件中 ``` php think crud -t test ``` 一鍵生成菜單時(shí)，將自動(dòng)取控制器類的文檔注釋作為菜單的名稱 在后臺(tái) `權(quán)限管理-菜單規(guī)則` 中修改菜單的備注，填寫備注后菜單名稱和描述區(qū)域?qū)⒆詣?dòng)顯示 ``` php think menu -c test ``` #### 2. TAB 過(guò)濾選項(xiàng)卡 --- 在一鍵生成 CRUD 時(shí)，表中如果存在 status 字段且為 `enum` 類型，則會(huì)生成相應(yīng)的 TAB 過(guò)濾選項(xiàng)卡 ``` php think crud -t test ``` 如果需要生成其它字段的過(guò)濾選項(xiàng)卡，則可以在一鍵生成 CRUD時(shí)使用 `--headingfilterfield=字段名` ``` php think crud -t test --headingfilterfield=state ``` #### 3. 通用搜索 --- 通用搜索表單內(nèi)容是根據(jù) `table.bootstrapTable` 配置的 `columns` 屬性決定的。如果要?jiǎng)h除某一列的搜索，在 js 中配置 `operate:false` 即可，operate 用于查詢時(shí)的操作符，默認(rèn)為 `=`，修改為 `false` 表示禁用該字段的通用搜索 ```javascript table.bootstrapTable({ // 關(guān)閉通用搜索 commonSearch: false, // 通用搜索表單默認(rèn)顯示 searchFormVisible: true, columns: [[ // operate: false 字段列不參與通用搜索 { field: 'img', title: '圖片', operate: false }, // searchList 將通用搜索中的狀態(tài)修改為下拉選擇框 { field: 'status', title: '狀態(tài)', searchList: { 1: __('Open'), 0: __('Close') } } ]] }) ``` #### 4. 工具欄按鈕 --- 一鍵生成菜單時(shí)會(huì)自動(dòng)生成 添加、編輯、刪除、更多按鈕的 HTML，這些按鈕會(huì)根據(jù)用戶是否擁有的權(quán)限來(lái)決定顯示或隱藏 我們可在控制器對(duì)應(yīng)的視圖文件 `index.html` 中任意添加、刪除、修改對(duì)應(yīng)的按鈕，這幾個(gè)自動(dòng)生成的按鈕都通過(guò)擁有的 `class` 屬性來(lái)綁定相關(guān)的事件，例如添加按鈕擁有 `btn-add` 這個(gè) class，框架已經(jīng)占有的 class 如下所示: ``` btn-add: 添加按鈕 btn-edit: 編輯按鈕 btn-del: 刪除按鈕 btn-import: 導(dǎo)入按鈕 btn-more: 更多按鈕 btn-multi: 指操作使用 btn-disabled: 添加此 class 后則只有在列表有選中數(shù)據(jù)時(shí)按鈕才會(huì)變?yōu)榭墒褂?``` 如果想要點(diǎn)擊 `添加按鈕` 默認(rèn)全屏，那么給添加按鈕加上 `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> ``` 如果想要自定義按鈕并添加事件，我們需要在視圖中添加相應(yīng)的 HTML 代碼，然后在對(duì)應(yīng)的 JS 文件中添加按鈕的執(zhí)行事件 增加自定義按鈕后應(yīng)在 `權(quán)限管理-菜單規(guī)則` 中添加該按鈕的權(quán)限 ```html <a href="javascript:;" class="btn btn-success btn-test"> <i class="fa fa-plus"></i>導(dǎo)出 </a> ``` ```javascript var Controller = { // ... } $('.btn-test').click(function () { console.log('btn-test 被點(diǎn)擊了..'); }) ``` 工具欄按鈕是寫在 html 文件中的，要想隱藏按鈕，注釋掉即可  #### 5. 動(dòng)態(tài)渲染統(tǒng)計(jì)信息 --- 有些時(shí)候需要在頁(yè)面額外顯示服務(wù)端傳回的動(dòng)態(tài)數(shù)據(jù)，比如: 數(shù)據(jù)合計(jì)。修改 `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> 單價(jià)：<span id="price">0</span> </span> </a> ``` 然后在控制器對(duì)應(yīng)的 JS 中的 index 方法中添加以下的 JS，data 是表格數(shù)據(jù)接口的返回值 ``` // 當(dāng)表格數(shù)據(jù)加載完成時(shí) table.on('load-success.bs.table', function (e, data) { // 這里可以獲取從服務(wù)端獲取的JSON數(shù)據(jù) console.log(data); // 這里我們手動(dòng)設(shè)置底部的值 $("#money").text(data.extend.money); $("#price").text(data.extend.price); }); ``` #### 6. 快速搜索 --- 快速搜索查詢條件: `where 字段 like '%關(guān)鍵詞%'` 快速搜索在鍵入關(guān)鍵詞時(shí)將實(shí)時(shí)從服務(wù)端搜索數(shù)據(jù)，當(dāng)數(shù)據(jù)表數(shù)據(jù)較大時(shí)，建議關(guān)閉此功能（在表格初始化時(shí)關(guān)閉） 默認(rèn)只會(huì)搜索主鍵id這個(gè)字段，如果需要搜索其它字段，則需要在控制器中定義 `$searchFields` 性指定搜索字段 ```javascript // 自定義快速搜索文本框中的 placeholder, 必須在 table.bootstrapTable() 前定義 $.fn.bootstrapTable.locales[Table.defaults.locale]['formatSearch'] = function () { return "自定義placeholder文本" }; // 表格初始化 table.bootstrapTable({ // 關(guān)閉快速搜索 search: false, }) ``` 如果使用了關(guān)聯(lián)查詢，此時(shí)快速搜索默認(rèn)的根據(jù) id 查詢會(huì)報(bào)錯(cuò) ``` // 關(guān)聯(lián)查詢 with(["admin"]) // 快速搜索報(bào)錯(cuò) SQLSTATE[23000]: Integrity constraint violation: 1052 Column 'id' in where clause is ambiguous ``` 定義屬性指定查找的字段，字段前面帶上表名前綴即可 ``` // 快速搜索時(shí)執(zhí)行查找的字段(user是當(dāng)前模型) protected $searchFields = ['user.id', 'admin.username']; ``` #### 7. 瀏覽模式、顯示隱藏列、導(dǎo)出、通用搜索 --- 瀏覽模式可以切換卡片視圖和表格視圖兩種模式，關(guān)閉此功能使用: `showToggle: false` 顯示隱藏列可以快速切換字段列的顯示和隱藏，關(guān)閉此功能使用: `showColumns: false` 導(dǎo)出按鈕默認(rèn)將導(dǎo)出整個(gè)表的所有行，關(guān)閉導(dǎo)出功能使用: `showExport: false` 通用搜索指表格上方的搜索，關(guān)閉此功能使用: `commonSearch: false` ```javascript table.bootstrapTable({ // 關(guān)閉瀏覽模式切換 showToggle: false, // 關(guān)閉自定義顯示列切換 showColumns: false, // 關(guān)閉導(dǎo)出功能 showExport: false, // basic 導(dǎo)出當(dāng)前頁(yè)數(shù)據(jù) selected 導(dǎo)出選中的行 exportDataType: 'basic', // 關(guān)閉通用搜索功能 commonSearch: false, columns: [[ // visible: false 字段列默認(rèn)隱藏 // operate: false 字段列不參與通用搜索 { field: 'name', title: __('Name'), visible: false, operate: false } ]] }) ``` #### 9. 復(fù)選框 --- 一鍵生成菜單的視圖文件默認(rèn)都有復(fù)選框，不需要復(fù)選框刪除 js 中 columns 屬性的 `{ checkbox: true }` 即可 ``` table.bootstrapTable({ // 啟用跨頁(yè)選擇 maintainSelected: true, columns: [[ // 不需要復(fù)選框時(shí)移除下面代碼即可 { checkbox: true }, ]] }) ``` #### 10. 分類名稱(關(guān)聯(lián)查詢) --- ``` protected $relationSearch = true; // 關(guān)聯(lián)查詢 ``` #### 11. 標(biāo)志 --- ``` table.bootstrapTable({ columns: [[ { field: 'index', title: '標(biāo)志', // 渲染標(biāo)志字段 formatter: Table.api.formatter.flag, // 擴(kuò)展額外的顏色 custom: { aaa: 'info', bbb: 'danger' } }, ]] }) ``` #### 12. 圖片和圖片組 --- ``` // formatter: Table.api.formatter.image 支持的數(shù)據(jù)值 https://img.itqaq.com/7b275c.png // formatter: Table.api.formatter.images 支持以下兩種數(shù)據(jù)值 // https://img.itqaq.com/7b275c.png,https://img.itqaq.com/bdab5.png 字符串 // ["https://img.itqaq.com/7b275c.png", "https://img.itqaq.com/bdab5.png"] 圖片數(shù)組 ``` ```javascript table.bootstrapTable({ columns: [[ { field: 'img', title: '圖片', formatter: Table.api.formatter.image }, { field: 'imgs', title: '圖片組', formatter: Table.api.formatter.images }, ]] }) ``` #### 13. 開(kāi)關(guān) --- ```javascript table.bootstrapTable({ columns: [[ { field: 'status', title: '狀態(tài)', // formatter:Table.api.formatter.toggle 生成開(kāi)關(guān)組件 // yes、no 自定義開(kāi)和關(guān)對(duì)應(yīng)的值 formatter: Table.api.formatter.toggle, yes: 'open', no: 'close', } ]] }) ``` #### 14. 狀態(tài)渲染 --- ```javascript table.bootstrapTable({ columns: [[ { field: 'status', title: '狀態(tài)', // 開(kāi)啟狀態(tài)渲染 formatter: Table.api.formatter.status, // 擴(kuò)展值顯示顏色 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: [] } ]] }) ```