README

这是向用户展示表格数据的简单方式。

截图

功能

• 使用 Illuminate\Database\Eloquent\Builder 显示带数据的表格
• 使用 Closure 设置列的自定义值
• 分页
• 更改页面大小
• 按列排序
• 按列筛选（文本输入，下拉菜单）
• 创建您自己的筛选器
• 完整的搜索输入（从列表中的文本输入搜索值）

安装

添加 composer 包

composer require bubooon/simple-tables

在 config/app.php 中注册提供者

Bubooon\SimpleTables\SimpleTableServiceProvider::class

复制资源

php artisan vendor:publish --tag=simple-tables

添加 js 到 app.js

...
require('./simpletables');
...

添加 css 到 app.sass

...
@import 'simple-tables';

编译

npm run dev

在布局或页面中添加代码以注册表格的 jQuery 插件。

{!! $simpletable ?? '' !!}

Simple Tables 的标记基于 Twitter Bootstrap 4，但您需要自行包含这些样式，如果需要的话。

使用方法

你好世界

$provider = new BuilderDataProvider((new User)->newQuery());
$grid = new SimpleTable($provider,['id','email','created_at','updated_at']);
echo $grid->render();

设置分页，默认排序和可排序的字段

$provider = new BuilderDataProvider($query, [
    'pagination' => [
        'pageSize' => 25
    ],
    'fieldsList' => ['id', 'email', 'status', 'age', 'created_at'],
    'sort' => [
        'id' => 'DESC'
    ]
]);

添加列筛选器

$provider->filter('email', 'email', 'like'); // serach substring
$provider->filter('was_found', 'was_found'); // strict search
$provider->filter('transaction_id', 'transaction_id', 'is_null'); //0 - IS NULL, 1 - IS NOT NULL, null - nothing

设置全文搜索字段

$fields = ['email', 'description', 'first_name', 'last_name'];
$provider->fullSearch($fields);

添加您自己的筛选器

if ($last_update = request('date_created')) {
    switch ($last_update) {
        case 1:
            $provider->whereRaw('str_to_date(result.response ->> "$**.LastUpdatedDate", \'["%d/%m/%Y %T"]\') > now() - INTERVAL 1 WEEK');
            break;
        case 2:
            $provider->whereRaw('str_to_date(result.response ->> "$**.LastUpdatedDate", \'["%d/%m/%Y %T"]\') > now() - INTERVAL 1 MONTH');
            break;
    }
}

设置表格中的字段

$table = new SimpleTable($provider, [
    'id', //just show value with defautl sorts by this column
    [
        'attribute' => 'email',
        'sort' => false, //remove ability to sort by this column
        'filter' => true, //add input[type=text] filter for this column 
        'label' => 'User email', //set custom header of column,
        'style' => 'width:250px' //css style for column
    ],
    [
        'attribute' => 'status',
        'filter' => [ //add dropdown filter
            '' => '',
            1 => 'Available',
            0 => 'Not available'
        ],
        'value' => function($row){
            return $row->status ? 'available' : 'not available';
        }
    ]
], [
    'fullSearch' => true, //add full search field
    'pageSizes' => [10, 25, 50, 100], //set available sizes of page,
    'showFooter' => false //hide table footer
]);

计划中的功能

• ArrayDataProvider
• 带有示例的在线演示
• 支持单页上的多张表
• 更多自定义

许可证

本项目采用 MIT 许可证 - 有关详细信息，请参阅 LICENSE.md 文件。