在 Dcat Admin 中自定義點擊添加數據的表格
本文介紹如何在 dcat admin (laravel-admin) 中創建一個自定義表格，允許用戶點擊按鈕添加數據，并支持在表格中編輯數量和顏色。 下圖展示了目標功能：
實現步驟
1. 創建表格和添加按鈕:
在 Dcat Admin 中，使用 grid 創建表格，并在表格工具欄添加一個按鈕觸發添加數據操作。 以下代碼片段展示了如何創建表格和添加按鈕：
use DcatAdminGrid; use DcatAdminLayoutContent; public function index(Content $content) { return $content ->header('數據管理') ->description('添加數據') ->body($this->grid()); } protected function grid() { $grid = new Grid(new YourModel()); $grid->tools(function (GridTools $tools) { $tools->append(new DcatAdminGridToolsButton('添加數據', 'btn-add-data')->class('btn btn-primary')); }); // 表格列定義 $grid->column('id', 'ID'); $grid->column('name', '名稱'); $grid->column('quantity', '數量')->editable(); $grid->column('color', '顏色')->select(['red' => '紅色', 'blue' => '藍色', 'green' => '綠色']); return $grid; }
2. 前端 JavaScript 代碼:
使用 jquery 綁定按鈕點擊事件，通過 ajax 請求服務器獲取數據，并將數據添加到表格中。 注意替換 /admin/your-endpoint 為你的后端處理接口地址，#your-grid-id 為你的表格 ID。 為了更好的用戶體驗，建議使用 Dcat Admin 提供的表格操作方法，而不是直接操作 dom。
$(document).on('click', '.btn-add-data', function () { let id = prompt("請輸入 ID"); if (id) { $.ajax({ url: '/admin/your-endpoint', type: 'GET', data: { id: id }, success: function (data) { if (data) { // 使用 Dcat Admin 的方法添加行，而不是直接操作 DOM Dcat.grid.appendRow('#your-grid-id', data); // 替換 #your-grid-id 為你的表格 ID } else { alert('未找到數據'); } }, error: function (error) { alert('請求失敗: ' + error.responseText); } }); } });
3. 后端處理 AJAX 請求:
后端控制器方法處理 AJAX 請求，根據 ID 查詢數據并返回 json 數據。
use IlluminateHttpRequest; public function getDatum(Request $request) { $id = $request->input('id'); $data = YourModel::find($id); if ($data) { return response()->json($data); } else { return response()->json(null); } }
4. 改進建議 (使用 Dcat Admin 的表格 API):
為了更好地集成 Dcat Admin 的功能，建議使用 Dcat Admin 提供的 API 來操作表格，而不是直接操作 DOM。 這可以確保你的代碼與 Dcat Admin 的更新兼容，并獲得更好的維護性。 例如，你可以考慮使用 Dcat.grid.addRow() 或類似的方法來添加行。 這需要參考 Dcat Admin 的文檔來確定最合適的 API 方法。
通過以上步驟，你就可以在 Dcat Admin 中創建一個自定義的點擊添加數據的表格。 記住替換 YourModel 為你的模型名稱，并根據你的實際情況調整代碼。 使用 Dcat Admin 提供的 API 可以使你的代碼更簡潔、更易于維護，并且更好地與框架集成。
