title: FastAdmin 個人記録 - Bootstrap カスタムボタン
date: 2021-09-10 16:01:46
tags:
- FastAdmin
- チュートリアル
category:
- FastAdmin
bootstrap ボタンの color 属性#
| color | class |
|---|---|
| 白 | btn |
| 深蓝 | btn btn-primary |
| 浅蓝 | btn btn-info |
| 緑 | btn btn-success |
| 黄 | btn btn-warning |
| 赤 | btn btn-danger |
テーブルのボタンは権限によって表示されます#
1. index.html の table タグに data-operate-{name} name = ボタン名を追加します
2. 対応する js にカスタムボタンを追加します
<table id="table" class="table table-striped table-bordered table-hover table-nowrap"
data-operate-edit=false
data-operate-del=false
data-operate-ban="{:$auth->check('')}"
width="100%">
</table>
buttons: [{
name: '',
text: '',
title: '',
classname: 'btn btn-xs btn-danger btn-dialog',
icon: 'fa fa-ban',
url: '',
extend: 'data-area=\'["50%", "70%"]\'',
callback: function (data) {
},
visible: function (row) {
// trueを返すとボタンが表示され、falseを返すと非表示になります
return true;
}
}]
カスタムボタンの class 定義#
| 機能 | class |
|---|---|
| ダイアログ | btn btn-dialog |
| リクエスト | btn btn-ajax |
| クリック | btn btn-click |
> 例
//data-url ボタンのアドレス
//data-area ダイアログのサイズ
<a href="javascript:;" data-url="" data-area='["950px", "750px"]' class="btn btn-success btn-dialog" title="{:__('Switch')}" ><i class="fa fa-list"></i> {:__('Switch')}</a>
{field: 'operate', title: __('Operate'), table: table,
buttons:[
{
name: 'copy',
text: __('Copy Bankcard'),
title: __('Copy Bankcard'),
icon: 'fa fa-copy',
classname: 'btn btn-xs btn-info btn-click',
click: function (t,row) {
Layer.msg('クリックイベント');
return false;
}
},
]},