camohub/laravel-datagrid

Laravel 数据网格

1.3.13 2021-08-25 16:05 UTC

README

Laravel 数据网格

这是 Laravel 模型的数据网格。

安装

composer install camohub/laravel-datagrid

描述

数据网格构造函数接受 Illuminate\Database\Eloquent\Builder 或 Illuminate\Database\Query\Builder 的实例作为数据源。

本包基于表单 GET 请求。整个表都是一个表单。如果你需要,可以简单地捕获提交事件。空输入在提交时通过 JavaScript 禁用,并自动从 URL 中删除。数据网格包含以下组输入

  • 排序输入 - 每个可排序字段都有自己的隐藏输入。点击可排序列后,JavaScript 将设置隐藏输入的值。如果值为空,则禁用隐藏输入。
  • 过滤输入 - 过滤输入在输入事件上触发表单提交。还有一个超时作为节流,等待另一个输入事件。此超时可以在 PHP 网格定义中全局设置 setJSFilterTimeout()。
  • 每页选择 - onchange 事件立即触发表单提交。
  • 页码 - 分页器页码参数也是隐藏输入。

此表单提交实现有一个小小的缺点。它会从 URL 中删除所有其他 GET 参数。但很容易修复。你可以通过 $grid->addGetParam('name') 设置所有必要的 GET 参数。

示例

控制器代码可以实现一个返回数据网格实例的方法。

public function getArticlesDatagrid()
{
    $grid = new Datagrid(Article::with('user'));

    $grid->addColumn('id')
        ->setSort();

    $grid->addColumn('title')
        ->setSort()
        ->setFilter(function($model, $value) {
            return $value ? $model->where('title', 'like', "%$value%") : $model;
        });

    $grid->addColumn('created_at', 'Created')
        // Needs valid js regexp pattern.
        ->setJSFilterPattern('\d{2}\.\d{2}\.\d{4} \d{2}:\d{2}')
        ->setRender(function($value, $item) {
            return '<b>' . $value->format('d.m.Y H:i') . '</b>';
        })
        // Turns off template html escaping.
        ->setNoEscape()
        ->setSort();

    $grid->addColumn('visible', 'Visible')
        ->setOutherClass(function($value, $row) {
            return $value ? 'bg-primary text-center' : 'bg-danger text-center';
        })
        ->setSelectFilter([0 => 'hidden', 1 => 'active'], 'all')
        ->setFilter(function ($model, $value) {
            return $model->where('visible', $value);
        });

    // HasOne relation
    $grid->addColumn('user.name', 'User');

    // ManyHasMany relation
    $grid->addColumn('user.roles', 'Roles')
        ->setRender(function($value, $item) {
            return $value->map( function($value) { return $value->name; } )->join(', ');
        });

    // TYPE_CUSTOM intended for content not related to model.
    $grid->addColumn('', '', Column::TYPE_CUSTOM)
        ->setNoEscape()
        ->setRender(function($value, $item) {
            return '
                <a href="' . route('admin.articles.edit', ['id' => $item->id]) . '">edit</a>
                <a href="' . route('admin.articles.visibility', ['id' => $item->id]) . '">visibility</a>
                <a href="' . route('admin.articles.delete', ['id' => $item->id]) . '" class="text-danger">delete</a>
            ';
        });

    return $grid;
}

模板可以看起来像这样

{{$grid->render()}}

选项

有两种类型的选项。全局数据网格选项和列特定选项。

数据网格选项

  • setDefaultSort() - 当没有其他排序过滤器时使用的排序回调。

  • setDefaultPerPage() - 真的设置了默认每页项目数量。

  • setPerPage() - 期望数组,包含如 [10, 25, 50, 100] 的下拉选项。

  • setOnEachSide() - 这是 Laravel 分页 onEachSide() 选项的上层包装器。

  • setTableClass() - 默认是 'table table-striped table-hover table-bordered';

  • setJSFilterTimeout() - 在输入事件上设置 JavaScript 超时。默认是 250ms。

  • setSubmitOnEnter() - 阻止输入事件上的提交,将等待按回车键提交。此选项可以设置整个网格或一个列。不影响排序、分页和每页选择。它们仍然会自动提交。

  • setGetParams() - 表单提交会从 URL 中删除不是表单一部分的所有 GET 参数。请求将只包含表单输入作为 GET 参数。setGetParams('paramName') 将包含所有必要的 GET 参数,这些参数应包含在所有数据网格 GET 请求中。

列选项

  • setRender() - 接受带有两个参数的回调函数 - 值和行。

  • setSort() - 接受空值以简单按字段名排序或接受两个参数的回调函数 - 查询构建器和排序值。

  • setFilter() - 接受带有两个参数的回调函数 - 查询构建器和过滤值。如果过滤值为 NULL 或空字符串,则不会调用过滤回调函数。其他值如 0 会调用过滤。

  • setFilterSelect() - 期望关联数组和一个选项提示参数。此函数在过滤字段中渲染选择元素。

  • setJSFilterPattern() - 接受字符串形式的 JS 正则表达式模式。如果值不匹配模式验证器,则将阻止请求,并将 .text-danger 类添加到输入字段。

  • setSubmitOnEnter() - 阻止输入事件上的提交,将等待按回车键提交。此选项可以设置整个网格或一个列。不影响排序、分页和每页选择。它们仍然会自动提交。

  • setFilterRender() - 允许您手动渲染过滤输入。请确保渲染的过滤输入具有 css 类 chgrid-filter。

  • setNoEscape() - 自定义渲染不会被转义。模板使用 {!! !!} 代替 {{}}。

  • setOutherClass() - 接受回调函数。如果需要为字段设置一些条件样式,回调函数将非常有用。回调函数将接收两个参数 - 值和行。

  • setOutherTitleClass - 接受字符串值。将为标题的 TH 元素设置 CSS 类。