自动将数据填充到选定数据表行的模态内容

时间:2016-04-27 11:58:54

标签: javascript php jquery laravel bootstrap-modal

我的视图中有一个任务列表,该列表使用Datatables和每个记录上的编辑按钮进行渲染,该记录链接打开模态。我想要做的是每当我点击数据表行中记录上的按钮时,当我的模态显示时,该行中的数据应该填充在我的模态中。

我的模态将作为编辑记录。到目前为止,这是我的代码:

查看:

<div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>My Tasks</small></h5>
                            <div class="ibox-tools">

                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>


                                <a class="close-link">
                                    <i class="fa fa-times"></i>
                                </a>

                            </div>
                        </div>

                        <!-- Modal -->
                        <div id="myModal" 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">My Task</h4>
                              </div>
                              <div class="modal-body">
                                <p>Some text in the modal.</p>
                              </div>
                              <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                              </div>
                            </div>

                          </div>
                        </div>

                        <div class="ibox-content">
                            <table id="MyTasks" class="table table-striped table-bordered" cellspacing="0" width="100%">

                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Description</th>
                                        <th>Start</th>
                                        <th>End</th>
                                        <th>Added By</th>
                                        <th>Date Created</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>

                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
@endsection
@section('tasks-index')
<script>
$(document).ready(function(){
    $('#MyTasks').DataTable({
        processing: true,
        serverSide: true,
        ajax: 'tasks-list',
        columns: [
            {data: 'id', name: 'tasks.id'},
            {data: 'task_description', name: 'tasks.task_description'},
            {data: 'start_timestamp', name: 'tasks.start_timestamp'},
            {data: 'end_timestamp', name: 'tasks.end_timestamp'},
            {data: 'name', name: 'users.name'},
            {data: 'created_at', name: 'tasks.created_at'},
            {data: 'status', name: 'tasks.status'},
            {data: 'action', name: 'action'}
        ]
    });

}); 
</script>           
@endsection

控制器:

public function getTasksList()
{
  if(Auth::check() && Auth::user()->access_level == 1)
  {
    $tasks = Task::join('users', 'tasks.added_by', '=', 'users.id')
        ->select([
          'tasks.id',
          'tasks.task_description',
          'tasks.start_timestamp',
          'tasks.end_timestamp',
          'tasks.status',
          'users.name'
          ]);
  }
  else
  {
    $tasks = Task::join('users', 'tasks.added_by', '=', 'users.id')
        ->select([
          'tasks.id',
          'tasks.task_description',
          'tasks.start_timestamp',
          'tasks.end_timestamp',
          'tasks.status',
          'users.name',
          'tasks.created_at'
          ])->where('tasks.assigned_to', '=', Auth::user()->id);
  }

   return Datatables::of($tasks)
   ->addColumn('action', function ($tasks) {
            return '<a href="#" class="btn btn-xs btn-primary" data-toggle="modal" data-target="#myModal"><i class="glyphicon glyphicon-edit" data-href="tasks/'.$tasks->id.'"></i> Edit</a>';
        })->make(true);     
}

我知道我必须以某种方式将任务ID传递给模态并制作ajax来查询数据?但我很困惑如何做到这一点。

0 个答案:

没有答案