fastadmin 工具欄新增自定義按鈕,實現彈窗並儲存資料效果

大雄呀發表於2024-09-04

FastAdmin在一鍵CRUD時會自動生成新增、編輯、刪除、匯入、更多按鈕的HTML,這些按鈕會根據使用者所擁有的許可權控制基是否顯示或隱藏。我們可以在控制器對應的index.html檢視檔案中任意修改或刪除對應的按鈕。

當我們需要在工具欄新增一個自定義按鈕,並且點選按鈕能夠實現彈窗並且彈窗可以儲存資料時,可以參考一下步驟

1、在對應的index.html檢視檔案中,新增彈窗按鈕程式碼,程式碼整體以及實現效果如下圖

<a href="assess/assess_dimension_weight/publish"  class="btn btn-danger btn-dialog" title="測試" ><i class="fa fa-trash"></i> 自定義按鈕</a>

  

2、在檢視中,新建publish.html檔案,程式碼如下

<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Assess_activity_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-assess_activity_id" data-rule="required" min="0" data-source="assess/activity/index" class="form-control" name="row[assess_activity_id]" type="text" value="">
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>

3、在控制器中,新建方法渲染已經接收彈窗提交時的post請求

    public function publish()
    {
        if ($this->request->isPost()) {
            // 寫儲存按鈕後的接收處理邏輯
            $this->success('success!');
        }
        // 點選按鈕渲染彈窗頁面
        return $this->view->fetch();
    }

  

4、在js檔案中,新增與控制器方法同名的方法,放api之上,程式碼以及程式碼位置如下

publish: function () {
            Controller.api.bindevent();
        },

  

最近完成工具欄新增一個自定義按鈕,並且點選按鈕能夠實現彈窗並且彈窗可以儲存資料效果

相關文章