在 FastAdmin 中,超鏈接的 class
屬性用于定義不同的交互行為和樣式。以下是常見 class
配置的用途和區別:
btn-dialog
用于觸發彈出對話框行為。點擊帶有此 class
的鏈接或按鈕時,FastAdmin 會自動加載指定的 URL 內容并在模態框中顯示。通常與 data-url
或 href
屬性配合使用。
<a href="/admin/example/edit" class="btn btn-primary btn-dialog">編輯</a>
btn-disabled
用于禁用按鈕或鏈接的交互功能。添加此 class
后,元素會呈現灰色狀態,且無法點擊。通常用于權限控制或條件禁用場景。
<a href="#" class="btn btn-default btn-disabled">無權操作</a>
btn-addtabs
用于在 FastAdmin 的多標簽頁系統中打開新標簽頁。點擊后會將目標 URL 加載到新標簽頁,而非當前頁面跳轉。
<a href="/admin/example/index" class="btn btn-success btn-addtabs">管理</a>
btn-ajax
用于觸發 Ajax 請求。點擊后向指定 URL 發送異步請求,通常用于無需頁面跳轉的操作(如快速啟用/禁用)。
<a href="/admin/example/disable" class="btn btn-warning btn-ajax">禁用</a>
btn-magic
用于觸發 FastAdmin 的“魔法”功能,如表單自動綁定、動態加載等。通常配合 data-*
屬性實現復雜交互。
<a href="#" class="btn btn-info btn-magic" data-type="toggle">切換</a>
btn-pop
用于觸發彈出層(如確認框)。常與 data-confirm
屬性配合使用,實現操作前的二次確認。
<a href="/admin/example/delete" class="btn btn-danger btn-pop" data-confirm="確認刪除?">刪除</a>
注意事項
- 樣式類(如
btn-primary
)需與行為類(如btn-dialog
)配合使用。 - 部分類依賴 FastAdmin 的底層 JavaScript 事件綁定,需確保
require-fa.js
已加載。 - 自定義類可通過擴展 FastAdmin 的
bootstrap-table-actions.js
實現新功能。
fastadmin 中的 btn-multi
類功能
btn-multi
是 FastAdmin 框架中用于按鈕的一個 CSS 類,主要用于實現多選操作或批量操作的功能。通常應用于表格操作欄中的按鈕,允許用戶選擇多條數據后執行批量操作。
btn-multi
的主要作用
-
批量操作控制
btn-multi
類通常與 JavaScript 事件綁定,用于觸發批量操作。例如刪除多條記錄、批量修改狀態等。按鈕默認會在未選擇任何數據時禁用,選擇數據后自動啟用。 -
樣式統一
btn-multi
繼承了 FastAdmin 的按鈕樣式(如btn btn-xxx
),同時添加了多選操作的特定樣式邏輯,例如禁用狀態下的灰色外觀。 -
與表格聯動
通常需要配合表格的多選功能(如 BootstrapTable 的 checkbox)使用。選中行后,按鈕狀態會動態變化。
典型使用示例
<a href="javascript:;" class="btn btn-danger btn-multi" data-url="del.html">批量刪除</a>
// 通常 FastAdmin 會自動綁定事件,但也可以手動初始化
$('.btn-multi').click(function() {// 獲取選中的行數據并提交
});
注意事項
- 依賴 jQuery 和 FastAdmin 事件機制,需確保相關 JS 文件已加載。
- 需配合后端接口,
data-url
屬性指向處理批量操作的接口地址。 - 默認需選中數據,未選中時按鈕為禁用狀態(
disabled
)。
如果需要自定義行為,可以覆蓋默認的 btn-multi
事件處理邏輯,或通過 data-*
屬性擴展功能。