как сделать таблицу с множественным выбором и общим, используя Titem в blazor?

avatar
Enrique
1 июля 2021 в 17:37
605
1
1

Я хочу создать table component, используя Titem, который можно использовать повторно с множественным выбором, мне удалось сделать множественный выбор, но я не могу сделать component reusable, какой-нибудь совет? У меня есть таблица многократного использования, которую я сделал, просмотрев этот прямой пример от Microsoft https://docs.microsoft.com/en-us/aspnet/core/blazor/components/templated-components?view=aspnetcore-5.0 это мой код:

@page "/multiple"

<div class="table-responsive">

    <table class="table table-sm table-bordered table-hover">
        <thead class="thead-dark">
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            @if (valueList != null)
            {
                int count = valueList.Count;
                for (var i = 0; i < count; i++)
                {
                    int current = i; // don't use loop variable in binding
                    var values = valueList[current];

                    <tr class="@values.Class" @onclick="((e) => SelectItems(current, true))">
                        <td>@values.Name</td>
                        <td>@values.Age</td>
                    </tr>
                }
            }
        </tbody>
        <tfoot>

        </tfoot>
    </table>
</div>

<button type="button" class="btn btn-sm btn-info" @onclick="showSelected">Click</button>

<hr />
@if (events != null)
{
    <ul>
        @foreach (var evt in events)
        {
            <li>@evt</li>
        }
    </ul>
}

@code
{
    //Declare various lists and classes.
    private List<Value> valueList;
    private List<string> events = new List<string>();

    class Value
    {
        public string Name { get; set; }
        public string Age { get; set; }
        public string Class { get; set; }
    }

    //OnInitialized function to instantiated the valueList.
    protected override void OnInitialized()
    {
        valueList = new List<Value>();
        valueList.Add(new Value()
        {
            Name = "James",
            Age = "38"
        });
        valueList.Add(new Value()
        {
            Name = "John",
            Age = "32"
        });
    }

    //Function to set selected class on tr. Can multi-select or single via Toggle bool.
    void SelectItems(int index, bool toggle)
    {
        var item = valueList[index];

        //If toggle then allow multiple to be selected. If class already selected then clear.
        if (toggle)
        {
            if (item.Class == "selected")
            {
                item.Class = "";
            }
            else
            {
                item.Class = "selected";
            }
        }
        else
        {
            foreach (var value in valueList)
            {
                value.Class = "";
            }
            // set the value
            item.Class = "selected";
        }
    }

    //Function to show the selected items.
    void showSelected()
    {
        events.Clear();
        foreach (var value in valueList)
        {
            if (value.Class.Contains("selected"))
            {
                events.Add($"'{value.Name}' selected. With value: '{value.Age}'");
            };
        }
    }
}

эта таблица уже является повторно используемым компонентом, как я могу сделать ее многократно выбираемой:

 <table class="@TableClass">
        <thead class="@TheadClass">
            <tr>
                @Cabecera
            </tr>
        </thead>
        <tbody>
            @foreach (var item in ItemList)
            {
                <tr>@Filas(item)</tr>
            }
        </tbody>
        <tfoot>
            <tr>
                @Pie
            </tr>
        </tfoot>
    </table>

@code{

  [Parameter] public string ClassTable { get; set; }
  [Parameter] public string ClassThead { get; set; }
  [Parameter] public RenderFragment Cabecera { get; set; }
  [Parameter] public RenderFragment Pie { get; set; }
  [Parameter] public RenderFragment<TItem> Filas { get; set; }
  [Parameter] public IEnumerable<TItem> Items { get; set; }      
  IEnumerable<TItem> ItemList { get; set; }

  protected override async Task OnInitializedAsync()
   {
      ItemList = Items;
   }
}
Источник

Ответы (1)

avatar
Zhi Lv
6 июля 2021 в 10:12
1

Как сказано в официальном документе, шаблонные компоненты являются универсальными, поэтому при использовании TableTemplated вы можете передавать данные с главной страницы в компонент TableTemplate через параметры шаблона.

Попробуйте использовать следующий код:

TableTemplate.razor:

@typeparam TItem

<table class="table">
    <thead>
        <tr>@TableHeader</tr>
    </thead>
    <tbody>
        @foreach (var item in Items)
        {
            <tr>@RowTemplate(item)</tr>
        }
    </tbody>
</table>

@code {
    [Parameter]
    public RenderFragment TableHeader { get; set; }

    [Parameter]
    public RenderFragment<TItem> RowTemplate { get; set; }

    [Parameter]
    public IReadOnlyList<TItem> Items { get; set; }
}

Index.razor: здесь мы добавляем событие onclick для каждой ячейки.

<TableTemplate Items="pets" Context="pet">
    <TableHeader>
        <th>ID</th>
        <th>Name</th>
        <th>Class</th>
    </TableHeader>
    <RowTemplate >
        <td @onclick="((e)=>SelectItems(pet.PetId, true))">@pet.PetId</td> 
        <td @onclick="((e)=>SelectItems(pet.PetId, true))">@pet.Name</td>
        <td @onclick="((e)=>SelectItems(pet.PetId, true))">@pet.Class</td>
    </RowTemplate>
</TableTemplate>
<button type="button" class="btn btn-sm btn-info" @onclick="showSelected">Click</button>

@code {
    private List<Pet> pets = new List<Pet>()
    {
            new Pet { PetId = 2, Name = "Mr. Bigglesworth"  },
            new Pet { PetId = 4, Name = "Salem Saberhagen" },
            new Pet { PetId = 7, Name = "K-9" }
    };
    private List<string> events = new List<string>();
    private class Pet
    {
        public int PetId { get; set; }
        public string Name { get; set; }
        public string Class { get; set; }
    }
    void SelectItems(int petId, bool toggle)
    {
        var item = pets.Find(c=>c.PetId ==petId);

        //If toggle then allow multiple to be selected. If class already selected then clear.
        if (toggle)
        {
            if (item.Class == "selected")
            {
                item.Class = "";
            }
            else
            {
                item.Class = "selected";
            }
        }
        else
        {
            foreach (var value in pets)
            {
                value.Class = "";
            }
            // set the value
            item.Class = "selected";
        }
    }
    //Function to show the selected items.
    void showSelected()
    {
        foreach (var value in pets)
        {
            if (value.Class!=null && value.Class.Contains("selected"))
            {
                events.Add($"'{value.Name}' selected. With value: '{value.Name}'");                
            };
        }
    }
}

Результат, как показано ниже:

enter image description here

Enrique
6 июля 2021 в 17:48
0

Большое спасибо за ваше время и помощь, у меня это сработало отлично, только вопрос, как я могу заставить выбранный тр изменить цвет?