前言

該圖片取自 fastadmin 問答區(qū): https://ask.fastadmin.net/article/323.html

// 初始化表格
table.bootstrapTable({
    // 禁止雙擊打開編輯頁面
    dblClickToEdit: false,
    // 關閉快速搜索
    search: false,
    // 關閉瀏覽模式
    showToggle: false,
    // 關閉自定義顯示列
    showColumns: false,
    // 關閉導出功能
    showExport: false,
    // 關閉通用搜索
    commonSearch: false,
})

1. 菜單名稱和描述

默認生成的 CRUD

當一鍵生成 CRUD 時, fastadmin 會自動創(chuàng)建表的控制器, 并將表注釋作為控制器類的文檔注釋存放在文件中

php think crud -t test

一鍵生成菜單時，將自動取控制器類的文檔注釋作為菜單的名稱

在后臺 權限管理-菜單規(guī)則 中修改菜單的備注，填寫備注后菜單名稱和描述區(qū)域將自動顯示

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. 通用搜索

通用搜索表單內(nèi)容是根據(jù) table.bootstrapTable 配置的 columns 屬性決定的。如果要刪除某一列的搜索，在 js 中配置 operate:false 即可，operate 用于查詢時的操作符，默認為 =，修改為 false 表示禁用該字段的通用搜索

table.bootstrapTable({
    // 關閉通用搜索
    commonSearch: false,
    // 通用搜索表單默認顯示
    searchFormVisible: true,
    columns: [[
        // operate: false 字段列不參與通用搜索
        { field: 'img', title: '圖片', operate: false },
        // searchList 將通用搜索中的狀態(tài)修改為下拉選擇框
        {
            field: 'status', title: '狀態(tài)',
            searchList: { 1: __('Open'), 0: __('Close') }
        }
    ]]
})

4. 工具欄按鈕

一鍵生成菜單時會自動生成 添加、編輯、刪除、更多按鈕的 HTML，這些按鈕會根據(jù)用戶是否擁有的權限來決定顯示或隱藏

我們可在控制器對應的視圖文件 index.html 中任意添加、刪除、修改對應的按鈕，這幾個自動生成的按鈕都通過擁有的 class 屬性來綁定相關的事件，例如添加按鈕擁有 btn-add 這個 class，框架已經(jīng)占有的 class 如下所示:

btn-add: 添加按鈕
btn-edit: 編輯按鈕
btn-del: 刪除按鈕
btn-import: 導入按鈕
btn-more: 更多按鈕
btn-multi: 指操作使用
btn-disabled: 添加此 class 后則只有在列表有選中數(shù)據(jù)時按鈕才會變?yōu)榭墒褂?

如果想要點擊 添加按鈕 默認全屏，那么給添加按鈕加上 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 文件中添加按鈕的執(zhí)行事件

增加自定義按鈕后應在 權限管理-菜單規(guī)則 中添加該按鈕的權限

<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 被點擊了..');
})

工具欄按鈕是寫在 html 文件中的，要想隱藏按鈕，注釋掉即可

5. 動態(tài)渲染統(tǒng)計信息

有些時候需要在頁面額外顯示服務端傳回的動態(tài)數(shù)據(jù)，比如: 數(shù)據(jù)合計。修改 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 是表格數(shù)據(jù)接口的返回值

// 當表格數(shù)據(jù)加載完成時
table.on('load-success.bs.table', function (e, data) {
    // 這里可以獲取從服務端獲取的JSON數(shù)據(jù)
    console.log(data);
    // 這里我們手動設置底部的值
    $("#money").text(data.extend.money);
    $("#price").text(data.extend.price);
});

6. 快速搜索

快速搜索查詢條件: where 字段 like '%關鍵詞%'

快速搜索在鍵入關鍵詞時將實時從服務端搜索數(shù)據(jù)，當數(shù)據(jù)表數(shù)據(jù)較大時，建議關閉此功能（在表格初始化時關閉）

默認只會搜索主鍵id這個字段，如果需要搜索其它字段，則需要在控制器中定義 $searchFields 性指定搜索字段

// 自定義快速搜索文本框中的 placeholder, 必須在 table.bootstrapTable() 前定義
$.fn.bootstrapTable.locales[Table.defaults.locale]['formatSearch'] = function () {
    return "自定義placeholder文本"
};
// 表格初始化
table.bootstrapTable({
    // 關閉快速搜索
    search: false,
})

如果使用了關聯(lián)查詢，此時快速搜索默認的根據(jù) id 查詢會報錯

// 關聯(lián)查詢
with(["admin"])
// 快速搜索報錯
SQLSTATE[23000]: Integrity constraint violation: 1052 Column 'id' in where clause is ambiguous

定義屬性指定查找的字段，字段前面帶上表名前綴即可

// 快速搜索時執(zhí)行查找的字段(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 導出當前頁數(shù)據(jù) 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. 分類名稱(關聯(lián)查詢)

protected $relationSearch = true; // 關聯(lián)查詢

11. 標志

table.bootstrapTable({
    columns: [[
        {
            field: 'index', title: '標志',
            // 渲染標志字段
            formatter: Table.api.formatter.flag,
            // 擴展額外的顏色
            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ù)組

table.bootstrapTable({
    columns: [[
        { field: 'img', title: '圖片', formatter: Table.api.formatter.image },
        { field: 'imgs', title: '圖片組', formatter: Table.api.formatter.images },
    ]]
})

13. 開關

table.bootstrapTable({
    columns: [[
        {
            field: 'status', title: '狀態(tài)',
            // formatter:Table.api.formatter.toggle 生成開關組件
            // yes、no 自定義開和關對應的值
            formatter: Table.api.formatter.toggle, yes: 'open', no: 'close',
        }
    ]]
})

14. 狀態(tài)渲染

table.bootstrapTable({
    columns: [[
        {
            field: 'status', title: '狀態(tài)',
            // 開啟狀態(tài)渲染
            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: []
        }
    ]]
})