Как использовать SortBy в Dynamic Mudtable

Я создаю MudTab с MudTable. Столбцы и данные динамически передаются в MudTab и MudTable. Но я не могу понять, как установить <MudTh><MudTableSortLabel SortBy</MudTableSortLabel></MudTh>

    Tab.razor
    <MudTabs  @bind-ActivePanelIndex = "_index">
    <ChildContent>
    @foreach (var tab in tabs)
    {
    <MudTabPanel Text = "@tab.Text">
    <MudTable Items = "@tab.TableData" Hover = "true">          
    <HeaderContent>
     @foreach (var column in tab.ColumnNames)
     {
     <MudTh>                                 
      @column 
     </MudTh>
     }
     </HeaderContent> 
     <RowTemplate>
     @foreach (var column in tab.ColumnNames)
     {
     <MudTd DataLabel = "@column">@context.GetDisplayValue(column)</MudTd>
     }
     </RowTemplate>
     </MudTable>
     </MudTabPanel>
      }
    </ChildContent>

   </MudTabs>

    Tab.razor.cs
    public partial class Tab
    {
    public interface ITableData
    {
    string GetDisplayValue(string propertyName);
    object GetSortValue(string propertyName);
    }
    public class TabModel 
    {
    public int Index { get; set; }
    public string Text { get; set; } = string.Empty;
    public List<string> ColumnNames { get; set; } = new();
    public List<ITableData> TableData { get; set; } = new();         
    }       

    public class All : ITableData
    {
    public string Field1 { get; set; } = string.Empty;
    public string Field2 { get; set; } = string.Empty;
    public string GetDisplayValue(string propertyName)
    {
    return propertyName switch
    {
    "Field1" => Field1 ,
    "Field2" => Field2 
    };
    }
    public object GetSortValue(string propertyName)
    {
    return propertyName switch
    {
    "Field1" => Field1,
    "Field2" => Field2,
    _ => string.Empty,
    };
    }
    }
    public class Net  : ITableData
    {
    public string NetField1 { get; set; } = string.Empty;
    public string NetField2 { get; set; } = string.Empty;
    public string GetDisplayValue(string propertyName)
    {
    return propertyName switch
    {
    "NetField1" => NetField1 ,
    "NetField2" => NetField2 ,               
     _ => string.Empty,
    };
    }
    public object GetSortValue(string propertyName)
    {
    return propertyName switch
    {
    "NetField1" => NetField1 ,
    "NetField2" => NetField2 ,               
    _ => string.Empty
     };
     }
     }
    private int _index = 0;      
    private int? _nextIndex = null;
    private int selectedIndex = 0;
    private List<TabModel> tabs = new();
    protected override void OnInitialized()
    {
    base.OnInitialized();
    tabs = new List<TabModel>
    {
    new TabModel
    {
    Index = 0,
    Text = "All",
    ColumnNames = new List<string> { "Field1", "Field1"},
    TableData = new List<ITableData>
    {
    new All { Field1 = "Name1",Field2  = "125KB" },
    new All {  Field1 = "Name2", Field2  = "125KB" }
    } 
    },
    new TabModel
    {
    Index = 1,
    Text = "Net",
    ColumnNames = new List<string> { "NetField1", "NetField2"},
    TableData = new List<ITableData>
    {
    new Net { NetField1 = "25%" , NetField2 = "Process1" },
    new Net { NetField1 = "35%" , NetField2 = "Process2" }
    }  
    }; 
    }     
 }

Я попробовал следующие варианты

 <MudTableSortLabel SortBy = "((object)(column))">@column</MudTableSortLabel>
    <MudTableSortLabel SortBy = "@(context => context.GetSortValue(column))">
    <MudTableSortLabel SortBy = "@(x => x.GetSortValue(column))">
        @column
    </MudTableSortLabel>

И другие варианты пробовал. но ничего не получилось. Получение ошибки с просьбой явно ввести T

для Funct<T,объект> Как добавить имя класса

ИМХО, не стоит этого делать. Придерживайтесь создания элемента для каждого свойства. В дальнейшем вы сэкономите себе еще больше головной боли.

RBee 21.06.2024 19:02
Для развертывания Сайтов с использованием Blazor, Angular и React с репозиторием на GitHub на Cloudflare
Для развертывания Сайтов с использованием Blazor, Angular и React с репозиторием на GitHub на Cloudflare
Как развернуть сайты с помощью Blazor, Angular и React с репозиторием на GitHub на Cloudflare.
2
1
114
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вы знаете свой тип T и у вас есть SortLabel и SortHeader, вы можете сделать это следующим образом:

Примечание. config — это пользовательский класс, его нужно получить откуда-то в коде — SortLabel и SortHeader — это просто строки.

<MudTableSortLabel SortLabel = "@config.Sortlabel" T = "YourType">
     @config.SortHeader
</MudTableSortLabel>

Редактировать

Если у вас есть простой сценарий, я бы просто выбрал это решение. В противном случае это будет очень сложно.

Если вы хотите использовать динамическое решение, вам следует учитывать следующее:

  • Подумайте о нумерации страниц на стороне сервера, сортировке и фильтрации.
  • Реструктурируйте свой компонент так, чтобы в нем был только MudTable — без вкладок или чего-то еще.
  • Я создаю пакет nuget, который точно соответствует этому варианту использования: разбиение на страницы на стороне сервера, сортировка и фильтрация с помощью MudTable в Blazor. Вскоре. Вам понадобится этот пакет на стороне сервера.
  • Установите на MudTable AllowUnsorted = "false", чтобы отключить третье состояние.

Когда я просматриваю несколько классов, как мне получить букву T? Можете ли вы предложить какой-либо общий способ найти это . У меня может быть по 3-4 класса для содержимого вкладок. У меня есть имена классов, такие как CLass A, ClassB, Class C и т.д.

Dev 21.06.2024 16:10

Я думаю, что параметр T не может быть установлен переменной. Если у вас всего 3-4 класса, вы можете просто использовать оператор if/else и установить для T конкретное значение, например ClassA и т. д.

decius 21.06.2024 17:25

Я получаю исключение нулевой ссылки после добавления <MudTh> <MudTableSortLabel SortLabel = "@column" T = "Net"> @column </MudTableSortLabel> </MudTh>

Dev 23.06.2024 17:18

Я посмотрю позже.

decius 24.06.2024 09:14

Я отредактировал свой ответ и построил образец.

decius 24.06.2024 11:30

Реструктурируйте свой компонент так, чтобы в нем была только MudTable — никакие вкладки или что-то еще невозможно, требование состоит в том, что когда пользователь нажимает на вкладку, отображаются строки данных.

Dev 24.06.2024 20:41

Я имею в виду, что у вас могут быть вкладки, но не в одном компоненте. Вам следует создать один компонент A только с помощью MudTable, а другой компонент B, который содержит вкладки, и добавить компонент A к этим вкладкам.

decius 24.06.2024 20:43

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

decius 24.06.2024 20:48

Я добавил один пример кода. Это почти работает для динамической таблицы. Проблема, которую я обнаружил, заключается в том, что пользователь нажимает на заголовок для сортировки. Это не работает в первый раз. Кроме того, несколько щелчков мышью по определенным столбцам не отображают строки должным образом. Порядок неправильный. Любая помощь будет оценена по достоинству.

Dev 11.07.2024 12:27

Я думаю, что ваш фрагмент работает так, как ожидалось. Имейте в виду, что существует три состояния сортировки: по возрастанию, по убыванию и несортировка. И ваш первый щелчок по столбцу имя_процесса приводит к сортировке по возрастанию, которая уже имеется. Итак, сортировка работает, но ничего не меняется, потому что она уже отсортирована по возрастанию. А чтобы отключить третье состояние сортировки «несортированный», просто установите: <MudTable AllowUnsorted = "false"

decius 11.07.2024 12:45

Так что на самом деле теперь все должно работать. Я добавил в свой ответ опцию AllowUnsorted. Если это решило вашу проблему, не стесняйтесь принять это :)

decius 11.07.2024 12:48

И ваш первый щелчок по столбцу имя_процесса приводит к сортировке по возрастанию, которая уже имеется. Можем ли мы это изменить? Служба контроля качества сообщит об этом как об ошибке, сортировка должна работать при первом щелчке мыши. Если записи расположены в порядке возрастания, то первый щелчок должен привести к убыванию и наоборот.

Dev 11.07.2024 14:48

Я так не думаю. Откуда вам знать, как сортируются ваши данные? Он случайным образом уже отсортирован по возрастанию. Вы все еще видите стрелку вниз. Но данные не меняются, потому что они уже отсортированы. В реальном мире этого, возможно, никогда не произойдет.

decius 11.07.2024 14:51

Как мы можем использовать это для связанных данных и множественного выбора?

Dev 15.07.2024 10:59

Другие вопросы по теме