如何在 Blazor WASM 中获取和设置表格的滚动位置

Question

我有一个 Blazor 组件，可以在 div 内呈现表格（请参阅下面的代码）。 div 有一个 id 将其绑定到 CSS，该 id 指定具有 max-height 和 max-width 属性的 Overflow:auto。 该表具有粘性行标题和列标题。 当 div 垂直和/或水平溢出时，会出现滚动条，并且当我滚动时，行标题和列标题保持在原位，一切都如预期。

我想在导航到另一个组件时捕获垂直和水平滚动位置，以便当我返回到表格组件时，我可以以编程方式滚动回原来的位置。 我正在寻找有关如何在导航离开时捕获位置并在返回时滚动的指导。 感谢您提供的任何指导。

<div class ="table-wrap">
    <table>
        <thead>
            @* Column Headers Row *@
            <tr>
                <th>&nbsp</th>

                @for (int colIndex = 0; colIndex < @Report.Columns.Count; colIndex++)
                    {
                    <th> @Report.Columns[colIndex].ColumnName </th>
                    }
            </tr>
        </thead>

        <tbody>
            @* Data Rows *@
            @for (int rowIndex = 0; rowIndex < @Report.Rows.Count; rowIndex++)
                {
                int rowIndex1 = @rowIndex;
                string rowId = $"row{rowIndex1}";

                if (@MES.CFS.ReportRowTagList[rowIndex1].Visible == false) continue;

                <tr class="@MES.CFS.ReportRowTagList[rowIndex1].ClassLeafOrTotal ">

                    @* Row Header *@

                    <th id="@rowId"
                        class="@MES.CFS.ReportRowTagList[rowIndex1].ClassIndent @MES.CFS.ReportRowTagList[rowIndex1].ClassDummy"
                        @onclick="@(() => ExCo_Click(@rowIndex1))">

                        @MES.CFS.ReportRowTagList[rowIndex1].RowHeader

                    </th>

                    @* Data Columns *@
                    @for (int colIndex = 0; colIndex < @Report.Columns.Count; colIndex++)
                        {
                        @*  For scrolling *@
                        int colIndex1 = colIndex;
                        string id = $"id-row{rowIndex1}-col{Report.Columns[colIndex1].ColumnName}";

                        string sign;
                        @if (MES.CFS.ReportRowTagList[rowIndex1].FormattedDataArray[@colIndex].StartsWith("-")) sign = "negative";
                        else sign = "positive";
                        <td id="@id" class="reportdata @sign">
                            @MES.CFS.ReportRowTagList[rowIndex1].FormattedDataArray[@colIndex]
                        </td>
                        }

                </tr>
                }
        </tbody>
    </table>
</div>

我尝试使用 table-wrap div 上的 onfocusout 属性在我离开表格时触发事件，但由于某种原因它们没有触发。也许 onfocusout 甚至无效，但我没有收到错误消息。

Answer 1

您可以尝试使用jsinterop来获取表格元素位置。通过触发

NaviationManager.OnlocationChanged

事件，使用

Blazored.SessionStorage

将仓位值保存到会话中。然后读取初始化页面上的位置。
安装

Blazored.SessionStorage

builder.Services.AddBlazoredSessionStorage();

然后以下示例页面将记住您导航时的滚动位置。

@page "/"
@using Blazored.SessionStorage
@inject NavigationManager NAVI
@inject IJSRuntime JS
@inject ISessionStorageService SessionStorage


<button @onclick="GetScrollPosition">GetScrollPosition</button>
Current position: @scrollPosition[0],@scrollPosition[1]

<style>
    .table-container {
        width: 1000px;
        height: 300px;
        overflow: auto;
    }
    thead {
        position: sticky;
        background-color: white;
        top: 0;
        z-index: 1;
    }

</style>

<div class="table-container" id="myTable">
    <table>
        <thead>
            <tr>
                @for (int i = 1; i <= 100; i++)
                {
                    <th>@i</th>
                }
            </tr>
        </thead>
        <tbody>
            @for (int k = 1; k < 100; k++)
            {
                <tr>
                    @for (int i = k; i < k + 100; i++)
                    {
                        <td>@i</td>
                    }
                </tr>
            }
        </tbody>
    </table>
</div>

<script>
    function getScrollPosition(elementId) {
        const element = document.getElementById(elementId);
        if (element) {
            return [element.scrollTop, element.scrollLeft] // vertical scroll position
        }
        return 0;
    }
</script>

@code {
    private int[] scrollPosition = new int[] { 0, 0 };

    private async Task GetScrollPosition()
    {
        scrollPosition = await JS.InvokeAsync<int[]>("getScrollPosition", "myTable");
    }
    protected override async Task OnInitializedAsync()
    {
        NAVI.LocationChanged += OnNavi;
        scrollPosition = await SessionStorage.GetItemAsync<int[]>("position");
        if (scrollPosition == null)
        {
            scrollPosition = new int[] { 0, 0 };
        }
    }
    private async void OnNavi(object sender, LocationChangedEventArgs e)
    {
        await GetScrollPosition();
        await SessionStorage.SetItemAsync<int[]>("position", scrollPosition);
    }
}