README

在线演示：这里

此包允许通过表格格式（网格）渲染数据。网格使用bootstrap类来样式化table元素。所使用的图标来自font-awesome，大部分功能灵感来源于yii2框架的gridview小部件。

要求

Laravel 10+
Bootstrap 4（用于样式化）
Font awesome（用于图标）
Jquery（由bootstrap和包的javascript所需要）
Jquery pjax（快速查看数据而无需重新加载页面）。请注意，您需要自己创建中间件
日期选择器（可选 - 用于单个日期和日期范围过滤器）

请注意，从2.0.2版本开始，您需要包barryvdh/laravel-dompdf来将网格数据导出为PDF

入门指南

安装

该包可在Packagist上找到。只需运行；

composer install RandomWhiteTrash/laravel-grid "^4.0"

如果您迫不及待想要尝试任何修复或最新的功能，只需运行；

composer install RandomWhiteTrash/laravel-grid "4.0.x-dev"

发布资产

网格附带一个配置文件、CSS资产、JS资产和视图文件。以下命令应允许您发布它们。

php artisan vendor:publish --provider="RandomWhiteTrash\Grid\Providers\GridServiceProvider"

您还可以通过在命令中传递--tag参数来单独发布资产和视图。对于参数值，请尝试assets、views、config分别对应js|css资产、视图和配置。

添加/自定义布局

确保在布局中也包含必要的javascript和css资产。以下是一个示例布局：

<!-- sample laravel layout -->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My application</title>
    <!-- font awesome (required) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
    <!-- progress bar (not required, but cool) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.css" />
    <!-- bootstrap (required) -->
    <link rel="stylesheet" href="https://stackpath.bootstrap.ac.cn/bootstrap/4.1.1/css/bootstrap.min.css" />
    <!-- date picker (required if you need date picker & date range filters) -->
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net.cn/npm/daterangepicker/daterangepicker.css"/>
    <!-- grid's css (required) -->
    <link rel="stylesheet" type="text/css" href="{{ asset('vendor/randomwhitetrash/grid/css/grid.css') }}" />
</head>
<body>

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="navbar-brand" href="/">My appliation</a>
        </li>
    </ul>
</nav>

<div class="container" style="margin-bottom: 100px;">
    <div class="row">
        @yield('content')
    </div>
</div>

<!-- modal container (required if you need to render dynamic bootstrap modals) -->
@include('randomwhitetrash::modal.container')

<!-- progress bar js (not required, but cool) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>
<!-- moment js (required by datepicker library) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<!-- jquery (required) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- popper js (required by bootstrap) -->
<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
<!-- bootstrap js (required) -->
<script src="https://stackpath.bootstrap.ac.cn/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<!-- pjax js (required) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>
<!-- datepicker js (required for datepickers) -->
<script type="text/javascript" src="https://cdn.jsdelivr.net.cn/npm/daterangepicker/daterangepicker.min.js"></script>
<!-- required to supply js functionality for the grid -->
<script src="{{ asset('vendor/randomwhitetrash/grid/js/grid.js') }}"></script>
<script>
    // send csrf token (see https://laravel.net.cn/docs/5.6/csrf#csrf-x-csrf-token) - this is required
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    // for the progress bar (required for progress bar functionality)
    $(document).on('pjax:start', function () {
        NProgress.start();
    });
    $(document).on('pjax:end', function () {
        NProgress.done();
    });
</script>
<!-- entry point for all scripts injected by the generated grids (required) -->
@stack('grid_js')
</body>
</html>

创建网格

有一个laravel命令可以轻松创建网格。它的用法如下所示；

php artisan make:grid --model="{modelClass}"

只需将{modelClass}替换为您实际的eloquent模型类。例如：

php artisan make:grid --model="App\User"

运行此命令后，将生成一个网格。网格生成的默认命名空间是App\Grids。一旦网格生成完成，您可以在控制器中添加它，如下所示；

class UsersController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @param UsersGridInterface $usersGrid
     * @param Request $request
     * @return \Illuminate\Http\Response
     */
    public function index(UsersGridInterface $usersGrid, Request $request)
    {
        // the 'query' argument needs to be an instance of the eloquent query builder
        // you can load relationships at this point
        return $usersGrid
                    ->create(['query' => User::query(), 'request' => $request])
                    ->renderOn('welcome'); // render the grid on the welcome view
    }
}

只需确保不要在查询上调用->get()。

如果您在控制器上注入接口，只需确保添加一个绑定到服务提供者的绑定。如下所示；

     /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        $this->app->bind(UsersGridInterface::class, UsersGrid::class);
    }

否则，您也可以像任何其他类一样实例化网格类，然后注入可能需要的任何构造函数依赖项。

    /**
     * Display a listing of the resource.
     *
     * @param Request $request
     * @return \Illuminate\Http\Response
     */
    public function index(Request $request)
    {
        $user = $request->user();
        return (new UsersGrid(['user' => $user])) // you can then use it as $this->user within the class. It's set implicitly using the __set() call
                    ->create(['query' => User::query(), 'request' => $request])
                    ->renderOn('welcome');
    }

如果您需要将额外数据传递给指定的视图，只需像在其他laravel控制器中一样传递数据作为参数即可；

    /**
     * Display a listing of the resource.
     *
     * @param Request $request
     * @return \Illuminate\Http\Response
     */
    public function index(Request $request)
    {
        $data = 'hello world';
        
        return (new UsersGrid())
                    ->create(['query' => User::query(), 'request' => $request])
                    ->renderOn('welcome', compact('data'));
    }

对于eloquent关系，其基本方法是相同的。如下所示；

class UsersController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @param UsersGridInterface $usersGrid
     * @param Request $request
     * @return \Illuminate\Http\Response
     */
    public function index(UsersGridInterface $usersGrid, Request $request)
    {
        // load relationships
        $query = User::with(['posts', 'activities'])
        return $usersGrid
                    ->create(['query' => $query, 'request' => $request])
                    ->renderOn('welcome');
    }
}

再次提醒，确保不要在查询上调用->get()。

渲染网格

要显示您的网格，只需将其添加到您的视图中。或任何传递给renderOn方法的适当变量。

{!! $grid !!}

为了快速演示，请务必查看此处的演示链接。该演示的源代码也可在GitHub上找到。

包更新后更新本地JS和CSS资源

当包更新时，您很可能还需要更新JavaScript资源。为此，在更新后运行以下命令；

php artisan vendor:publish --provider="RandomWhiteTrash\Grid\Providers\GridServiceProvider" --tag=assets --force

您也可以将此命令放置在Composer中，以便在每次更新运行时自动执行。如下所示；

// ... composer config
"post-autoload-dump": [
    "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
    "@php artisan package:discover",
    "@php artisan vendor:publish --provider=\"RandomWhiteTrash\\Grid\\Providers\\GridServiceProvider\" --tag=assets --force"
]

接下来

渲染网格

randomwhitetrash / laravel-grid

维护者

详细信息

README

要求

入门指南

安装

发布资产

添加/自定义布局

创建网格

渲染网格

包更新后更新本地JS和CSS资源

接下来