Dcat Admin自定义表格：点击按钮添加数据并编辑
本文介绍如何在Dcat Admin (Laravel Admin)中创建一个自定义表格，允许用户点击按钮添加数据，并对表格数据进行编辑。 假设场景：用户输入ID，点击按钮获取数据并添加到表格，表格中包含可编辑的数量和颜色选择项。
首先，在页面添加一个ID输入框和一个“添加数据”按钮。 以下代码展示如何在Dcat Admin中实现：
use DcatAdminAdmin;use DcatAdminGrid;use DcatAdminLayoutContent;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 (GridTools $tools) { $tools->append(<<<HTML 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 = `${data.id} ${data.name} 红色蓝色绿色
后端API接口示例(/api/get-data/{id}):
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中如何通过点击按钮添加数据到表格并允许用户编辑？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1255808.html
微信扫一扫 
支付宝扫一扫 
