Question

我正在Laravel中构建一个CRUD产品/类别系统。每个类别都有许多产品，每个产品都属于一个类别。现在，在索引产品文件中，我在表格中列出了所有产品，并显示了它们的数据和类别。

这是产品控制器：

public function index()
{

    // $products = Product::all();

    $products = Product::orderBy('id')->paginate(15);
    return view('product.index', compact('products'));
}

这是我的刀片视图：

<div class="row">
            <div class="col-3">
                <h1>Products List</h1>
            </div>
            <div class="col-3">
                <div class="form-group">
                    <label for="exampleFormControlSelect1"><h2>Select Category</h2></label>
                    <select class="form-control" name="product_category" id="exampleFormControlSelect1">
                        {{-- @foreach ($categoryList as $category) --}}
                            {{-- <option>{{$category->slug}}</option> --}}
                         {{-- @endforeach --}}
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="table-responsive">
            <table class="table align-items-center table-hover">
            <thead class="thead-light">
                <tr>
                    <th scope="col">Id</th>
                    <th scope="col">Category</th>
                    <th scope="col">Name</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($products as $product)
                    <tr>
                        <td>
                            <a href="{{ route('product.show', $product->id)}}">{{ $product->id }}</a>
                        </td>
                        <td>
                            @if(!empty($product->category))
                                {{ $product->category->name }}
                            @else
                                {{ 'No Category' }}
                            @endif
                        </td>
                        <td>
                            <a href="{{ route('product.show', $product->id)}}">{{ $product->name }}</a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <hr>
    {{ $products->render() }}
</div>

现在，在注释掉下拉菜单的地方，我想为用户提供选择单个类别的可能性，以便根据所选类别对产品进行过滤。最佳和最快的实现方法是什么？我检查了Laravel Scopes，但这看起来很复杂。另外，应该在控制器或API中设置此“搜索”功能吗？很抱歉给我带来混乱，但是我不明白我可以遵循的最佳方法。

Answer 1

我建议您使用JavaScript库DataTable（https://datatables.net/）。您所需要做的就是：

运行：

npm install datatables.net-bs4

然后，在您的bootstrap.js中的try语句中：

require('datatables.net-bs4');

在您的app.scss中

@import '~datatables.net-bs4/css/dataTables.bootstrap4.min.css';

然后运行

npm run dev

然后，转到视图并在底部添加脚本

$(document).ready( function () {
$('#table_id').DataTable();
} );

您现在要做的就是将“ table_id”添加到表的ID中。

您可以通过在head标记内通过cdn声明js库来跳过前四个步骤。

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">

<script type="text/javascript" charset="utf8"src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>

Answer 2

最后，我发现这种方法最简单：

在我的productController中，我使用Eager加载获取产品及其类别

    if (request()->has('category')) {
        $products = App\Product::whereHas('category', function($query){
            $query->where('slug', request('category'));
        })->paginate(15);
        // dd($products);

    }

然后，在视图（product.index）中，创建一个包含不同类别的锚标记的下拉菜单。后端看到请求（url）带有“类别”，该类别被设置为单个类别的子弹，因此可以从DB中相应地获取元素，然后在视图上对其进行过滤。我还按ID订购它们并进行了分页。

            <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="triggerId" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Categories
                </button>
                <div class="dropdown-menu">
                    @foreach ($categoryList as $category) 
                        <div class="dropdown-item">
                            <a href="/product/?category={{$category->slug}}">{{$category->slug}}</a>
                        </div>
                    @endforeach
                </div>
            </div>

// to paginate them
    {{ $products->render() }}

如果有人有更好的方法，请随时发表评论！

如何在Blade视图中实现Laravel搜索系统

2 个答案: