README

Laravel语义化UI表格构建器。

版本兼容性

安装

安装包

composer require laravolt/suitable

服务提供者

对于Laravel >= 5.5，请跳过此步骤。

Laravolt\Suitable\ServiceProvider::class,

外观

对于Laravel >= 5.5，请跳过此步骤。

'Suitable'  => Laravolt\Suitable\Facade::class,

用法

基础

{!! Suitable::source(User::all())
->columns([
    \Laravolt\Suitable\Columns\Numbering::make('No'),
    ['header' => 'Nama', 'field' => 'name'],
    ['header' => 'Email', 'field' => 'email'],
])
->render() !!}

列定义

字段

{!! Suitable::source(User::all())
->columns([
    ['header' => 'Email', 'field' => 'email'],
    ['header' => 'Bio', 'field' => 'profile.bio'], // nested attribute
])
->render() !!}`

视图

{!! Suitable::source(User::all())
->columns([
    ['header' => 'Address', 'view' => 'components.address'],
])
->render() !!}`

views/components/address.blade.php

<address>
  Address:<br>
  {{ $data->address_1 }}<br>
  {{ $data->address_2 }}<br>
  {{ $data->city }}, {{ $data->state }}
</address>

原始数据

{!! Suitable::source(User::all())
->columns([
    [
        'header' => 'Roles', 
        'raw' => function($data){
            // do anything here and don't forget to return String
            return $data->roles->implode('name', ', '); // output: "role1, role2, role3"
        }
    ],
])
->render() !!}`

ColumnInterface

{!! Suitable::source(User::all())
->columns([
    new \App\Columns\StatusColumn('Status'),
])
->render() !!}

合约

<?php
namespace Laravolt\Suitable\Columns;

interface ColumnInterface
{
    public function header();

    public function headerAttributes();

    public function cell($cell, $collection, $loop);

    public function cellAttributes($cell);

    public function sortable();
}

实现

statusColumn.php

<?php

namespace App\Columns;

use Laravolt\Suitable\Columns\ColumnInterface;

class StatusColumn implements ColumnInterface
{
    protected $header;

    public function __construct($header)
    {
        $this->header = $header;
    }

    public function header()
    {
        return $this->header;
    }

    public function cell($cell, $collection, $loop)
    {
        return sprintf("<div class='ui label'>%s</div>", $cell->status);
    }

    public function headerAttributes()
    {
        return [];
    }

    public function cellAttributes($cell)
    {
        return [];
    }
}

高级用法

自动检测

<?php

namespace App\Http\Controllers;

use App\User;
use Illuminate\Routing\Controller;
use Laravolt\Suitable\Plugins\Pdf;
use Laravolt\Suitable\Plugins\Spreadsheet;
use Laravolt\Suitable\Tables\BasicTable;

class SuitableController extends Controller
{
    public function __invoke()
    {
        $table = (new BasicTable(new User()));

        return $table->view('etalase::example.suitable');
    }
}

自定义表格视图

表格视图定义

<?php

namespace App\Table;

use Laravolt\Suitable\Columns\Date;
use Laravolt\Suitable\Columns\DateTime;
use Laravolt\Suitable\Columns\Id;
use Laravolt\Suitable\Columns\Numbering;
use Laravolt\Suitable\Columns\Text;
use Laravolt\Suitable\TableView;

class UserTable extends TableView
{
    protected function columns()
    {
        return [
            Numbering::make('No'),
            Id::make('id'),
            Text::make('name'),
            Text::make('email'),
            Date::make('created_at'),
            DateTime::make('updated_at'),
        ];
    }
}

<?php

namespace Laravolt\Etalase\Http\Controllers;

use App\User;
use Illuminate\Routing\Controller;
use App\Table\UserTable;
use Laravolt\Suitable\Plugins\Pdf;
use Laravolt\Suitable\Plugins\Spreadsheet;

class SuitableController extends Controller
{
    public function __invoke()
    {
        $users = User::autoSort()->paginate(5);
        $userTable = new UserTable($users);

        $table = $userTable
            ->plugins([
                (new Pdf('users.pdf')),
                (new Spreadsheet('users.xls')),
            ]);

        return $table->view('etalase::example.suitable');
    }
}

内置列

1. Laravolt\Suitable\Columns\Avatar
2. Laravolt\Suitable\Columns\Boolean
3. Laravolt\Suitable\Columns\Checkall
4. Laravolt\Suitable\Columns\Date
5. Laravolt\Suitable\Columns\DateTime
6. Laravolt\Suitable\Columns\Id
7. Laravolt\Suitable\Columns\Image
8. Laravolt\Suitable\Columns\Numbering
9. Laravolt\Suitable\Columns\Raw
10. Laravolt\Suitable\Columns\RestfulButton
11. Laravolt\Suitable\Columns\Text
12. Laravolt\Suitable\Columns\View

路线图

• 将TableView重命名为Table
• 将工具栏重命名为Segment\Item
• 将DropdownFilter重命名为DropdownLink