将特定的数据行传递给模式（laravel 数据表插件）

Question

我有这个页面

我有这个模态

现在我想要做的是，当我单击包含“1011022”的 ID Cartão 的行的“Editar”按钮时，它应该显示如下：

具有属于该行的值

我该怎么做？我已经搜索了至少一个小时，但找不到任何可靠的解决方案

我的html代码如下：

@extends('admin.layouts.layout')
@section('content')
<!-- page script -->
<div class="wrapper row-offcanvas row-offcanvas-left">
    <!-- Right side column. Contains the navbar and content of the page -->
    <aside class="right-side">                
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                Lista de alunos
            </h1>
        </section>
        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">
                        </div> <!-- /.box-header -->
                        <div class="box-body table-responsive">
                            <button type="button" id="add_btn" class="btn btn-primary" data-toggle="modal" data-target="#addAluno">
                                <span class="glyphicon glyphicon-plus"></span>&nbsp;
                                Adicionar aluno
                            </button>

                            <br/><br/>

                            <!-- ADD MODAL SECTION -->
                            <div id="addAluno" class="modal fade" role="dialog">
                              <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">Adicionar aluno</h4>
                                  </div>
                                  <div class="modal-body">
                                    <form role="form">
                                     <div class="form-group">
                                        <label>ID do Cartão</label>
                                          <input type="text" class="form-control" id="id_cartao" placeholder="ID do Cartão"/>
                                      </div>
                                      <div class="form-group">
                                        <label>Nome do Aluno</label>
                                          <input type="text" class="form-control"
                                              id="nome_aluno" placeholder="Nome do Aluno"/>
                                      </div>
                                      <div class="form-group">
                                        <label>Email</label>
                                          <input type="email" class="form-control" id="email" placeholder="E-mail"/>
                                      </div>
                                      <div>
                                        <label>Triénio</label>
                                          <input type="text" class="form-control" id="trienio" placeholder="Triénio"/>
                                      </div>
                                  </div>
                                  <div class="modal-footer">
                                    <button type="button" class="btn btn-primary">Adicionar aluno</button>
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <!-- END OF THE ADD MODAL SECTION -->

                            <!-- EDIT MODAL SECTION -->
                            <div id="editAluno" class="modal fade" role="dialog">
                              <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">Editar aluno</h4>
                                  </div>
                                  <div class="modal-body">
                                    <form role="form">
                                     <div class="form-group">
                                        <label>ID do Cartão</label>
                                          <input type="text" class="form-control" id="id_cartao" placeholder="ID do Cartão" value=>
                                      </div>
                                      <div class="form-group">
                                        <label>Nome do aluno</label>
                                          <input type="text" class="form-control"
                                              id="nome_aluno" placeholder="Nome do Aluno"/>
                                      </div>
                                      <div class="form-group">
                                        <label>Email</label>
                                          <input type="email" class="form-control" id="email" placeholder="E-mail"/>
                                      </div>
                                      <div>
                                        <label>Triénio</label>
                                          <input type="text" class="form-control" id="trienio" placeholder="Triénio"/>
                                      </div>
                                  </div>
                                  <div class="modal-footer">
                                    <button type="button" class="btn btn-primary">Editar aluno</button>
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <!-- END OF THE EDIT MODAL SECTION -->

                            <table id="alunos_list" class="table table-bordered table-striped">
                                <thead>
                                    <tr>     
                                        <th>ID Cartão</th>
                                        <th>Nome</th>
                                        <th>E-mail</th>
                                        <th>Triénio</th>
                                        <th>Curso</th>
                                        <th>Ações</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <th>ID Cartão</th>
                                        <th>Nome</th>
                                        <th>E-mail</th>
                                        <th>Triénio</th>
                                        <th>Curso</th>
                                        <th>Ações</th>
                                    </tr>
                                </tfoot>
                                <tfoot>
                                </tfoot>
                            </table>
                        </div><!-- /.box-body -->
                    </div><!-- /.box -->
                </div>
            </div>
        </section><!-- /.content -->
    </aside><!-- /.right-side -->
</div><!-- ./wrapper -->
@endsection

@push('scripts')
<script>
        $(function() {
            $('#alunos_list').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{!! route('alunos.data') !!}',
                columns: [
                    { data: 'id_cartao', name: 'alunos.id_cartao' },
                    { data: 'nome', name: 'alunos.nome' },
                    { data: 'email', name: 'alunos.email' },
                    { data: 'trienio.data_trienio', name: 'trienio.data_trienio' },
                    { data: 'trienio.curso.curso', name: 'trienio.curso.curso' },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ],

                initComplete: function () {
                    this.api().columns().every(function () {
                        var column = this;
                        if(column[0][0] == 5){
                            // intentionally empty, we want to exclude column 5 from searching
                        } else {
                            var input = document.createElement("input");
                            $(input).appendTo($(column.footer()).empty())
                            .on('keypress', function () {
                                column.search($(this).val(), false, false, true).draw();
                            });
                        }
                    });
                }
            });
        });
</script>
<script>

</script>
@endpush

Answer 1

在您的编辑器按钮中，将数据目标放置到目标编辑器的模式中。之后，当它显示/显示时，我们会监听 modal 的 show 事件，如下所示：

HTML

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editAluno">
   <span class="glyphicon glyphicon-plus"></span>&nbsp;Edit
</button>

Js

您可以选择show.bs.modal 或shown.bs.modal，建议您只听show.bs.modal，因为您希望在单击按钮后立即填充数据。通知relatedTarget：

// listening for show event of editAluno's modal
$( '#editAluno' ).on( 'show.bs.modal', function (e) {
    var target = e.relatedTarget;
    // get values for particular rows
    var tr = $( target ).closest( 'tr' );
    var tds = tr.find( 'td' );

    // put values into editor's form elements
    // tds.eq(0).val() -- 1st column
    $( '#id_cartao' ).val( tds.eq(0).val() );
    // tds.eq(1).val() -- 2nd column and so on.
    // same goes to others element
});