Я создаю 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,объект> Как добавить имя класса
Если вы знаете свой тип T
и у вас есть SortLabel
и SortHeader
, вы можете сделать это следующим образом:
Примечание. config
— это пользовательский класс, его нужно получить откуда-то в коде — SortLabel
и SortHeader
— это просто строки.
<MudTableSortLabel SortLabel = "@config.Sortlabel" T = "YourType">
@config.SortHeader
</MudTableSortLabel>
Редактировать
Если у вас есть простой сценарий, я бы просто выбрал это решение. В противном случае это будет очень сложно.
Если вы хотите использовать динамическое решение, вам следует учитывать следующее:
MudTable
— без вкладок или чего-то еще.MudTable
в Blazor
. Вскоре. Вам понадобится этот пакет на стороне сервера.AllowUnsorted = "false"
, чтобы отключить третье состояние.Когда я просматриваю несколько классов, как мне получить букву T? Можете ли вы предложить какой-либо общий способ найти это . У меня может быть по 3-4 класса для содержимого вкладок. У меня есть имена классов, такие как CLass A, ClassB, Class C и т.д.
Я думаю, что параметр T не может быть установлен переменной. Если у вас всего 3-4 класса, вы можете просто использовать оператор if/else и установить для T конкретное значение, например ClassA и т. д.
Я получаю исключение нулевой ссылки после добавления <MudTh> <MudTableSortLabel SortLabel = "@column" T = "Net"> @column </MudTableSortLabel> </MudTh>
Я посмотрю позже.
Я отредактировал свой ответ и построил образец.
Реструктурируйте свой компонент так, чтобы в нем была только MudTable — никакие вкладки или что-то еще невозможно, требование состоит в том, что когда пользователь нажимает на вкладку, отображаются строки данных.
Я имею в виду, что у вас могут быть вкладки, но не в одном компоненте. Вам следует создать один компонент A только с помощью MudTable, а другой компонент B, который содержит вкладки, и добавить компонент A к этим вкладкам.
Кстати, моя ссылка на решение содержит вкладки. это всего лишь минимальный рабочий образец.
Я добавил один пример кода. Это почти работает для динамической таблицы. Проблема, которую я обнаружил, заключается в том, что пользователь нажимает на заголовок для сортировки. Это не работает в первый раз. Кроме того, несколько щелчков мышью по определенным столбцам не отображают строки должным образом. Порядок неправильный. Любая помощь будет оценена по достоинству.
Я думаю, что ваш фрагмент работает так, как ожидалось. Имейте в виду, что существует три состояния сортировки: по возрастанию, по убыванию и несортировка. И ваш первый щелчок по столбцу имя_процесса приводит к сортировке по возрастанию, которая уже имеется. Итак, сортировка работает, но ничего не меняется, потому что она уже отсортирована по возрастанию. А чтобы отключить третье состояние сортировки «несортированный», просто установите: <MudTable AllowUnsorted = "false"
Так что на самом деле теперь все должно работать. Я добавил в свой ответ опцию AllowUnsorted. Если это решило вашу проблему, не стесняйтесь принять это :)
И ваш первый щелчок по столбцу имя_процесса приводит к сортировке по возрастанию, которая уже имеется. Можем ли мы это изменить? Служба контроля качества сообщит об этом как об ошибке, сортировка должна работать при первом щелчке мыши. Если записи расположены в порядке возрастания, то первый щелчок должен привести к убыванию и наоборот.
Я так не думаю. Откуда вам знать, как сортируются ваши данные? Он случайным образом уже отсортирован по возрастанию. Вы все еще видите стрелку вниз. Но данные не меняются, потому что они уже отсортированы. В реальном мире этого, возможно, никогда не произойдет.
Как мы можем использовать это для связанных данных и множественного выбора?
ИМХО, не стоит этого делать. Придерживайтесь создания элемента для каждого свойства. В дальнейшем вы сэкономите себе еще больше головной боли.