如何从一行获取数据并转移到模态？ Laravel 5.4
我有一个表格，其中包含我的数据库中的listo产品，其中包含ID，名称，描述以及其他数据类型。我创建了一个按钮，可以调用模态来显示有关产品的更多详细信息，但是模式始终显示表格中第一个产品的详细信息，而不是与其相关的ID。
我的表：
我的表格代码：
<table class="table table-striped table-bordered" id="table1" class="table table-bordered">
<thread>
<th><center>Imagem</center></th>
<th>SKU</th>
<th><center>Produto</center></th>
<th>Custo</th>
<th>Preço</th>
<th>Atualização</th>
<th>Status</th>
<th>Estoque</th>
<th>Distruibuidor</th>
<th>Categoria</th>
<th id="acoes">Ações</th>
</thread>
@foreach($product as $prod)
<thread>
<tbody>
<td><img src="{{$prod->image->erp_image}}" style="width: 50px; height: 50px;" alt="" id="ProdImage"></td>
<td>{{$prod->erp_model}}</td>
<td>{{$prod->description->erp_name}}</td>
<td>R$ {{$prod->erp_cost}}</td>
<td>R$ {{$prod->erp_price}}</td>
<td>{{ $prod->erp_modifieddate}}</td>
<td style="max-width: 45px">
@if($prod->status == 1)
<span class="label label-success">Ativo</span>
@else
<span class="label label-danger">Inativo</span>
@endif
</td>
<td>{{ $prod->erp_quantity}}</td>
<td>@if($prod->erp_distributor == 'A')
<span class="label label-default">Aldo</span>
@elseif($prod->erp_distributor == 'AN')
<span class="label label-default">All Nations</span>
@elseif($prod->erp_distributor == 'H')
<span class="label label-default">Hayamax</span>
@elseif($prod->erp_distributor == 'O')
<span class="label label-default">Oderço</span>
@elseif($prod->erp_distributor == 'R')
<span class="label label-default">Rico Peças</span>
@endif
</td>
<td>
@foreach($prod->category as $category)
{{$category->erp_name}}
@endforeach
</td>
<td>
<button href="#" data-toggle="modal" data-target="#view" class="btn btn-default"><i class="glyphicon glyphicon-eye-open"></i></button>
<div class="modal fade" id="view" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Detalhes</h4>
</div>
<div class="modal-body">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Informações do produto</h3>
</div>
<div class="panel-body">
<h5>Nome</h5>
<input class="form-control" type="text" placeholder="{{$prod->description->erp_name}}" readonly>
<h5>SKU</h5>
<input class="form-control" type="text" placeholder="{{$prod->erp_model}}" readonly>
<h5>EAN</h5>
<input class="form-control" type="text" placeholder="{{$prod->erp_ean}}" readonly>
<h5>NCM</h5>
<input class="form-control" type="text" placeholder="{{$prod->erp_ncm}}" readonly>
<h5>CST</h5>
<input class="form-control" type="text" placeholder="{{$prod->erp_cstid}}" readonly>
<h5>Marca</h5>
<input class="form-control" type="text" placeholder="{{$prod->brand->erp_name}}" readonly>
<h5>Categoria</h5>
@foreach($prod->category as $category)
<input class="form-control" type="text" placeholder="{{$category->erp_name}}" readonly>
@endforeach
<h5>Distribuidor</h5>
<input class="form-control" type="text" placeholder="{{ App\Helpers\ProductDistributorHelper::$distributor[$prod->erp_distributor]}}" readonly>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Informações dos preços</h3>
</div>
<div class="panel-body">
<h5>Preço custo</h5>
<input class="form-control" type="text" placeholder="R$ {{$prod->erp_cost}}" readonly>
<h5>Preço venda</h5>
<input class="form-control" type="text" placeholder="R$ {{$prod->erp_price}}" readonly>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Informações de peso e medida</h3>
</div>
<div class="panel-body">
<h5>Peso</h5>
<input class="form-control" type="text" placeholder="{{$prod->erp_weight}} kg" readonly>
<h5>Comprimento</h5>
<input class="form-control" type="text" placeholder="{{$prod->erp_lenght}} cm" readonly>
<h5>Largura</h5>
<input class="form-control" type="text" placeholder="{{$prod->erp_width}} cm" readonly>
<h5>Altura</h5>
<input class="form-control" type="text" placeholder="{{$prod->erp_height}} cm" readonly>
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Informações de estoque</h3>
</div>
<div class="panel-body">
<h5>Quantidade</h5>
<input class="form-control" type="text" placeholder="{{$prod->erp_quantity}}" readonly>
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Informações técnicas e descrição</h3>
</div>
<div class="panel-body">
<h5>Descrição</h5>
<p></p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
</div>
</td>
<style>
td{
max-width: 100px;
min-width: 80px;
}
</style>
</tbody>
</thread>
@endforeach
</table>
我的控制器
public function showView($name=null){
if(View::exists('admin/'.$name))
{
$product = Product::paginate(10);
if(Sentinel::check())
return view('admin.'.$name)->with('product', $product);
else
return redirect('admin/signin')->with('error', 'You must be logged in!');
}
else
{
return view('admin.404');
}}
有任何建议吗？
4 个答案:
答案 0 :(得分：8)
每次显示你的第一个模态因为每个模态具有相同的id 视图。
以下代码中的更改也会有效。
<progress id="health" value="100" max="100"></progress>
这将为每个模态创建不同的ID。
这不是让它发挥作用的好方法。
每行只应有一个模态，并在模态显示按钮的单击事件上使用jQuery动态更改数据。
因为这么多记录会使你的HTML文件变大，因此性能会很慢。
答案 1 :(得分：3)
我认为这不是在foreach循环中渲染模态的好方法。试想一下，如果您有很多产品，那么您的模态代码也会根据您的产品数量进行渲染。
这是我个人使用的解决方案。你可以尝试这个。
第1步： 添加一个名为＆＃39; modal-global ＆＃39;的班级。并将特定网址添加到 href 属性中。
示例：
with open('query.txt', 'r') as q:
query = {line.strip(): 0 for line in q.readlines()}
with open('log.txt', 'r') as l:
for line in l:
check = line.split()[2]
if check in query:
query[check] = 1
if sum(query.values()) == len(query):
break
for k, v in query.items():
print k, v
第2步： 添加名为id＆＃34; modal-global＆＃34;的引导模式。在关闭身体标签之前进入项目。而且无需将此模态代码放在foreach循环中。
示例：
<a href="your/url/{{$prod->id}}" class="btn btn-default modal-global"><i class="glyphicon glyphicon-eye-open"></i></a>
第3步： 现在你必须编写一些javascript代码来打开你的模态并向你的服务器发送一个ajax请求并等到它的响应。
示例：
<div class="modal fade" id="modal-global">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="text-center">
<i class="fa fa-3x fa-refresh fa-spin"></i>
<div>Please wait...</div>
</div>
</div>
</div>
</div>
第4步： 以下是您的控制器方法的示例，该方法将返回具有特定产品详细信息的html内容，并且我们的ajax将接收此html内容作为响应
示例：
$('.modal-global').click(function(event) {
event.preventDefault();
var url = $(this).attr('href');
$("#modal-global").modal('show');
$.ajax({
url: url,
type: 'GET',
dataType: 'html',
})
.done(function(response) {
$("#modal-global").find('.modal-body').html(response);
});
});
答案 2 :(得分：0)
您为每行创建模式的方式并不好，因为它会降低页面性能，减慢页面加载速度并增加页面大小，并且需要很长时间才能加载。为此，有一个简单的解决方案。
-
创建一个id为
view-product的全局模态弹出框或您要保留的任何其他ID。使用此ID我们将打开模态。<div class="modal fade" id="view-product" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <!-- Your Code goes here--> </div> </div> -
在每个产品行中添加一个链接，然后添加类
view-product。使用view-product类，我们将绑定click事件以获取每个产品详细信息并打开模态。将每个产品ID分配给以下链接，以确定您要查看的产品详细信息。<a href="javascript:;" data-id="{{$prod->id}}" class="btn btn-default view-product"><i class="glyphicon glyphicon-eye-open"></i></a> -
在
view-product课程上添加点击事件，并使用AJAX通过我们在每个产品的链接中传递的data-id获取产品详细信息。检查下面。从ajax响应后，您可以为要设置值的每个字段分配值。$('.view-product').on("click", function(event) { $("#view-product").modal('show'); var product_id = $(this).data('id'); $.ajax({ url: "url/to/product/details/" + product_id, type: 'GET', dataType: 'json', }).done(function(response) { $("#product_name").val(response.product_name); // Assign values to other fields }); });
这是简单而全球化的解决方案。我们可以在任何地方使用它，这将增加页面加载并发送请求以单独获取详细信息。
答案 3 :(得分：0)
改成这个
<button href="#" data-toggle="modal" data-target="#view-{{$prod->id}}" class="btn btn-default"><i class="glyphicon glyphicon-eye-open"></i></button>
<div class="modal fade" id="view-{{$prod->id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？