Блог

Главная - Вопросы по программированию - Blazor выделите выбранную строку таблицы

Blazor выделите выбранную строку таблицы

#css #.net-core #razor #html-table #blazor

Вопрос:

У меня есть рендеринг следующей таблицы в моем проекте blazor:

 <table class="table table-bordered accountTable @HighlightSelected" >
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
    @if (Accounts != null) 
    {
        @foreach (var account in Accounts)
        {
            <tr @onclick="@(() => ReturnRowData(account))"> 
                <td >@account.Id</td>
                <td >@account.Name</td>
            </tr>
        }
    }
    else
    {
        <p>No accounts to display...</p>
    }

    </tbody>
</table>

@code{
  [Parameter]
    public List<Account> Accounts { get; set; }

    [Parameter]
    public EventCallback<Account> OnRowClicked{get;set;}
    public string HighlightSelected = "normal";
public async void ReturnRowData(Account account)
{
    HighlightSelected = "highlight";
    await OnRowClicked.InvokeAsync(account);
}
}

При нажатии на строку в этой таблице данные выбранных строк возвращаются на страницу моего индекса для использования в других функциях. То, что я пытаюсь здесь сделать, — это добавить новый цвет фона в выбранную строку.

Параметр в таблице @HighlightSelected — это строковая переменная, которую я использую для замены в желаемом CSS изменении. Однако изменение css добавляется в каждую отдельную строку, а не только в одну выбранную.

В своем css я пробовал различные комбинации таргетинга на конкретный td, который я хочу, но это всегда приводит к выделению всей таблицы. Пример как

 .highlight table tbody tr.highlight td {
    background-color: red;
}

Что я делаю не так?

Я знаю, что это можно сделать, javascript но я хотел бы избежать этого любой ценой, если это вообще возможно.

Комментарии:

1. Для начала примените класс ко всей таблице. Вам нужно иметь какую — то переменную состояния для каждой учетной записи и применять класс к строке на основе состояния. Вам также нужно будет использовать @key в строке.

2. До тех пор, пока ему не нужно уметь делать множественный выбор, тогда один элемент сравнения будет в порядке.

3. @Bennyboy1973 он говорит о «выбранных строках»

4. Да, я тоже это видел. Тем не менее, я также видел несколько вариантов использования слова «ряд» без буквы «s» и слова «один».

Ответ №1:

Всякий раз, когда я использую Список, я часто создаю отдельный экземпляр для выбора и сравнения.

 @page "/accounts"


<table class="table table-bordered accountTable">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        @if (AccountsList != null)
        {
            @foreach (var account in AccountsList)
            {
                string colorClass= (account == SelectedAccount) ? "MyHighlightClass" : "";
                <tr class="@colorClass" style="color:navy; cursor:pointer; text-decoration:underline" @onclick="() => { ReturnRowData(account); SelectedAccount = account; }">
                    <td>@account.Id</td>
                    <td>@account.Name</td>
                </tr>
            }
        }
        else
        {
            <p>No accounts to display...</p>
        }

    </tbody>
</table>
@if (SelectedAccount.Id != 0)
{
    <h3>Selected account #@SelectedAccount.Id (@SelectedAccount.Name) </h3>
}

@code {
    public class Account
    {
        public int Id;
        public string Name = "";
    }
    [Parameter]
    public List<Account> AccountsList { get; set; } = new List<Account>() {
            new Account(){ Id = 1, Name="John" },
            new Account(){ Id = 2, Name="Jeff" },
            new Account(){ Id = 3, Name="Jane" }
     };
    Account SelectedAccount { get; set; } = new Account();

    void ReturnRowData(Account account)
    {
        // Do data stuff.
    }
}
Метки: