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

Posted 2023-03-14

【中文标题】添加按钮以在 Chumper Datatable 行中触发引导模式

【英文标题】：Add button to trigger bootstrap modal inside Chumper Datatable row

【发布时间】：2014-10-25 16:07:13

【问题描述】：

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

这是我开始将其转换为数据表之前的刀片语法

<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() 

我知道我可以通过函数传递一些 HTML，使用 addColumn()，但我的问题是如何呈现触发模式的删除按钮？

【参考方案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 控制器

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();