在dcat admin中如何通过点击按钮添加数据到表格并允许用户编辑？-php教程-PHP中文网

在dcat admin中如何通过点击按钮添加数据到表格并允许用户编辑？

聖光之護

发布： 2025-03-17 08:40:12

原创

948人浏览过

在dcat admin中如何通过点击按钮添加数据到表格并允许用户编辑？

Dcat Admin自定义表格：点击按钮添加数据并编辑

本文介绍如何在Dcat Admin (Laravel Admin)中创建一个自定义表格，允许用户点击按钮添加数据，并对表格数据进行编辑。假设场景：用户输入ID，点击按钮获取数据并添加到表格，表格中包含可编辑的数量和颜色选择项。

首先，在页面添加一个ID输入框和一个“添加数据”按钮。以下代码展示如何在Dcat Admin中实现：

use Dcat\Admin\Admin;
use Dcat\Admin\Grid;
use Dcat\Admin\Layout\Content;

class MyController extends Controller
{
    public function index(Content $content)
    {
        return $content
            ->header('数据管理')
            ->description('添加数据')
            ->body($this->grid());
    }

    protected function grid()
    {
        $grid = new Grid(new MyModel());

        $grid->disableActions();
        $grid->disableBatchActions();
        $grid->disableCreateButton();
        $grid->disableFilter();

        $grid->column('id', 'ID');
        $grid->column('name', '名称');
        $grid->column('quantity', '数量')->editable();
        $grid->column('color', '颜色')->select(['red' => '红色', 'blue' => '蓝色', 'green' => '绿色']);

        $grid->tools(function (Grid\Tools $tools) {
            $tools->append(<<<HTML
                <div>
                    <input type="text" id="add-data-id" placeholder="输入ID">
                    <button class="btn btn-primary btn-add-data">添加数据</button>
                </div>
HTML);
        });

        Admin::script($this->script());

        return $grid;
    }

    protected function script()
    {
        return <<<JS
            $('.btn-add-data').click(function () {
                let id = $('#add-data-id').val();
                if (id) {
                    $.ajax({
                        url: '/api/get-data/' + id, // 替换为你的API接口
                        type: 'GET',
                        success: function (data) {
                            if (data) {
                                //  将数据添加到表格 (需要根据你的Grid结构调整)
                                let newRow = `<tr><td>${data.id}</td><td>${data.name}</td><td><input type="number" value="${data.quantity}"></td><td><select><option value="red">红色</option><option value="blue">蓝色</option><option value="green">绿色</option></select></td></tr>`;
                                $('#grid-table tbody').append(newRow);
                            } else {
                                alert('数据不存在');
                            }
                        },
                        error: function () {
                            alert('请求失败');
                        }
                    });
                } else {
                    alert('请输入ID');
                }
            });
JS;
    }
}

登录后复制

后端API接口示例(/api/get-data/{id}):

酷表ChatExcel

北大团队开发的通过聊天来操作Excel表格的AI工具

查看详情

public function getData($id)
{
    $data = MyModel::find($id);
    if ($data) {
        return response()->json($data);
    } else {
        return response()->json(null, 404);
    }
}

登录后复制

注意： 以上代码中的 /api/get-data/{id} 需要替换成你实际的API接口地址。 $('#grid-table tbody').append(newRow); 这部分代码需要根据你Dcat Admin Grid生成的表格HTML结构进行调整，确保新数据能够正确添加到表格中。建议使用Dcat Admin提供的更优雅的方式来更新表格数据，例如使用$grid->model()->newQuery()重新加载数据。为了更完善的体验，建议添加错误处理和加载提示等功能。

以上就是在dcat admin中如何通过点击按钮添加数据到表格并允许用户编辑？的详细内容，更多请关注php中文网其它相关文章！