自定义工具

在model-grid的头部默认有批量删除和刷新两个操作工具，如果有更多的操作需求，model-grid提供了自定义工具的功能,下面的示例添加一个性别分类选择的按钮组工具。

先定义工具类app/Admin/Extensions/Tools/UserGender.php：

  1. <?php
  3. namespace App\Admin\Extensions\Tools;
  5. use Encore\Admin\Admin;
  6. use Encore\Admin\Grid\Tools\AbstractTool;
  7. use Illuminate\Support\Facades\Request;
  9. class UserGender extends AbstractTool
  10. {
  11.     protected function script()
  12.     {
  13.         $url = Request::fullUrlWithQuery(['gender' => '_gender_']);
  15.         return <<<EOT
  17. $('input:radio.user-gender').change(function () {
  19.     var url = "$url".replace('_gender_', $(this).val());
  21.     $.pjax({container:'#pjax-container', url: url });
  23. });
  25. EOT;
  26.     }
  28.     public function render()
  29.     {
  30.         Admin::script($this->script());
  32.         $options = [
  33.             'all'   => 'All',
  34.             'm'     => 'Male',
  35.             'f'     => 'Female',
  36.         ];
  38.         return view('admin.tools.gender', compact('options'));
  39.     }
  40. }

视图admin.tools.gender文件为resources/views/admin/tools/gender.blade.php:

  1. <div class="btn-group" data-toggle="buttons">
  2.     @foreach($options as $option => $label)
  3.     <label class="btn btn-default btn-sm {{ \Request::get('gender', 'all') == $option ? 'active' : '' }}">
  4.         <input type="radio" class="user-gender" value="{{ $option }}">{{$label}}
  5.     </label>
  6.     @endforeach
  7. </div>

在model-grid引入这个工具：

  2. $grid->tools(function ($tools) {
  3.     $tools->append(new UserGender());
  4. });

在model-grid定义中接收到gender参数后，做好数据查询就可以了：

  1. if (in_array(Request::get('gender'), ['m', 'f'])) {
  2.     $grid->model()->where('gender', Request::get('gender'));
  3. }

可以参考上面的方式来添加自己的工具。

批量操作

目前默认实现了批量删除操作的功能，如果要关掉批量删除操作：

  1. $grid->tools(function ($tools) {
  2.     $tools->batch(function ($batch) {
  3.         $batch->disableDelete();
  4.     });
  5. });

如果要添加自定义的批量操作，可以参考下面的例子。

下面是扩展一个对文章批量发布的功能：

先定义操作类app/Admin/Extensions/Tools/ReleasePost.php：

  1. <?php
  3. namespace App\Admin\Extensions\Tools;
  5. use Encore\Admin\Grid\Tools\BatchAction;
  7. class ReleasePost extends BatchAction
  8. {
  9.     protected $action;
  11.     public function __construct($action = 1)
  12.     {
  13.         $this->action = $action;
  14.     }
  16.     public function script()
  17.     {
  18.         return <<<EOT
  20. $('{$this->getElementClass()}').on('click', function() {
  22.     $.ajax({
  23.         method: 'post',
  24.         url: '{$this->resource}/release',
  25.         data: {
  26.             _token:LA.token,
  27.             ids: selectedRows(),
  28.             action: {$this->action}
  29.         },
  30.         success: function () {
  31.             $.pjax.reload('#pjax-container');
  32.             toastr.success('操作成功');
  33.         }
  34.     });
  35. });
  37. EOT;
  39.     }
  40. }

看代码的实现，通过click操作发送一个post请求，把选中的行数据id通过数组的形式传给后端接口，后端接口拿到id列表和要修改的状态来更新数据，然后前端刷新页面(pjax reload)，并弹出toastr提示操作成功。

在model-grid中加入这个批量操作功能：

  1. $grid->tools(function ($tools) {
  2.     $tools->batch(function ($batch) {
  3.         $batch->add('发布文章', new ReleasePost(1));
  4.         $batch->add('文章下线', new ReleasePost(0));
  5.     });
  6. });

这样批量操作下拉按钮下面就会添加两个操作项，最后一步就是添加一个接口来处理批量操作的请求了，接口代码如下：

  2. class PostController extends Controller
  3. {
  4.     ...
  6.     public function release(Request $request)
  7.     {
  8.         foreach (Post::find($request->get('ids')) as $post) {
  9.             $post->released = $request->get('action');
  10.             $post->save();
  11.         }
  12.     }
  14.     ...
  15. }

然后添加路由指向上面的接口：

  1. $router->post('posts/release', 'PostController@release');

这样整个流程就完成了。