功能描述
請根據圖片上的數字索引查看對應功能說明。
1.菜單名稱和描述
默認生成的CRUD是沒有菜單名稱和描述顯示的,如果需要顯示則可以修改權限管理
->菜單規則
,給對應菜單的添加上備註信息後即可顯示,支持HTML
2.TAB過濾選項卡
在一鍵生成CRUD時,如果表中存在status字段且爲ENUM類型,則會生成相應的TAB過濾選項卡,如果需要生成其它字段的過濾選項卡則可以在使用php think crud
時使用--headingfilterfield=你的字段名稱
來指定字段
3.通用搜索
通用搜索的的內容是根據bootstrap-table
配置的字段columns
決定的,渲染的內容及格式由FastAdmin自動進行渲染,如果需要禁用或刪除某一選項,可以在JS中配置operate:false
來刪除通用搜索中的選項。例如通常情況下我們的在JS中進行字段的配置如下:
{field: 'createtime', title: __('Create Time')},
這裏默認是啓用的通用搜索,針對通用搜索,有以下幾個常用的配置:
operate:'=' //用於查詢時的操作符,默認爲=,爲false表示禁用此字段的通用搜索,支持!=、LIKE、NOT LIKE、>、<、>=<=、FIND_IN_SET、IN、NOT IN、BETWEEN、NOT BETWEEN、RANGE、NOT RANGE、NULL、NOT NULL、false
searchList: //用於渲染列表的數據,支持的格式有JSON Array、JSON Object、$.getJSON、Function
addclass: //用於給input或select添加額外的class屬性
type: //用於定義input文本框的類型,默認爲text
data: //用於給input或select添加額外的屬性
常用配置示例如下:
//時間區間搜索
{field: 'createtime', title: __('Createtime'), operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime},
//金額區間搜索
{field: 'money', title: __('Money'), operate: 'RANGE'},
//下拉列表搜索
{field: 'flag', title: __('Flag'), searchList: {"hot": __('Flag hot'), "index": __('Flag index'), "recommend": __('Flag recommend')}, operate: 'FIND_IN_SET', formatter: Table.api.formatter.label},
//動態下拉列表搜索
{field: 'type', title: __('Type'), searchList: $.getJSON("ajax/dynamicselect")},
//禁用通用搜索
{field: 'keywords', title: __('Keywords'), operate: false},
如果我們需要完全自定義我們的通用搜索欄,我們可以在配置bootstrap-table
時定義searchFormTemplate
選項來完全重寫我們的通用搜索欄,具體請參考開發示例插件
中的自定義搜索示例
4.工具欄按鈕
FastAdmin在一鍵CRUD時會自動生成添加、編輯、刪除、導入、更多按鈕的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代碼,然後在對應的JS文件中添加按鈕的執行事件,切記不可在視圖中直接編寫JS或jQuery代碼來綁定事件
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
//當表格數據加載完成時
table.on('load-success.bs.table', function (e, data) {
//這裏可以獲取從服務端獲取的JSON數據
console.log(data);
//這裏我們手動設置底部的值
$("#money").text(data.extend.money);
$("#price").text(data.extend.price);
});
注意務必將這段代碼添加在var table = $("#table");
之後
其中data.extend.money
和data.extend.price
就是我們在服務端動態返回的數據,如下
$result = array("total" => $total, "rows" => $list, "extend" => ['money' => 1024, 'price' => 888]);
return json($result);
通過以上配置即可動態顯示服務端返回的額外數據
6.快速搜索
快速搜索在鍵入關鍵詞時將實時從服務端搜索數據,如果你的數據表數據較大,建議關閉此功能,關閉的方法是使用search:false
,其次快速搜索默認只會搜索主鍵id
這個字段,如果你需要搜索其它字段,則需要在服務端你的控制器中定義$searchFields
這個值,如下
protected $searchFields = 'id,name,title';
這樣在快速搜索時將會搜索id,name,title
這三個字段。
如果需要修改默認文本框的placeholder
,可以在表格初始化前定義
$.fn.bootstrapTable.locales[Table.defaults.locale]['formatSearch'] = function(){return "自定義placeholder文本";};
7.瀏覽模式、顯示隱藏列、導出、通用搜索
瀏覽模式可以切換卡片視圖和表格視圖兩種模式,如果不需要此功能,可以設置showToggle: false
顯示隱藏列可以快速切換字段列的顯示和隱藏,如果不需要此功能,可以設置showColumns: false
,如果想要表格中的字段列默認隱藏可以設置字段屬性visible: false
即可默認隱藏
導出按鈕默認將導出整個表的所有行,如果需要僅導出當前分頁的數據,需要設置exportDataType: 'basic'
,如果想導出選中的行,則可以設置爲exportDataType: 'selected'
,如果不需要此功能,可以設置showExport: false
通用搜索指表格上方的搜索,通用搜索的表單默認是隱藏的,如果需要默認顯示,需要設置searchFormVisible: true
,如果不需要通用搜索功能,可以設置commonSearch: false
。如果想要控制字段列不參考搜索則可以設置字段列屬性爲operate: false
即可。
8.字段配置
默認字段的控制是根據控制器對應的JS來配置的,因此字段配置是通過JS,而在我們的視圖index.html
中是沒有任何字段配置的,通常我們的配置如下:
columns: [
[
{checkbox: true},
{field: 'id', title: __('Id')},
{field: 'admin_id', title: __('Admin_id')},
{field: 'category.name', title: __('分類名稱'), formatter:Table.api.formatter.search},
{field: 'category_id', title: __('Category_id'), visible: false},
{field: 'flag', title: __('Flag'), searchList: {"hot": __('Flag hot'), "index": __('Flag index'), "recommend": __('Flag recommend')}, operate: 'FIND_IN_SET', formatter: Table.api.formatter.label},
{field: 'genderdata', title: __('Genderdata'), searchList: {"male": __('Genderdata male'), "female": __('Genderdata female')}, formatter: Table.api.formatter.normal},
{field: 'title', title: __('Title')},
{field: 'image', title: __('Image'), formatter: Table.api.formatter.image},
{field: 'images', title: __('Images'), formatter: Table.api.formatter.images},
{field: 'createtime', title: __('Createtime'), operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime},
{field: 'updatetime', title: __('Updatetime'), operate: 'RANGE', addclass: 'datetimerange', formatter: Table.api.formatter.datetime, visible: false},
{field: 'weigh', title: __('Weigh'), operate: false, visible: false},
{field: 'switch', title: __('Switch'), searchList: {"1": __('Yes'), "0": __('No')}, formatter: Table.api.formatter.toggle},
{field: 'status', title: __('Status'), searchList: {"normal": __('Normal'), "hidden": __('Hidden')}, formatter: Table.api.formatter.status},
]
]
字段配置的參數有
checkbox:true, //是否爲首列複選框
field:'name' //字段名稱,如果啓用了關聯查詢這裏可以使用別名,比如:category.name,請注意服務端返回的字段一一對應,如果使用了一個不存在的字段,將不會渲染任何數據
title:'名稱' //字段標題,顯示於頭部的標題
operate:'=' //通用搜索的操作符,詳見上方通用搜索介紹
visible:false //字段是否可見,爲false時將默認不可見
formatter:Table.api.formatter.search //格式化顯示的內容,FastAdmin內部定義了許多通用的格式化方法
events: //定義元素響應的事件
searchList: //定義通用搜索下拉列表的數據
addclass: //通用搜索文本框或下拉列表的額外class
type: //通用搜索文本框的類型
data: //通用搜索文本框或下拉列表的額外屬性
FastAdmin封裝了許多常用的formatter方法,我們可以快速的調用即可。
> `Table.api.formatter.icon` 快速將字段渲染成一個按鈕,僅支持Fontawesome按鈕
> `Table.api.formatter.image` 快速將字段渲染成圖片展示的形式
> `Table.api.formatter.images` 快速將字段渲染成多圖片展示的形式,字段數據請以`,`進行分隔
> `Table.api.formatter.status` 快速將字段渲染成狀態,默認`normal/hidden/deleted/locked`這四個狀態
> `Table.api.formatter.url` 快速將字段渲染成URL框
> `Table.api.formatter.search` 快速將字段渲染成可搜索的鏈接,點擊後將執行搜索
> `Table.api.formatter.addtabs` 快速將字段渲染成可添加到選項卡的鏈接,點擊後將把鏈接添加到選項卡
> `Table.api.formatter.flag` 快速將字段渲染成標誌,僅支持`index/hot/recommend/new`這四種標誌
> `Table.api.formatter.label` 快速將字段渲染Label標籤
> `Table.api.formatter.datetime` 快速時間戳數據渲染成日期時間數據
> `Table.api.formatter.operate` 操作欄固定按鈕
> `Table.api.formatter.buttons` 快速生成多個按鈕
> `Table.api.formatter.toggle` 快速生成切換按鈕