Question

我有一个表显示从数据库中获取的数据，现在我正在尝试实现包Chumper/Datatable。我已经成功实现了它，除了我的按钮所在的列（每行有两个可以执行的操作。）

这是我开始为Datatables转换它之前的刀片语法

<table class="table table-hover table-striped table-bordered">
<thead>
    <tr>
        <th>SR Number</th>
        <th>Requested at</th>
        <th>Requested To</th>
        <th>Requested From</th>
        <th></th>
        <th></th>
    </tr>
</thead>
<tbody>
    @foreach ($pending_dr as $key => $dr)
        <tr>
            <td>{{ HTML::linkRoute('requisition-slips.show', $dr['delivery_request_number'], $dr['id']) }}</td>
            <td>{{ $dr['created_at'] }}</td>
            <td>{{ $dr['delivery_from'] }}</td>
            <td>{{ $dr['delivery_to'] }}</td>
            <td>{{ HTML::linkRoute('requisition-slips.edit', 'Edit',array($dr['id']), array('class' => 'btn btn-default')) }}</td>
            <td>
                {{ Form::button('<span class="glyphicon glyphicon-trash"></span> Cancel', array('name'=>'cancelDR', 'class' => 'btn btn-danger btn-block', 'type' => 'button',  'data-toggle' => 'modal', 'data-target' => '#cancel-DR-'.$dr['id'])) }}
            </td>
            {{ Form::open(array('route' => array('requisition-slips.destroy', $dr['id']), 'method' => 'delete')) }}
                <div class="modal fade" id='cancel-DR-{{ $dr['id'] }}'>
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title">Cancel RS</h4>
                      </div>
                      <div class="modal-body">
                        <p>Are you sure want to cancel RS#<b>{{ $dr['delivery_request_number'] }}</b></p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
                        {{ Form::submit('Yes', array('name'=>'cancelDR', 'class' => 'btn btn-danger')) }}
                      </div>
                    </div><!-- /.modal-content -->
                  </div><!-- /.modal-dialog -->
                </div><!-- /.modal -->
            {{ Form::close() }}
        </tr>
    @endforeach
</tbody>
</table>

如您所见，第一列链接到单个行的视图，然后它还有一个编辑按钮，指向编辑视图。最后是一个调用引导模式的删除按钮，用户可以通过该按钮确认是否删除该记录。

当我尝试实现Chumper数据表时，我使用了两个路由，其中一个将提供视图，另一个路径用于ajax请求

这是ajax请求路由的方法

public function ajaxPending()
{
    return Datatable::collection($this->delivery_request->all(array('id','delivery_request_number','created_at', 'delivery_from', 'delivery_to','delivery_status')))
        ->showColumns('delivery_request_number','created_at', 'delivery_from', 'delivery_to', 'Edit')
        // ->addColumn('View', function($model) {
        //    return '<button class="btn btn-danger">View</button>';
        // })
        ->addColumn('delivery_request_number', function($model) {
            return '<a href='.$model->id.'>'.$model->delivery_request_number.'</a>';
        })
        ->addColumn('Edit', function($model) {
            return '<a href='.$model->id.'/edit class="btn btn-default">Edit</a>';
        })
        ->addColumn('Delete', function($model) {
            // Add HTML code of button
            $button =
            '<button name="cancelDR" class="btn btn-danger btn-block" type="button" data-toggle="modal" data-target="#cancel-DR-"'.$model->id.'><span class="glyphicon glyphicon-trash"></span> Cancel</button>';

            return $button.$modal;
        })
        ->searchColumns('delivery_request_number','created_at', 'delivery_from', 'delivery_to','delivery_status')
        ->orderColumns('delivery_request_number','created_at', 'delivery_from', 'delivery_to','delivery_status')
        ->make();
}

查看

{{ Datatable::table()
    ->addColumn('RS#','Requested At', 'Requested to', 'Deliver from', 'Edit', 'Delete')       // these are the column headings to be shown
    ->setUrl(route('api.ajax'))   // this is the route where data will be retrieved
    ->render() 
}}

我知道我可以使用addColumn()传递一些带有该功能的HTML，但我的问题是如何渲染触发模态的删除按钮？

Answer 1

管理好了解决这个问题。我的回答可能不是解决这个问题的最佳方法，但这个答案应该有效。

在视图上呈现数据表

{{ Datatable::table()
    ->addColumn('RS#','Requested At', 'Requested to', 'Deliver from', 'Edit', 'Delete')
    ->setUrl(route('api.ajax'))
    ->render() }}

<强> routes.php文件

Route::get('api/ajax', array(
    'as'   => 'api.ajax',
    'uses' => 'DeliveryRequestsController@ajax'
));

DeliveryRequests Controller

public function ajax()
    {
        return Datatable::query($this->delivery_request->ajaxDeliveryRequests('Pending'))
            ->showColumns('delivery_request_number','created_at', 'delivery_from', 'delivery_to')
            ->addColumn('delivery_request_number', function($model) {
                return '<a href='.$model->id.'>'.$model->delivery_request_number.'</a>';
            })
            ->addColumn('Edit', function($model) {
                return '<a href='.$model->id.'/edit class="btn btn-default">Edit</a>';
            })
            ->addColumn('Delete', function($model) {
                $modal =
                    '<div class="modal fade" id="cancel-DR-'.$model->id.'">
                        '.Form::open(array("route" => array("requisition-slips.destroy", $model->id), "method" => "delete")).'
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                        <h4 class="modal-title">Cancel RS</h4>
                                    </div>
                                    <div class="modal-body">
                                        <p>Are you sure want to cancel RS#<b>'.$model->delivery_request_number.'</b></p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
                                        <button type="submit" class="btn btn-danger" name="cancelDR">Yes</button>
                                    </div>
                                </div><!-- /.modal-content -->
                            </div><!-- /.modal-dialog -->
                        '.Form::close().'
                    </div><!-- /.modal -->';

                return Form::button('<span class="glyphicon glyphicon-trash"></span> Cancel', array('name'=>'cancelDR', 'class' => 'btn btn-danger btn-block', 'type' => 'button',  'data-toggle' => 'modal', 'data-target' => '#cancel-DR-'.$model->id)).$modal;
            })
            ->searchColumns('delivery_request_number','created_at', 'delivery_from', 'delivery_to')
            ->orderColumns('delivery_request_number','created_at', 'delivery_from', 'delivery_to')
            ->make();
    }

添加按钮以在Chumper Datatable行中触发bootstrap模式

1 个答案: