时间戳

首页 > 解决方案 > 如何在悬停时突出显示网格行并在 Bootstrap 中单击时将其选中？

twitter-bootstrap - 如何在悬停时突出显示网格行并在 Bootstrap 中单击时将其选中？

问题描述

我正在将数据加载到 Blazor 中具有 3 列的网格。对于网格结构，我使用了 Bootstrap 行和列。如果我需要在悬停时突出显示行并使用 onClick 事件保持选中行，那么实现它的最佳方法是什么？

下面是我如何填充数据。

<div class="container-fluid">
    <div class="row">
        <div class="col">User Name</div>
        <div class="col">First Name</div>
        <div class="col">Last Name</div>
    </div>

    @foreach (var user in users)
    {
        <div class="row">
            <div class="col">@user.UserName</div>
            <div class="col">@user.FirstName</div>
            <div class="col">@user.LastName</div>
        </div>
    }
</div>

谢谢。

标签： twitter-bootstrapblazorbootstrap-grid

解决方案

您需要保持行选择状态。这是包装任何行类型的通用视图模型：

public class RowState<TItem>
{
    public RowState(TItem item) => Item = item;
    public TItem Item { get; set; }
    public bool IsSelected { get; set; }
}

然后对选定和悬停使用样式类：

.hover-row:hover {
    background-color: #0000ff33;
}

.selected-row {
    background-color: #0000ff77;
}

UserRow.razor我使用带有视图模型的 a[Parameter]将行分隔成自己的组件RowState<User>。

这简化了处理单击事件的逻辑和 css 类突出显示该行的逻辑。

UserRow.razor

<div class="row hover-row @CssClass" @onclick="RowClicked" >
    <div class="col">@User.UserName</div>
    <div class="col">@User.FirstName</div>
    <div class="col">@User.LastName</div>
</div>

@code {
    [Parameter]
    public RowState<User> UserRowState { get; set; }   

    private void RowClicked() => UserRowState.IsSelected = !UserRowState.IsSelected;

    private User User => UserRowState.Item;
    private bool IsSelected => UserRowState.IsSelected;
    private string CssClass => IsSelected ? "selected-row" : "";
}

重构您的原始代码：

<div class="container-fluid">
    <div class="row">
        <div class="col">User Name</div>
        <div class="col">First Name</div>
        <div class="col">Last Name</div>
    </div>

    @foreach (var user in UserRows)
    {
        <UserRow UserRowState=user />     
    }
</div>

@code {
    IEnumerable<RowState<User>> UserRows = User.DemoData
        .Select(user => new RowState<User>(user))
        .ToList();
}

这是一个有效的REPL

推荐阅读