README

本包是可与Vuetable 组件协同工作的后端组件。

安装

1. 从您的终端运行 composer require 命令

    composer require "santigarcor/laravel-vuetable:0.0.*"
   

2. 如果您已在 config/app.php 中禁用了包发现

   • 在 providers 数组中添加

       Vuetable\VuetableServiceProvider::class,
     

   • 在 aliases 数组中添加

       'Vuetable' => Vuetable\VuetableFacade::class,
     

用法

您的控制器请求应包含以下数据

{
    sort: '', // column_name|asc or column_name|desc
    page: 1,
    per_page: 10,
    searchable: [
        // This array should have the names of the columns in the database
    ],
    filter: '' //The text that is going to be used to filter the data
}

例如，让我们创建一个包含用户及其公司的表格。然后在 JavaScript 中，我们应该有

data = {
    sort: 'users.name|asc',
    page: 1,
    per_page: 10,
    searchable: [ // This means the 'users.name', 'users.email' and 'companies.name' columns can be filtered through the 'filter' attribute in the data.
        'users.name',
        'users.email',
        'companies.name',
    ]
}

axios.get('http://url.com/users-with-companies', data)

在控制器中，我们可以提供 Eloquent

class UsersDataController extends Controller
{
    public function index() {

        $query = User::select([
                'users.id',
                'users.name',
                'users.email',
                'companies.name as company',
                'companies.company_id'
            ])
            ->leftJoin('companies', 'users.company_id', '=', 'companies.id');

        return Vuetable::of($query)
            ->editColumn('company', function ($user) {
                if ($user->company) {
                    return $user->company;
                }

                return '-';
            })
            ->addColumn('urls', function ($user) {
                return [
                    'edit' => route('users.edit', $user->id),
                    'delete' => route('users.destroy', $user->id),
                ];
            })
            ->make();
    }
}

或 Collection

class UsersDataController extends Controller
{
    public function index() {

        $query = new Collection([
             ['name' => 'John Doe', 'email' => 'john@mail.com'],
             ['name' => 'Jane Doe', 'email' => 'jane@mail.com'],
             ['name' => 'Test John', 'email' => 'test@mail.com']
        ]);

        return Vuetable::of($query)
            ->editColumn('name', function ($user) {
                return Str::lower($user['name']);
            })
            ->addColumn('urls', function ($user) {
                return [
                    'edit' => route('users.edit', $user['id']),
                    'delete' => route('users.destroy', $user['id']),
                ];
            })
            ->make();
    }
}

这个控制器将返回

{
  "current_page": 1,
  "from": 1,
  "to": 10,
  "total": 150,
  "per_page": 10,
  "last_page": 15,
  "first_page_url": "http://url.com/users-with-companies?page=1",
  "last_page_url": "http://url.com/users-with-companies?page=15",
  "next_page_url": "http://url.com/users-with-companies?page=2",
  "prev_page_url": null,
  "path": "http://url.com/users-with-companies",
  "data": [
    {
      "id": 1,
      "name": "Administrator",
      "email": "administrator@app.com",
      "company": "-",
      "company_id": null,
      "urls": {
        "edit": "http://url.com//users/1/edit",
        "delete": "http://url.com//users/1"
      },
    },
    {
      "id": 2,
      "name": "Company Administrator",
      "email": "company_administrator@app.com",
      "company": "-",
      "company_id": null,
      "urls": {
        "edit": "http://url.com//users/2/edit",
        "delete": "http://url.com//users/2"
      },
      ...
    }
  ],
}

Laravel Vuetable 支持什么？

使用 Eloquent Builder，您可以

• 根据模型列进行过滤/排序。
• 进行连接并按它们进行过滤/排序。
• 定义分页长度。
• 添加列。
• 编辑列（如果列有定义的转换，则不起作用）。

使用 Collection，您可以

• 根据模型列进行过滤/排序。
• 定义分页长度。
• 添加列。
• 编辑列。

许可协议

Laravel Vuetable 是开源软件，许可协议为 MIT 许可证。

贡献

请在问题页面报告您发现的问题。欢迎提交拉取请求。