特定行ID的引导程序模式形式

时间:2019-01-26 18:23:08

标签: php laravel bootstrap-4

尝试结合两个教程以得到一个输出。 第一个是Laravel 5.7 CRUD (Create Read Update Delete) Tutorial Example

现在,我更改了主要布局,并遇到一个问题。

我的主要布局如下:Design mode of my screen

下面显示了用于生成该表的代码

@foreach ($products as $product)
<tbody>
    <tr>
        <td>
            <span class="custom-checkbox">
                <input type="checkbox" id="checkbox1" name="options[]" value="1">
                <label for="checkbox1"></label>
            </span>
        </td>
        <td>{{ $product->name }}</td>
        <td>{{ $product->name }}</td>
        <td>{{ $product->detail }}</td>
        <td>
            <a href="#editEmployeeModal"  class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit">&#xE254;</i></a>
            <a href="#deleteEmployeeModal"  class="delete" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete">&#xE872;</i></a>
        </td>
    </tr>

</tbody>
@endforeach

下面显示的代码显示了我的模式“编辑”表单。但是这里的主要问题是无论我选择哪一行,总是向我显示相同的

 <div id="editEmployeeModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="{{ route('products.update',$product->id) }}" method="POST">
            @csrf
            @method('PUT')

                <div class="modal-header">                      
                    <h4 class="modal-title">Edit Product</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">                    
                    <div class="form-group">
                        <label>Product number</label>
                        <input type="text" value="{{ $product->product_number }}" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Name</label>
                        <input type="text" value="{{ $product->name }}" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Detail</label>
                        <textarea class="form-control" required>{{ $product->detail }}</textarea>
                    </div>

                </div>
                <div class="modal-footer">
                    <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
                    <input type="submit" class="btn btn-info" value="Save">
                </div>
            </form>
        </div>
    </div>
</div>

在原始代码上:编辑布局是这样的

<a class="btn btn-primary" href="{{ route('products.edit',$product->id) }}">Edit</a>

2 个答案:

答案 0 :(得分:0)

它显示相同的形式,因为您有一个在foreach循环内调用的模态。

 <a href="#editEmployeeModal"  class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit">&#xE254;</i></a>
 <a href="#deleteEmployeeModal"  class="delete" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete">&#xE872;</i></a>

每次您都使用相同的信息一遍又一遍地调用相同的模式。您可以使用另一个页面来呈现表单,那样更容易。只需为每个CRUD函数创建一页,然后在循环中调用它即可。

如果您需要使用模式进行此操作,我建议您使用Ajax或某些JS框架来帮助您在循环和模式本身之间传递信息。

以下是可以帮助您的教程:https://medium.com/justlaravel/ajax-crud-operations-in-laravel-9def2483e1af

答案 1 :(得分:0)

是的,我们可以使用jquery函数通过该模式的“ id”打开特定模式:

$('#id-row').showModal();