README

本包是Grid.js的Laravel集成，它使得在Laravel应用程序中创建数据网格变得简单，例如管理面板列表。它覆盖了Grid.js的基本后端功能，如搜索、排序和分页。

安装

您可以通过Composer安装此包

composer require wdev-rs/laravel-datagrid

安装Vue.js集成

npm install gridjs-vue

运行以下命令发布供应商文件

php artisan vendor:publish --provider="WdevRs\LaravelDatagrid\LaravelDatagridServiceProvider"

通过向您的app.js文件添加以下行注册DataGrid前端Vue.js组件

require('./vendor/laravel-datagrid/laravel-datagrid');

用法

本包的基础是\WdevRs\LaravelDatagrid\DataGrid\DataGrid类。此类用于定义数据网格的列和行为。虽然您可以直接从控制器中使用此类，但我建议扩展它并为每个数据网格创建单独的类。

class CategoriesDataGrid extends DataGrid
{

    /**
     * CategoriesDataGrid constructor.
     */
    public function __construct()
    {
        $this->query(Category::query())
            ->column('id', 'ID', null, 50)
            ->column('name', 'Name', function ($category) {
                return view('admin.categories.actions.edit_link', ['category' => $category])->render();
            })
    }
}

使用query方法您可以定义DataGrid的基本查询。它接受Laravel查询构建器对象。使用column方法定义DataGrid的列，参数如下：

• id - 数据库中字段的名称
• name - 应在数据网格列标题中显示的标签
• formatter - 可选，可调用的函数允许您格式化列的显示。如您从上面的示例中看到的，最优雅的方式可能是包含一个blade视图并渲染它。
• width - 可选，列的宽度

当DataGrid定义完成时，您可以将其添加到控制器中

    public function index(CategoriesDataGrid $dataGrid, Request $request)
    {
        return $dataGrid->render();
    }

如果未传递参数调用render方法，它将使用默认视图resources/views/vendor/laravel-datagrid/datagrid.blade.php，或者您可以传递自己的视图并在其中包含DataGrid blade文件。

    public function index(CategoriesDataGrid $dataGrid, Request $request)
    {
        return $dataGrid->render('admin.common.index');
    }

前端定制

DataGrid的前端组件位于resources/js/vendor/laravel-datagrid/components/DataGrid.vue。默认情况下，DataGrid包含一个行操作，即删除操作。此操作位于以下文件中：resources/js/vendor/laravel-datagrid/actions/delete.js

您可以通过基于现有操作创建更多自定义操作来扩展它。要将它们添加到数据网格中，扩展DataGrid.vue中的cols定义。

            cols: this.columns.map((col) => {col.formatter = (cell) => html(cell); return col;}).concat(
                [{
                    name: 'Actions',
                    sort: false,
                    width: 50,
                    formatter: (cell, row) => {
                        return h('div', {className: "text-center"},
                            deleteAction.call(this, row.cells[0].data,row.cells[1].data),
                            yourCustomAction.call(this, row.cells[0].data,row.cells[1].data)
                        )
                    }
                }]
            )

测试

composer test

变更日志

有关最近更改的更多信息，请参阅CHANGELOG

贡献

有关详细信息，请参阅CONTRIBUTING

安全

如果您发现任何安全相关的问题，请通过电子邮件daniel@wdev.rs而不是使用问题跟踪器。

致谢

• Daniel Werner
• 所有贡献者

许可

MIT许可（MIT）。有关更多信息，请参阅许可文件

Laravel Package Boilerplate

此包是用Laravel Package Boilerplate生成的。