头部和脚部

数据表格支持往头部和脚部两个区块填入你想要的内容

  1. $grid->header(function ($collection) {
  2. return 'header';
  3. });
  4. $grid->footer(function ($collection) {
  5. return 'footer';
  6. });

其中闭包函数的参数$collectionIlluminate\Support\Collection类实例,是当前页表格数据,下面是两个不同场景的使用举例

头部

  1. $grid->header(function ($collection) use ($grid) {
  2. $query = Model::query();
  3. // 拿到表格筛选 where 条件数组进行遍历
  4. $grid->model()->getQueries()->unique()->each(function ($value) use (&$query) {
  5. if (in_array($value['method'], ['paginate', 'get', 'orderBy', 'orderByDesc'], true)) {
  6. return;
  7. }
  8. $query = call_user_func_array([$query, $value['method']], $value['arguments'] ?? []);
  9. });
  10. // 查出统计数据
  11. $data = $query->get();
  12. // 自定义组件
  13. return new Card($data);
  14. });

自定义头部展示的组件实现

  1. <?php
  2. use Illuminate\Contracts\Support\Renderable;
  3. use Dcat\Admin\Admin;
  4. class Card implements Renderable
  5. {
  6. public static $js = [
  7. 'xxx/js/card.min.js',
  8. ];
  9. public static $css = [
  10. 'xxx/css/card.min.css',
  11. ];
  12. protected $data;
  13. public function __construct($data)
  14. {
  15. $this->data = $data;
  16. }
  17. public function script()
  18. {
  19. return <<<JS
  20. console.log('所有JS脚本都加载完了');
  21. $('xxx').card();
  22. JS;
  23. }
  24. public function render()
  25. {
  26. // 在这里可以引入你的js或css文件
  27. Admin::js(static::$js);
  28. Admin::css(static::$css);
  29. // 需要在页面执行的JS代码
  30. // 通过 Admin::script 设置的JS代码会自动在所有JS脚本都加载完毕后执行
  31. Admin::script($this->script());
  32. return view('...', ['data' => $this->data])->render();
  33. }
  34. }

脚部

一个比较常见的场景是在数据表格的脚部显示统计信息,比如在订单表格的脚部加入收入统计,可以参考下面的代码实现:

  1. $grid->footer(function ($collection) use ($grid) {
  2. $query = Model::query();
  3. // 拿到表格筛选 where 条件数组进行遍历
  4. $grid->model()->getQueries()->unique()->each(function ($value) use (&$query) {
  5. if (in_array($value['method'], ['paginate', 'get', 'orderBy', 'orderByDesc'], true)) {
  6. return;
  7. }
  8. $query = call_user_func_array([$query, $value['method']], $value['arguments'] ?? []);
  9. });
  10. // 查出统计数据
  11. $data = $query->get();
  12. return "<div style='padding: 10px;'>总收入 : $data</div>";
  13. });

如果有比较复杂的脚部需要显示,也可以使用视图对象或者封装成一个类来实现。