dcat admin (laravel-admin)自定义点击添加表格数据的技巧
本文介绍如何在dcat admin中构建一个支持点击添加数据的自定义表格，实现动态添加行并允许用户输入数据的功能。 这对于需要在页面上灵活管理数据的场景非常实用。
假设我们的目标是：用户输入ID，点击按钮后，系统从服务器获取数据并添加到表格中。表格每行包含名称、数量和颜色选择项。
由于dcat admin的标准表格组件不支持直接动态添加数据，我们需要自定义实现。
步骤一：创建表单元素
首先，使用dcat admin的表单构建器创建表格和ID输入框：
$form->text('id', 'ID')->placeholder('请输入ID'); $form->table('items', '数据列表', function ($table) { $table->text('name', '名称')->readonly(); // 名称字段只读 $table->text('quantity', '数量'); $table->select('color', '颜色')->options(['red' => '红色', 'blue' => '蓝色', 'green' => '绿色']); });
步骤二：添加前端交互
接下来，为ID输入框添加一个“添加”按钮，并编写JavaScript代码处理点击事件：
<button id="add-item">添加数据</button> <script> $('#add-item').click(function() { let id = $('input[name="id"]').val(); if (id) { $.ajax({ url: '/your-endpoint/' + id, success: function(data) { // 构建新的表格行，并添加到表格中。 注意替换成你实际的表格结构 let newRow = $('<tr>') .append($('<td>').text(data.name)) .append($('<td>').append('<input type="text" name="items[quantity][]" value="">')) .append($('<td>').append('<select name="items[color][]"><option value="red">红色</option><option value="blue">蓝色</option><option value="green">绿色</option></select>')); $('table').append(newRow); } }); } }); </script>
注意： /your-endpoint/ 需要替换成你的实际后端接口地址。 $(‘table’) 选择器也需要根据你的html结构进行调整。 代码中使用了更健壮的方式来添加新的表格行，避免直接使用字符串拼接带来的潜在问题。
步骤三：实现后端接口
最后，编写服务器端控制器方法处理AJAX请求：
public function getItem(Request $request, $id) { $item = Item::find($id); // 根据你的模型替换Item if ($item) { return response()->json(['name' => $item->name]); // 返回名称数据 } else { return response()->json(['error' => '数据不存在'], 404); } }
通过以上步骤，你就可以在dcat admin中创建一个支持动态添加数据的自定义表格了。 记住根据你的实际数据模型和表格结构调整代码。 建议使用更规范的JavaScript代码和后端验证来提高代码的健壮性和安全性。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
