头部和脚部

未匹配的标注
本文档最新版为 2.x,旧版本可能放弃维护,推荐阅读最新版!

头部和脚部

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

$grid->header(function ($collection) {
    return 'header';
});

$grid->footer(function ($collection) {
    return 'footer'; 
});

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

头部

$grid->header(function ($collection) use ($grid) {
    $query = Model::query();

    // 拿到表格筛选 where 条件数组进行遍历
    $grid->model()->getQueries()->unique()->each(function ($value) use (&$query) {
        if (in_array($value['method'], ['paginate', 'get', 'orderBy', 'orderByDesc'], true)) {
            return;
        }

        $query = call_user_func_array([$query, $value['method']], $value['arguments'] ?? []);
    });

    // 查出统计数据
    $data = $query->get();

    // 自定义组件
    return new Card($data);
});

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

<?php

use Illuminate\Contracts\Support\Renderable;
use Dcat\Admin\Admin;

class Card implements Renderable
{
    public static $js = [
        'xxx/js/card.min.js',
    ];
    public static $css = [
        'xxx/css/card.min.css',
    ];

    protected $data;

    public function __construct($data) 
    {
        $this->data = $data;
    }

    public function script()
    {
        return <<<JS
        console.log('所有JS脚本都加载完了');
        $('xxx').card();
JS;        
    }

    public function render()
    {
        // 在这里可以引入你的js或css文件
        Admin::js(static::$js);
        Admin::css(static::$css);

        // 需要在页面执行的JS代码
        // 通过 Admin::script 设置的JS代码会自动在所有JS脚本都加载完毕后执行
        Admin::script($this->script());

        return view('...', ['data' => $this->data])->render();
    }
}

脚部

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

$grid->footer(function ($collection) use ($grod) {
    $query = Model::query();

    // 拿到表格筛选 where 条件数组进行遍历
    $grid->model()->getQueries()->unique()->each(function ($value) use (&$query) {
        if (in_array($value['method'], ['paginate', 'get', 'orderBy', 'orderByDesc'], true)) {
            return;
        }

        $query = call_user_func_array([$query, $value['method']], $value['arguments'] ?? []);
    });

    // 查出统计数据
    $data = $query->get();

    return "<div style='padding: 10px;'>总收入 : $data</div>";
});

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

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
贡献者:2
讨论数量: 1
发起讨论 只看当前版本


webeditor
Dcat 如何在底部显示统计当前页某一列值得总和?
0 个点赞 | 8 个回复 | 问答 | 课程版本 2.x