【问题标题】:How to get data from a line and move to a modal? Laravel 5.4如何从一行获取数据并移动到模态?拉拉维尔 5.4
【发布时间】:2017-04-20 16:17:12
【问题描述】:

我有一个表,其中列出了我的数据库中的产品,其中我有 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">&times;</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');
    }}

有什么建议吗?

【问题讨论】:

    标签: php laravel laravel-5


    【解决方案1】:

    它每次都会向您显示第一个模态,因为每个模态都具有相同的 id view

    在您的代码中进行以下更改,它会起作用。

    <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">
    

    这将为每个模式创建不同的 ID。

    这不是让它工作的好方法。

    每行应该只有一个模态,并在模态显示按钮的单击事件上使用 jQuery 动态更改数据。

    因为太多的记录会使您的 HTML 文件变大,并且性能会很慢。

    【讨论】:

    • 之前有什么问题?
    • 请检查答案,我已经建议了更好的方法。
    • Pandhi 的建议非常有效:使用 Jquery 动态加载模式。如果你想坚持这个解决方案,咏叹调标签就有问题。阅读此堆栈输入:stackoverflow.com/questions/18933084/…
    • 我使用了你的代码,但我传递了错误的“id”变量。我的“id”被称为“product_id”而不仅仅是“id”。我解决了这个问题,它奏效了。
    • 赞成。顺便说一句:很容易 ajax 并放置一个 &lt;div id="product_detail_modal&gt;&lt;/div&gt; 并将模式移动到另一个文件,发送带有产品 id 的 ajax get 请求,渲染视图并使用 ->render( ) 方法并将其以纯文本形式发送回以填充 div。 laravel.com/api/5.4/Illuminate/View/View.html
    【解决方案2】:

    我认为这不是在 foreach 循环中呈现模态的好方法。试想一下,如果您有很多产品,那么您的模态代码也会根据您的产品数量呈现。

    这是我个人使用的解决方案。你可以试试这个。

    第 1 步: 添加一个带有名为“modal-global”的类的按钮,并将特定的 URL 添加到 href 属性中。

    例子:

    <a href="your/url/{{$prod->id}}" class="btn btn-default modal-global"><i class="glyphicon glyphicon-eye-open"></i></a>
    

    第 2 步: 在关闭你的 body 标签之前,在你的项目中添加一个名为 id "modal-global" 的引导模式。并且无需将此模式代码放入您的 foreach 循环中。

    例子:

    <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>
    

    第 3 步: 现在您必须编写一些 javascript 代码来打开您的模式并向您的服务器发送一个 ajax 请求并等待它的响应。

    例子:

    $('.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);
            });
    
        });
    

    第 4 步: 这是您的控制器方法的示例,它将返回具有特定产品详细信息的 html 内容,我们的 ajax 将接收此 html 内容作为响应

    例子:

    public function viewProduct($id)
    {
        $product = Product::findOrfail($id);
    
        return "
            <table class='table table-hover'>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>description</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{$product->id}</td>
                        <td>{$product->name}</td>
                        <td>{$product->description}</td>
                    </tr>
                </tbody>
            </table>
        ";    
    }
    

    【讨论】:

      【解决方案3】:

      您为每一行创建模态的方式不好,因为它会降低页面性能,减慢页面加载并增加页面大小,并且需要很长时间才能加载。为此,有一个简单的解决方案。

      1. 创建一个 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>
        
      2. 在每个产品行中添加一个链接并添加类view-product。使用view-product 类我们将绑定点击事件以获取每个产品详细信息并打开模式。将每个产品 ID 分配给以下链接,以确定您要查看的产品详细信息。

        <a href="javascript:;" data-id="{{$prod->id}}" class="btn btn-default view-product"><i class="glyphicon glyphicon-eye-open"></i></a>
        
      3. 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
            });
        });
        

      这是简单的全局解决方案。我们可以在任何地方使用它,这将增加页面负载并发送请求以单独获取详细信息。

      【讨论】:

        【解决方案4】:

        改成这个

        <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">
        

        【讨论】:

          猜你喜欢
          • 2018-06-08
          • 2017-07-10
          • 2019-02-21
          • 2021-12-22
          • 2017-10-02
          • 1970-01-01
          • 2020-09-02
          • 1970-01-01
          • 2018-03-04
          相关资源
          最近更新 更多