在加载电线时保持 Laravel Powergrid 表的第一行可见

Question

我正在使用 Laravel Powergrid，并且添加了wire:loading 指令，以便在执行表操作（例如，页面更改、每页值更新、过滤和搜索）时显示骨架加载器。

在这些操作期间，thead 始终可见，但我还想在加载表格时保持 tbody 内的第一个 tr （包含过滤器/搜索行）可见。目标是防止它在这些操作触发的任何刷新或加载期间被隐藏。

这是我正在使用的代码的简化版本：

@props([
    'theme' => null,
    'readyToLoad' => false,
    'items' => null,
    'lazy' => false,
    'tableName' => null,
])
<div @isset($this->setUp['responsive']) x-data="pgResponsive" @endisset>
    <table
        id="table_base_{{ $tableName }}"
        class="table power-grid-table {{ data_get($theme, 'table.tableClass') }}"
        style="{{  data_get($theme, 'tableStyle') }}"
    >
        <thead
            class="{{ data_get($theme, 'table.theadClass') }}"
            style="{{ data_get($theme, 'table.theadStyle') }}"
        >
            {{ $header }}
        </thead>
        <tbody
            class="{{  data_get($theme, 'table.tbodyClass') }}"
            style="{{  data_get($theme, 'table.tbodyStyle') }}"
            wire:loading.remove
        >
            @if ($readyToLoad)
                {{ $body }}
            @endif
        </tbody>
    </table>

    <div wire:loading class="p-2 space-y-4 animate-pulse">
        <!-- Skeleton loading content -->
    </div>
</div>

在这种情况下，每当加载表格时（由于过滤器、分页等），整个 tbody 就会消失，这会删除我想要始终保持可见的第一个 tr （过滤器/搜索行）。

我尝试了这种方法，从tbody中删除wire:loading并在其中手动写入tr：

<tbody
    class="{{  data_get($theme, 'table.tbodyClass') }}"
    style="{{  data_get($theme, 'table.tbodyStyle') }}"
>
    <tr 
        class="{{ data_get($theme, 'table.trClass') }}"
        style="{{ data_get($theme, 'table.trStyle') }}"
    >
    </tr>

    @if ($readyToLoad)
        {{ $body }}
    @endif
</tbody>

但是，这似乎无法正常工作，并且我不确定如何在不破坏表行为的情况下保持第一个 tr（过滤器/搜索行）持久存在。任何有关如何正确实施这一点的指导将不胜感激！

参考PowerGrid表结构： 代码结构

Answer 1

为了实现在 PowerGrid 设置中加载表格时保持第一个 tr（过滤器/搜索行）可见的目标，您需要确保wire:loading 不会影响该特定行的可见性。一种可能的方法是将过滤器行与表内容的其余部分分开，并确保它始终可见，即使在加载期间也是如此。 更新方法：

分离过滤器行：您可以将过滤器行移到wire:loading指令之外，而不是让过滤器行与表主体的其余部分一起消失。

维护 tbody 结构：然后，您可以仅将wire:loading.remove指令添加到实际数据行，以便过滤器/搜索行保持可见，而数据行在表操作期间隐藏并被加载骨架替换。

以下是构建 Blade 文件的方法：

刀片

<div @isset($this->setUp['responsive']) x-data="pgResponsive" @endisset>
    <table
        id="table_base_{{ $tableName }}"
        class="table power-grid-table {{ data_get($theme, 'table.tableClass') }}"
        style="{{  data_get($theme, 'tableStyle') }}"
    >
        <thead
            class="{{ data_get($theme, 'table.theadClass') }}"
            style="{{ data_get($theme, 'table.theadStyle') }}"
        >
            {{ $header }}
        </thead>

        <tbody class="{{ data_get($theme, 'table.tbodyClass') }}" style="{{ data_get($theme, 'table.tbodyStyle') }}">
            <!-- Filter/Search Row -->
            <tr 
                class="{{ data_get($theme, 'table.trClass') }}"
                style="{{ data_get($theme, 'table.trStyle') }}"
            >
                <!-- Add your filter/search row inputs here -->
            </tr>

            <!-- Data Rows (which should be hidden during loading) -->
            <tr wire:loading.remove>
                @if ($readyToLoad)
                    {{ $body }}
                @endif
            </tr>
        </tbody>
    </table>

    <!-- Loading Skeleton -->
    <div wire:loading class="p-2 space-y-4 animate-pulse">
        <!-- Skeleton loading content -->
    </div>
</div>

主要变化：

过滤器/搜索行：它始终位于

<tbody>

内部，但位于wire:loading 指令外部。这确保了无论加载状态如何，它都保持可见。 数据行：在数据行上使用wire:loading.remove可在加载过程中隐藏它们，使过滤器行不受影响。 正在加载骨架：它会像往常一样在表格加载时显示。

这样，您的过滤器/搜索行始终保持可见，并且数据行仅在加载过程中消失。如果您需要进一步调整或解释，请告诉我！