
>[info]**15.自定義按鈕**
按鈕組的功能是根據第8項中的`Table.api.formatter.buttons`進行生成的,代碼如下
~~~
{
field: 'buttons',
width: "120px",
title: __('按鈕組'),
table: table,
events: Table.api.events.operate,
buttons: [
{
name: 'detail',
text: __('彈出窗口打開'),
title: __('彈出窗口打開'),
classname: 'btn btn-xs btn-primary btn-dialog',
icon: 'fa fa-list',
url: 'example/bootstraptable/detail',
callback: function (data) {
Layer.alert("接收到回傳數據:" + JSON.stringify(data), {title: "回傳數據"});
},
visible: function (row) {
//返回true時按鈕顯示,返回false隱藏
return true;
}
},
{
name: 'ajax',
text: __('發送Ajax'),
title: __('發送Ajax'),
classname: 'btn btn-xs btn-success btn-magic btn-ajax',
icon: 'fa fa-magic',
url: 'example/bootstraptable/detail',
confirm: '確認發送',
success: function (data, ret) {
Layer.alert(ret.msg + ",返回數據:" + JSON.stringify(data));
//如果需要阻止成功提示,則必須使用return false;
//return false;
},
error: function (data, ret) {
console.log(data, ret);
Layer.alert(ret.msg);
return false;
}
},
{
name: 'addtabs',
text: __('新選項卡中打開'),
title: __('新選項卡中打開'),
classname: 'btn btn-xs btn-warning btn-addtabs',
icon: 'fa fa-folder-o',
url: 'example/bootstraptable/detail'
}
],
formatter: Table.api.formatter.buttons
}
~~~
按鈕配置支持的參數有:
> `name`按鈕唯一標識,其中`add/edit/del/dragsort`已經被占用,如果使用將覆蓋相應的按鈕配置。如果需要按鈕按鈕顯示,我們可以在HTML視圖文件的`table`添加`data-buttons-標識`來根據權限控制顯示
> `text`按鈕的文本內容,如果不需要顯示文本可忽略,支持`function`和`string`類型
> `title`鼠標移上去的標題或`彈窗/選項`顯示的標題,支持`function`和`string`類型
> `icon`按鈕的圖標,請使用`font-awesome`圖標庫,比如`fa fa-home`
> `classname`按鈕的`class`, 其中`classname`中的`btn-dialog、btn-ajax、btn-addtabs、btn-click`,FastAdmin已經為這幾個固定的Class注冊了事件,所以可以直接使用,如果想要實現其它功能,需要自己手動編寫代碼綁定事件才可使用。
> `url`按鈕的鏈接/Ajax事件請求的URL/彈窗鏈接/選項卡鏈接,直接`function`和`string`類型,此鏈接會自動在鏈接后添加`ids/{ids}`,`{ids}`為當行主鍵ID,如果需要傳遞其它字段值,請在URL中使用`{字段名}`占位即可
> `refresh`自動刷新,只針對`btn-ajax`事件
> `confirm`確認框提示文字,配置后會在確認操作再執行對應的事件,只針對`btn-ajax/btn-dialog/btn-addtabs`事件
> `success`事件成功的回調,只針對`btn-ajax`事件
> `error`事件失敗的回調,只針對`btn-ajax`事件
> `callback`彈窗回傳的回調,只針對`btn-dialog`事件,需要在對應打開的頁面中使用`Fast.api.close(data);`進行回傳數據
> `hidden`是否隱藏按鈕,按鈕默認顯示,支持`function`和`bool`類型
> `visible`是否顯示按鈕,按鈕默認顯示,支持`function`和`bool`類型
> `disable`是否禁用按鈕,按鈕默認不禁用,支持`function`和`bool`類型
> `click`當`classname`包含`btn-click`時的點擊回調事件
> `extend`按鈕擴展信息,可以任意定制按鈕的參數,比如我們想在新窗口中打開鏈接,則配置`extend:' target="_blank"'`即可
> `dropdown`下拉列表分組的名稱,當多個按鈕需要顯示為一級時,該值為顯示的文字