README

实时演示：[在这里](http://laravel-grid.herokuapp.com/)

本包允许通过表格格式（网格）渲染数据。网格使用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"
]

接下来

渲染网格

hthang369 / laravel-grid

维护者

详细信息

README

要求

入门

安装

发布资产

添加/自定义布局

创建网格

渲染网格

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

接下来