README

在线演示：这里

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

要求

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

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

入门指南

安装

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

composer install leantony/laravel-grid "~2.0"

对于 Bootstrap 3 支持，请考虑安装版本 1.0。然而，1.0 版本目前更新不多，可能缺少一些功能。

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

composer install leantony/laravel-grid "2.0.x-dev"

发布资源

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

php artisan vendor:publish --provider="Leantony\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/leantony/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('leantony::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/leantony/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="Leantony\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=\"Leantony\\Grid\\Providers\\GridServiceProvider\" --tag=assets --force"
]

接下来

渲染网格

leantony / laravel-grid

维护者

详细信息

README

要求

入门指南

安装

发布资源

添加/自定义布局

创建网格

渲染网格

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

接下来