头部和脚部
<h1>头部和脚部</h1>
<p>数据表格支持往头部和脚部两个区块填入你想要的内容</p>
<pre><code class="language-php">$grid-&gt;header(function ($collection) {
return 'header';
});
$grid-&gt;footer(function ($collection) {
return 'footer';
});</code></pre>
<p>其中闭包函数的参数<code>$collection</code>为<code>Illuminate\Support\Collection</code>类实例，是当前页表格数据，下面是两个不同场景的使用举例</p>
<h2>头部</h2>
<pre><code class="language-php">$grid-&gt;header(function ($collection) use ($grid) {
$query = Model::query();
// 拿到表格筛选 where 条件数组进行遍历
$grid-&gt;model()-&gt;getQueries()-&gt;unique()-&gt;each(function ($value) use (&amp;$query) {
if (in_array($value['method'], ['paginate', 'get', 'orderBy', 'orderByDesc'], true)) {
return;
}
$query = call_user_func_array([$query, $value['method']], $value['arguments'] ?? []);
});
// 查出统计数据
$data = $query-&gt;get();
// 自定义组件
return new Card($data);
});</code></pre>
<p>自定义头部展示的组件实现</p>
<pre><code class="language-php">&lt;?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-&gt;data = $data;
}
public function script()
{
return &lt;&lt;&lt;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-&gt;script());
return view('...', ['data' =&gt; $this-&gt;data])-&gt;render();
}
}</code></pre>
<h2>脚部</h2>
<p>一个比较常见的场景是在数据表格的脚部显示统计信息，比如在订单表格的脚部加入收入统计，可以参考下面的代码实现：</p>
<pre><code class="language-php">$grid-&gt;footer(function ($collection) use ($grid) {
$query = Model::query();
// 拿到表格筛选 where 条件数组进行遍历
$grid-&gt;model()-&gt;getQueries()-&gt;unique()-&gt;each(function ($value) use (&amp;$query) {
if (in_array($value['method'], ['paginate', 'get', 'orderBy', 'orderByDesc'], true)) {
return;
}
$query = call_user_func_array([$query, $value['method']], $value['arguments'] ?? []);
});
// 查出统计数据
$data = $query-&gt;get();
return &quot;&lt;div style='padding: 10px;'&gt;总收入 ： $data&lt;/div&gt;&quot;;
});</code></pre>
<p>如果有比较复杂的脚部需要显示，也可以使用视图对象或者封装成一个类来实现。</p>