README

安装

Composer

执行以下命令以获取包的最新版本：

composer require lykegenes/laravel-table-view

Laravel

在您的 config/app.php 文件的 providers 数组末尾添加 Lykegenes\TableView\Providers\TableViewServiceProvider::class,

'providers' => [
    ...
    Lykegenes\TableView\Providers\TableViewServiceProvider::class,
],

使用方法

创建表格视图

创建一个表格视图类；这将允许您配置您的表格。

<?php

namespace App\TableViews;

use Lykegenes\TableView\AbstractTableView;

class DemoTableView extends AbstractTableView
{
    public function getApiUrl()
    {
        return '/demo-api';
    }

    public function build()
    {
        $this->addColumn('Nom', 'name', [
                'sortable',
            ])
            ->addColumn('Adresse', 'address', [
                'sortable',
            ])
            ->addColumn('Date', 'date', [
                'sortable',
            ])
            ->addTemplateColumn('Tag', 'columns.locationTags')
            ->addTemplateColumn('Operation', 'columns.operations');

        $this->setDefaultSort('date');
    }
}

在视图中显示表格

在TableView实例上调用render()方法将编译并渲染它。您应该在包含{!! !!} blade语句的Blade视图中调用此方法，以防止HTML转义。以下是一个完整的Blade模板示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Demo</title>

        <!-- Element-UI Stylesheet -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/1.1.6/theme-default/index.css" />
    </head>
    <body>
        <div id="app" class="content">

            {!! $demoTableView->render() !!}

        </div>

        <!-- Include Vue, Element-UI and Axios -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/1.1.6/index.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.min.js"></script>

        <!-- The table scripts will be added to this stack -->
        @stack('table-view-templates')
        @stack('table-view-scripts')

        <!-- Your Vue instance for this page -->
        <script type="text/javascript">
            new Vue({
                el: '#app',
            });
        </script>

    </body>
</html>

设置API端点

需要几个步骤来支持搜索和排序功能。为此，我们使用Andersao的"Laravel 5 Repositories"。

class ApiDemoController extends Controller
{
    protected $users;

    public function __construct(UserRepository $users)
    {
        $this->users = $users;
        $this->users->setPresenter(UserPresenter::class);
    }

    public function demoApi(Request $request)
    {
        $sort = $request->input('sort', 'name');
        $order = $request->input('order', 'asc');

        $this->users->orderBy($sort, $order);

        if ($request->has('search')) {
            $this->users->pushCriteria(new \Lykegenes\TableView\Criteria\SearchCriteria(['name', 'email'], $request->input('search')));
        }

        return $this->users->paginate($request->input('limit', 15));
    }
}

鸣谢

Patrick Samson

许可协议

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

lykegenes / laravel-table-view

维护者

详细信息