在Jquery ui模式對話框中顯示foreach數據

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是否為空-如果不為空，則在每行<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看起來都很好。

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


});