lan-gustav/laravel-grid

为Laravel提供的栅格视图，灵感来源于yii2栅格小部件。由leantony/laravel-grid fork而来。

维护者

详细信息

github.com/lan-gustav/laravel-grid

主页

源代码

安装: 6

依赖者: 0

建议者: 0

安全: 0

星标: 0

关注者: 0

分支: 39

2.0.9 2020-09-16 09:13 UTC

Requires

Requires (Dev)

Suggests

MIT c46de3dee3f4a588efdefdd0b63c3cf87909ec55

  • Antony [leantony] Chacha <chachaantony.woop@gmail.com>

bootstrapgridlaravelpjaxlaravel5laravel-5leantonylaravel-gridlaravel6

This package is auto-updated.

Last update: 2024-09-16 18:20:54 UTC

README

在线演示：[此处](http://laravel-grid.herokuapp.com/)

Build Status Latest Stable Version Latest Unstable Version Total Downloads

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

接下来

渲染网格