README

本包为 React Dynamic Data Table 组件提供 Laravel API 端点响应器。

安装

composer require langleyfoxall/react-dynamic-data-table-laravel-api

用法

首先，在您的 API 路由文件中创建一个新的路由，用于数据表响应，并将其指向控制器。

在此控制器方法中，创建一个新的 DataTableResponder，传入您希望返回数据的模型和提供的 Request 对象实例。您可以使用 query 方法指定查询的更改（例如排序或过滤）。如果您想在数据返回前以某种方式修改数据，例如更改属性值或添加自定义属性，可以利用 collectionManipulator。您还可以使用 setPerPage 方法更改每页显示的记录数。

以下是一个示例用法。

use App\User;
use Illuminate\Http\Request;
use LangleyFoxall\ReactDynamicDataTableLaravelApi\DataTableResponder;

class UsersController extends Controller
{
    public function dataTable(Request $request)
    {
        return (new DataTableResponder(User::class, $request))
            ->query(function($query) {                                   // Optional, default: none
                $query->where('name', 'like', 'B%');
            })
            ->collectionManipulator(function (Collection $collection) {  // Optional, default: none
                $collection->map(function($user) {
                    $user->name = title_case($user->name);
                });
            })
            ->setPerPage(10)                                             // Optional, default: 15
            ->respond();
    }
}

在您的前端代码中，现在可以使用 React Dynamic Data Table 包的 AjaxDynamicDataTable 组件来显示数据表。之前定义的 API 路由应作为 apiUrl 属性传递给此组件。

以下是一个示例用法。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import AjaxDynamicDataTable from "@langleyfoxall/react-dynamic-data-table/dist/AjaxDynamicDataTable";

export default class Example extends Component {
    render() {
        return (
            <div className="container">
                <AjaxDynamicDataTable apiUrl={'/api/users/data-table'}/>
            </div>
        );
    }
}

if (document.getElementById('example')) {
    ReactDOM.render(<Example />, document.getElementById('example'));
}

没有模型

有时您需要创建一个没有模型的数据表（数据是一种聚合类型，因此模型不适用）。

use App\User;
use Illuminate\Http\Request;
use LangleyFoxall\ReactDynamicDataTableLaravelApi\DataTableResponder;

class UsersController extends Controller
{
    public function dataTable(Request $request)
    {
        return (new DataTableResponder(DB::table('users')->select(['id', 'name']), $request))
            ->query(function($query) {                                   // Optional, default: none
                $query->where('name', 'like', 'B%');
            })
            ->collectionManipulator(function (Collection $collection) {  // Optional, default: none
                $collection->map(function($user) {
                    $user->name = title_case($user->name);
                });
            })
            ->setPerPage(10)                                             // Optional, default: 15
            ->respond();
    }
}