如何获取当前页面中显示的所有项目?

2023-12-09

For the 官方示例多选时,如果设置每页显示 50 行并单击标题行中的全选复选框,则实际上表中的所有行都被选中。问题是我只想选择当前页面中的所有行,有什么方法可以实现吗?我不想手动单击每一行。


我为你想要实现的目标创建了一个演示:https://try.mudblazor.com/snippet/GaGQENEheDggnxaW

我通过使用从页眉和页脚中删除了默认的“全选”复选框MudTHeadRow and MudTFootRow组件和设置IgnoreCheckbox属性为真。还设置CustomHeader and CustomFooter属性为 true 上MudTable组件本身。

然后我添加了一个新的MudTh显示我自己的自定义复选框。单击该复选框后,我将向其中添加或删除项目selectedItems1哈希集基于CurrentPage and RowsPerPage表的属性。

<MudTable @ref="_tableRef" CustomHeader="true" CustomFooter="true" Items="@Elements" @bind-SelectedItems="selectedItems1" MultiSelection="true" Hover="@hover">
    <HeaderContent>
        <MudTHeadRow IgnoreCheckbox="true">
            <MudTh>
                <MudCheckBox T="bool" Checked="IsSelectAllChecked" CheckedChanged="@Select"></MudCheckBox>
            </MudTh>
            <MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Number)">Nr</MudTableSortLabel></MudTh>
            <MudTh>Sign</MudTh>
            <MudTh><MudTableSortLabel InitialDirection="SortDirection.Ascending" SortBy="new Func<Element, object>(x=>x.Name)">Name</MudTableSortLabel></MudTh>
            <MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Position)">Position</MudTableSortLabel></MudTh>
            <MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Molar)">Mass</MudTableSortLabel></MudTh>
        </MudTHeadRow>
    </HeaderContent>
    ...
    <FooterContent>
        <MudTFootRow IgnoreCheckbox="true">
            <MudTh>
                <MudCheckBox T="bool" Checked="IsSelectAllChecked" CheckedChanged="@Select"></MudCheckBox>
            </MudTh>
            <MudTd colspan="5">Select All</MudTd>
        </MudTFootRow>
    </FooterContent>
</MudTable>

<MudText Inline="true">Selected items: @(selectedItems1==null ? "" : string.Join(", ", selectedItems1.OrderBy(x=>x.Sign).Select(x=>x.Sign)))</MudText>

@code {
    private bool hover = true;
    private HashSet<Element> selectedItems1 = new HashSet<Element>();

    private IEnumerable<Element> Elements = new List<Element>();

    private MudTable<Element> _tableRef;

    private bool IsSelectAllChecked
    {
        get
        {
            var currentPage = _tableRef.CurrentPage;
            var rowsPerPage = _tableRef.RowsPerPage;
       
            var currentPageItems = _tableRef.FilteredItems.Skip(currentPage * rowsPerPage).Take(rowsPerPage);

            if (!selectedItems1.Any(x => currentPageItems.Any(y => x == y)))
            {
                return false;
            }
            else
            {
                return true;
            }
        }
    }

    protected override async Task OnInitializedAsync()
    {
        Elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
    }

    private void Select()
    {
        var currentPage = _tableRef.CurrentPage;
        var rowsPerPage = _tableRef.RowsPerPage;
       
        var currentPageItems = _tableRef.FilteredItems.Skip(currentPage * rowsPerPage).Take(rowsPerPage);

        if (!selectedItems1.Any(x => currentPageItems.Any(y => x == y)))
        {
            foreach(var item in currentPageItems)
            {
                selectedItems1.Add(item);
            }
        }
        else
        {
            foreach(var item in currentPageItems)
            {
                selectedItems1.Remove(item);
            }
        }
    }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何获取当前页面中显示的所有项目? 的相关文章

随机推荐