Question

我有一个数据表，其中包含数据库中的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" );
});

Answer 1

我猜您在寻找什么（将其放在HTML所在的位置） -检查数据数组$invoices是否为空 -如果不为空，则会在<table>的每一行中添加<tr>，其中元素<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看起来都很好。

Answer 2

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

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+'" />');
  });


});

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

2 个答案: