README

Metronic datatable

此包允许您将 datatables 作为插件使用，通过 AJAX 调用来在管理面板中执行 CRUD 操作。

要求

PHP >= 5.6
Laravel >= 5.4

此外，此包还需要一些其他包

jQuery >= 1.9
jQuery blockUI : http://malsup.com/jquery/block/
jQuery input mask : https://npmjs.net.cn/package/inputmask
Bootstrap >= 3 : https://npmjs.net.cn/package/bootstrap
Bootstrap 日期时间选择器
Bootstrap 选择器和 select2
MomentJS : https://npmjs.net.cn/package/moment
Toastr : https://npmjs.net.cn/package/toastr
Metronic 主题 : http://keenthemes.com/
Font awesome : https://npmjs.net.cn/package/font-awesome
Datatables : https://npmjs.net.cn/package/datatables

安装

更新 composer.json 文件

{
    "require": {
        "thaile/metronic-datatable": "dev-master",
    }
}

从项目根目录运行以下命令

composer update

注意：此步骤为可选。您也可以将包的配置和视图文件发布到您的应用中

$ php artisan vendor:publish --provider="ThaiLe\MetronicDatatable\MetronicDatatableServiceProvider"

使用

在您的控制器中，您可以定义具有列和操作的表格，如下所示

public function index(Request $request)
{
    $table = [
        'title' => 'News Overview',
        'id' => 'news-datatable',
        'ajax' => [
            'src' => 'news.more', // route name
        ],
        'columns' => [
            'title' => [
                'text' => 'Title',
                'orderable' => true,
            ],
            // ...
        ],
        'actions' => [
            'show'    => [
                'route' => 'news.show', // route name
                'role' => 'news.read',
            ],
            // ...
        ],

        // ...
    ];

    return view('news.list', [
        'table' => $table,
    ]);
}

// get data via ajax
public function more(Request $request)
{
    $news = News::paginate(15);
    $total = $news->total();

    return json_encode([
        'data'            => $news->getCollection()->toArray(),
        'recordsTotal'    => $total,
        'recordsFiltered' => $total,
    ]);
}

然后，在您的视图中，只需包含表格

@include('metronic-datatable::list')

不要忘记定义相关路由。

配置

表格配置

$table = [
    'title' => 'News Overview',

    // allow to filter items by their status (pending, publish)
    // this option will display [All | Trashed] bar in top of the table
    'filter_navigation' => true,

    // allow to display checkboxes in the table
    'checkbox_column' => true,

    // set default sort column for the table
    'order_default' => [
        'column' => 'available_date_only',
        'order' => 'desc', // or 'asc'
    ],
];

列配置

这是特定列的可能配置

$table = [
    'title' => 'News Overview',
    'id' => 'news-datatable',
    'ajax' => [
        'src' => 'news.more', // route name
    ],
    'columns' => [
        'title' => [
            'text' => 'Title',
            'orderable' => true,      // allow sort on this column
            'width' => 10%,           // set the width of this column
            'class' => 'td-text-left' // set the column classes

            // you can also display pre-formatted html in a column
            // for example: display status check or un-check icon
            'html' => '<i class="fa fa-check font-green-jungle tooltips" data-placement="top" data-original-title="Publish"></i>',
            // or display an image
            // 'html' => '<img src="' . $user->avatar . '"/>',
        ],
        // ...
    ],
    // ...
];

允许对特定列进行筛选。目前，系统仅允许这些类型的筛选：输入，下拉选择，日期时间选择器。

$table = [
    'title' => 'News Overview',
    'id' => 'news-datatable',
    'ajax' => [
        'src' => 'news.more', // route name
    ],
    'columns' => [
        'title' => [
            'text' => 'Title',

            // input filter
            'filter' => [
                'type' => 'input',
            ],
        ],

        'categories' => [
            'text' => 'Categories',

            // select dropdown filter
            'filter' => [
                'type' => 'select',
                'data' => $categories, // this data is queried from db or is fetched in another sources
            ],
        ],

        'available_date_only' => [
            'text'   => 'Date and time',

            // date time filter
            'filter' => [
                'type' => 'date',

                // you also can set the date time format here
                // for example: if current language is Germany, they will have the date time format like: d/m/Y H:i
                'format' => 'd/m/Y H:i',
            ],
        ],
        // ...
    ],
    // ...
];

操作列配置。目前，系统仅支持以下按钮类型：显示，编辑，垃圾箱，恢复，删除，解除 IP 地址，分配角色。

$table = [
    'title' => 'News Overview',
    // ...

    'actions' => [
        'add'    => [
            'name'  => 'Add new',     // button text
            'route' => 'news.show',   // route name
        ],
        // ...
    ],
];

批量操作配置

您可以为特定表格配置批量操作（例如：批量垃圾箱，批量恢复，批量删除），如下所示

public function index(Request $request)
{
    $table = [
        'title' => 'News Overview',
        // ...

        'bulk_actions' => [
            [
                'name'   => 'bulk_trash',
                'text'   => 'Bulk trash items',
                'route'  => 'news.bulk_trash', // route name
                'method' => 'post'
            ],
            [
                'name'   => 'bulk_restore',
                'text'   => 'Bulk restore items',
                'route'  => 'news.bulk_restore', // route name
                'method' => 'post'
            ],
            [
                'name'   => 'bulk_delete',
                'text'   => 'Bulk delete items',
                'route'  => 'news.bulk_delete', // route name
                'method' => 'post'
            ],
        ],
    ];

    return view('news.list', [
        'table' => $table,
    ]);
}

变更日志

修复升级到 Metronic 5 后的复选框未确定问题

thaile / metronic-datatable

维护者

详细信息

README

Metronic datatable

目录

要求

安装

使用

配置

表格配置

列配置

批量操作配置

变更日志