在 Jquery ui 模式对话框中显示 foreach 数据答案

【问题标题】：Display foreach data in Jquery ui modal dialog在 Jquery ui 模式对话框中显示 foreach 数据
【发布时间】：2019-04-20 16:59:13
【问题描述】：

我有一个数据表，其中包含来自数据库的 foreach 数据，并希望向每一行添加按钮，这将打开 Jquery ui 模式，用户可以在其中编辑行中的数据。

如何在对话框中为每一行显示此 foreach 数据？

我的桌子：

<tbody>
        @if($invoices)
            @foreach($invoices as $invoice)
                <tr>
                    <td>{{$invoice->invoice_number}}</td>
                    <td>{{$invoice->status}}</td>
                    <td>{{$invoice->created_at}}</td>
                    <td>{{$invoice->supplier_name}}</td>
                    <td>{{$invoice->delivery_date}}</td>
                    <td>{{$invoice->comment}}</td>
                    <td><a class="opener"><i class="fa fa-fw fa-edit"></i></a></td>

                </tr>
            @endforeach
        @endif
        </tbody>

HTML 模态窗口，该数据应该在哪里：

<div id="dialog" class="dialog">
    <input id="name">
</div>

Jquery ui 对话框脚本：

  $( ".opener" ).click(function() {
      $( "#dialog" ).dialog( "open" );
});

【问题讨论】：

标签： javascript php jquery laravel

【解决方案1】：

要显示当前行的数据，您需要做两件事：

1) 从行中获取值。

2) 将这些值放入对话框中。

首先将一些类设置为您希望在对话框中显示的 td，假设它们是前 3 个。还要设置一个属性，该属性将存储您希望在输入中使用的名称

<tr>
    <td class="data" data-name="inv_number">{{$invoice->invoice_number}}</td>
    <td class="data" data-name="inv_status" >{{$invoice->status}}</td>
    <td class="data" data-name="created_at">{{$invoice->created_at}}</td>
    <td>{{$invoice->supplier_name}}</td>
    <td>{{$invoice->delivery_date}}</td>
    <td>{{$invoice->comment}}</td>
    <td><a class="opener"><i class="fa fa-fw fa-edit"></i></a></td>
 </tr>

然后单击，找到行并存储值：

$( ".opener" ).click(function() {
  var values = {};
  $(this).closest('tr') //find the current row
    .find('.data') // find the td's
    .each(function(index, td) { // for each get and store the value
        var inputName = $(td).data('name'); //get the name
        var inputValue = $(td).text(); // get the text which the td holds
        values[inputName] = inputValue; // set the values
    });

  $( "#dialog" ).html(''); // clear the previously created inputs
  $( "#dialog" ).dialog( "open" );

现在根据存储的值创建输入：

  $.each(values, function(name, value) {
      $( "#dialog" ).append('<input name="'+name+'" value="'+value+'" />');
  });


});

【讨论】：

【解决方案2】：

我猜你要找的是这个（把它放在你的 HTML 所在的地方） - 检查数据数组$invoices 是否为空 - 如果不为空，它会在每行 <tr> 中添加一个 <table>，其中元素 <td> 在其中包含 $invoice 信息。

<?php   
    if(!empty($invoices)) {
        echo("<table>");
        foreach($invoices as $invoice) {
            echo("<tr>".
                    "<td>".$invoice->invoice_number."</td>".
                    "<td>".$invoice->status."</td>".
                    "<td>".$invoice->created_at."</td>".
                    "<td>".$invoice->supplier_name."</td>".
                    "<td>".$invoice->delivery_date."</td>".
                    "<td>".$invoice->comment."</td>".
                    "<td><a class='opener'><i class='fa fa-fw fa-edit'>open dialog</i></a></td>".
                "</tr>");
        }
        echo("</tr></table>");
    }
?>

您的模态窗口和 jQuery 看起来不错。

【讨论】：