Php 使用模态作为模板进行编辑/删除_Php_Laravel_Bootstrap Modal_Laravel Blade

Php 使用模态作为模板进行编辑/删除

php laravel

Php 使用模态作为模板进行编辑/删除,php,laravel,bootstrap-modal,laravel-blade,Php,Laravel,Bootstrap Modal,Laravel Blade,我在一个表中显示了一些行（每个行都是相关模型数据库表的一行）。对于每一行，我都会显示一个按钮，显示一个请求确认删除它的模式 [ [ 模态代码是叶片模板对于一个只有一行的表，我没有问题。我可以将id作为变量传递给模式。但是我不知道如何发送所选的一行（从逻辑上讲，它包括带有$subnet var最后一个值的模式）实现这一目标的正确方法是什么 ... @foreach($subnets as $subnet) <tr> <td>{{$subnet->name}}

我在一个表中显示了一些行（每个行都是相关模型数据库表的一行）。对于每一行，我都会显示一个按钮，显示一个请求确认删除它的模式

[ [

模态代码是叶片模板

对于一个只有一行的表，我没有问题。我可以将id作为变量传递给模式。但是我不知道如何发送所选的一行（从逻辑上讲，它包括带有$subnet var最后一个值的模式）

实现这一目标的正确方法是什么


...
@foreach($subnets as $subnet)
<tr>
  <td>{{$subnet->name}}</td>
  <td><button type="button" class="btn-xs btn-primary">Edit</button><button type="button" class="btn-xs btn-primary" data-toggle="modal" data-target="#deleteSubnet">Delete</button></td>
</tr>
@endforeach
@include('inc.modals.modal_deleteSubnet',['subnet' => $subnet])
...





<div class="modal fade" id="deleteSubnet" tabindex="-1" role="dialog" aria-labelledby="deleteSubnetLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="deleteSubnetLabel">Delete subnet</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <form action="/subnets/{{$subnet->id}}" method="POST">
                    @csrf
                    @method('DELETE')
                    <p>Are you sure you want to delete this subnet ({{$subnet->name}})?<p>                          
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <span class="pull-right">
                    <input class="btn btn-primary" type="submit" value="Delete">
                </span>
                </form>
            </div>
        </div>
    </div>
</div>


  [1]: https://i.stack.imgur.com/tSquD.png
  [2]: https://i.stack.imgur.com/gGhSO.png


...
@foreach（$subnets作为$subnet）
{{$subnet->name}
编辑删除
@endforeach
@包括（'inc.modals.modal_deleteSubnet'，['subnet'=>$subnet]）
...
删除子网
&时代；
@csrf
@方法（'DELETE'）
是否确实要删除此子网（{{$subnet->name}}）？
取消
[1]: https://i.stack.imgur.com/tSquD.png
[2]: https://i.stack.imgur.com/gGhSO.png

在表单中添加绑定id

@foreach（$subnets作为$subnet）
{{$subnet->name}
编辑
删除
@endforeach

在表单中添加一个“id”以进入jquery。

在表单中添加一个绑定id
@foreach（$subnets作为$subnet）
{{$subnet->name}
编辑
删除
@endforeach

在表单中添加一个“id”以进入jquery。您可能想查看Bootstrap的网站
在您的情况下，这可以转化为：
将data id=“{{$subnet->id}}”
添加到按钮中
你可能想看看Bootstrap的网站
在您的情况下，这可以转化为：
将data id=“{{$subnet->id}}”
添加到按钮中
没有任何javascript解决方案：
<button ...  data-target="#deleteSubnet-{{ $subnet->id }}">Delete</button>
         ....

<div class="modal fade" id="deleteSubnet-{{ $subnet->id }}" ... >
         ....
</div>

删除
....
....

在没有任何javascript解决方案的情况下，应该可以正常工作
：
<button ...  data-target="#deleteSubnet-{{ $subnet->id }}">Delete</button>
         ....

<div class="modal fade" id="deleteSubnet-{{ $subnet->id }}" ... >
         ....
</div>

<div class="modal fade" id="AddEditModal" role="dialog" ng-show="showEditModal">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button" ng-click="loadDetails()">
                    ×
                </button>
                <h4 class="modal-title" ng-show="newType">Employee - New</h4>
                <h4 class="modal-title" ng-hide="newType">Employee - Edit</h4>
            </div>
            <form class="form-horizontal" name="employeeForm" ng-submit="saveEmployee(detail,employeeForm.$valid)">
                <div class="modal-body">
                    <p>
                        <div ng-repeat="error in errors">
                            <div class="alert alert-danger">
                                <button class="close" data-dismiss="alert">× </button>
                                <i class="fa fa-times-circle"></i>
                                {{error}}
                            </div>
                        </div>
                    </p>
                    <div class="row">
                        <div class="form-group required" ng-class="{ 'has-error' : employeeForm.EmpCode.$invalid && !employeeForm.EmpCode.$pristine }">
                            <label class="col-sm-4 control-label" for="EmpCode"><b>Employee Code:</b> </label>
                            <div class="col-sm-6">
                                <input class="form-control" type="text" name="EmpCode" ng-model="detail.EmpCode" required>
                                <p ng-show="employeeForm.EmpCode.$invalid && !employeeForm.EmpCode.$pristine" class="help-block">Employee is required.</p>
                            </div>
                        </div>
                        <div class="form-group required" ng-class="{ 'has-error' : employeeForm.FirstName.$invalid && !employeeForm.FirstName.$pristine }">
                            <label class="col-sm-4 control-label" for="FirstName"><b>First Name :</b> </label>
                            <div class="col-sm-6">
                                <input class="form-control" type="text" name="FirstName" ng-model="detail.FirstName" required>
                                <p ng-show="employeeForm.FirstName.$invalid && !employeeForm.FirstName.$pristine" class="help-block">First Name is required.</p>
                            </div>
                        </div>
                        <div class="form-group required" ng-class="{ 'has-error' : employeeForm.LastName.$invalid && !employeeForm.LastName.$pristine }">
                            <label class="col-sm-4 control-label" for="LastName"><b>Last Name :</b> </label>
                            <div class="col-sm-6">
                                <input class="form-control" type="text" name="LastName" ng-model="detail.LastName" required>
                                <p ng-show="employeeForm.LastName.$invalid && !employeeForm.LastName.$pristine" class="help-block">Last Name is required.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success" type="submit" ng-show="newType" ng-disabled="employeeForm.$invalid">
                        <i class="fa fa-save"></i>
                        Save
                    </button>
                    <button class="btn btn-success" type="submit" ng-hide="newType" ng-disabled="employeeForm.$invalid">
                        <i class="fa fa-save"></i>
                        Save Changes
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="removeFormDetails()"><i class="fa clip-close-3"></i>Close</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!--Delete Section-->
<div class="modal fade" id="deleteModal" role="dialog" ng-show="showDeleteModal">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Delete</h4>
            </div>
            <div class="modal-body">
                <p>Do you really want to delete this User?</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-bricky" type="button" ng-click="deleteEmployee(detail)">
                    <i class="fa fa-trash-o"></i>
                    Delete
                </button>
                <button class="btn btn-green" data-dismiss="modal" type="button" ng-click="removeFormDetails()">
                    <i class="fa clip-close-3"></i>
                    Close
                </button>
            </div>
        </div>
    </div>
</div>

删除
....
....

应该可以正常工作

<div class="modal fade" id="AddEditModal" role="dialog" ng-show="showEditModal">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button" ng-click="loadDetails()">
                    ×
                </button>
                <h4 class="modal-title" ng-show="newType">Employee - New</h4>
                <h4 class="modal-title" ng-hide="newType">Employee - Edit</h4>
            </div>
            <form class="form-horizontal" name="employeeForm" ng-submit="saveEmployee(detail,employeeForm.$valid)">
                <div class="modal-body">
                    <p>
                        <div ng-repeat="error in errors">
                            <div class="alert alert-danger">
                                <button class="close" data-dismiss="alert">× </button>
                                <i class="fa fa-times-circle"></i>
                                {{error}}
                            </div>
                        </div>
                    </p>
                    <div class="row">
                        <div class="form-group required" ng-class="{ 'has-error' : employeeForm.EmpCode.$invalid && !employeeForm.EmpCode.$pristine }">
                            <label class="col-sm-4 control-label" for="EmpCode"><b>Employee Code:</b> </label>
                            <div class="col-sm-6">
                                <input class="form-control" type="text" name="EmpCode" ng-model="detail.EmpCode" required>
                                <p ng-show="employeeForm.EmpCode.$invalid && !employeeForm.EmpCode.$pristine" class="help-block">Employee is required.</p>
                            </div>
                        </div>
                        <div class="form-group required" ng-class="{ 'has-error' : employeeForm.FirstName.$invalid && !employeeForm.FirstName.$pristine }">
                            <label class="col-sm-4 control-label" for="FirstName"><b>First Name :</b> </label>
                            <div class="col-sm-6">
                                <input class="form-control" type="text" name="FirstName" ng-model="detail.FirstName" required>
                                <p ng-show="employeeForm.FirstName.$invalid && !employeeForm.FirstName.$pristine" class="help-block">First Name is required.</p>
                            </div>
                        </div>
                        <div class="form-group required" ng-class="{ 'has-error' : employeeForm.LastName.$invalid && !employeeForm.LastName.$pristine }">
                            <label class="col-sm-4 control-label" for="LastName"><b>Last Name :</b> </label>
                            <div class="col-sm-6">
                                <input class="form-control" type="text" name="LastName" ng-model="detail.LastName" required>
                                <p ng-show="employeeForm.LastName.$invalid && !employeeForm.LastName.$pristine" class="help-block">Last Name is required.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success" type="submit" ng-show="newType" ng-disabled="employeeForm.$invalid">
                        <i class="fa fa-save"></i>
                        Save
                    </button>
                    <button class="btn btn-success" type="submit" ng-hide="newType" ng-disabled="employeeForm.$invalid">
                        <i class="fa fa-save"></i>
                        Save Changes
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="removeFormDetails()"><i class="fa clip-close-3"></i>Close</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!--Delete Section-->
<div class="modal fade" id="deleteModal" role="dialog" ng-show="showDeleteModal">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Delete</h4>
            </div>
            <div class="modal-body">
                <p>Do you really want to delete this User?</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-bricky" type="button" ng-click="deleteEmployee(detail)">
                    <i class="fa fa-trash-o"></i>
                    Delete
                </button>
                <button class="btn btn-green" data-dismiss="modal" type="button" ng-click="removeFormDetails()">
                    <i class="fa clip-close-3"></i>
                    Close
                </button>
            </div>
        </div>
    </div>
</div>

×
新员工
员工-编辑

× 
{{error}}

员工代码：
需要员工
名字：
需要名字
姓氏：
必须输入姓氏
拯救
保存更改
接近
&时代；
删除
是否确实要删除此用户
删除
接近

×
新员工
员工-编辑

× 
{{error}}

员工代码：
需要员工
名字：
需要名字
姓氏：
必须输入姓氏
<div class="modal fade" id="AddEditModal" role="dialog" ng-show="showEditModal">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button" ng-click="loadDetails()">
                    ×
                </button>
                <h4 class="modal-title" ng-show="newType">Employee - New</h4>
                <h4 class="modal-title" ng-hide="newType">Employee - Edit</h4>
            </div>
            <form class="form-horizontal" name="employeeForm" ng-submit="saveEmployee(detail,employeeForm.$valid)">
                <div class="modal-body">
                    <p>
                        <div ng-repeat="error in errors">
                            <div class="alert alert-danger">
                                <button class="close" data-dismiss="alert">× </button>
                                <i class="fa fa-times-circle"></i>
                                {{error}}
                            </div>
                        </div>
                    </p>
                    <div class="row">
                        <div class="form-group required" ng-class="{ 'has-error' : employeeForm.EmpCode.$invalid && !employeeForm.EmpCode.$pristine }">
                            <label class="col-sm-4 control-label" for="EmpCode"><b>Employee Code:</b> </label>
                            <div class="col-sm-6">
                                <input class="form-control" type="text" name="EmpCode" ng-model="detail.EmpCode" required>
                                <p ng-show="employeeForm.EmpCode.$invalid && !employeeForm.EmpCode.$pristine" class="help-block">Employee is required.</p>
                            </div>
                        </div>
                        <div class="form-group required" ng-class="{ 'has-error' : employeeForm.FirstName.$invalid && !employeeForm.FirstName.$pristine }">
                            <label class="col-sm-4 control-label" for="FirstName"><b>First Name :</b> </label>
                            <div class="col-sm-6">
                                <input class="form-control" type="text" name="FirstName" ng-model="detail.FirstName" required>
                                <p ng-show="employeeForm.FirstName.$invalid && !employeeForm.FirstName.$pristine" class="help-block">First Name is required.</p>
                            </div>
                        </div>
                        <div class="form-group required" ng-class="{ 'has-error' : employeeForm.LastName.$invalid && !employeeForm.LastName.$pristine }">
                            <label class="col-sm-4 control-label" for="LastName"><b>Last Name :</b> </label>
                            <div class="col-sm-6">
                                <input class="form-control" type="text" name="LastName" ng-model="detail.LastName" required>
                                <p ng-show="employeeForm.LastName.$invalid && !employeeForm.LastName.$pristine" class="help-block">Last Name is required.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success" type="submit" ng-show="newType" ng-disabled="employeeForm.$invalid">
                        <i class="fa fa-save"></i>
                        Save
                    </button>
                    <button class="btn btn-success" type="submit" ng-hide="newType" ng-disabled="employeeForm.$invalid">
                        <i class="fa fa-save"></i>
                        Save Changes
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="removeFormDetails()"><i class="fa clip-close-3"></i>Close</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!--Delete Section-->
<div class="modal fade" id="deleteModal" role="dialog" ng-show="showDeleteModal">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Delete</h4>
            </div>
            <div class="modal-body">
                <p>Do you really want to delete this User?</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-bricky" type="button" ng-click="deleteEmployee(detail)">
                    <i class="fa fa-trash-o"></i>
                    Delete
                </button>
                <button class="btn btn-green" data-dismiss="modal" type="button" ng-click="removeFormDetails()">
                    <i class="fa clip-close-3"></i>
                    Close
                </button>
            </div>
        </div>
    </div>
</div>