[英]Group ListView by a component on a JSON in Xamarin.Forms
I'm trying to group items from a JSON in the ListView.我正在尝试对 ListView 中的 JSON 中的项目进行分组。
My JSON is stored in an web repository, I already pulled it from the server and listed it but ungrouped.我的 JSON 存储在 Web 存储库中,我已经从服务器中提取它并列出它但未分组。
I've read a lot of tutorials about how to group C# List but none of them solved my problem.我已经阅读了很多关于如何对 C# List 进行分组的教程,但没有一个能解决我的问题。
Here's the JSON:这是JSON:
[
{
"status": "Status 1",
"erpCode": "1901",
"name": "Name 1",
"statusReportDate": "24/08/2018",
"statusReportDescription": "Description 1"
},
{
"status": "Status 2",
"erpCode": "2160",
"name": "Name 2",
"statusReportDate": "24/08/2018",
"statusReportDescription": "Description 2"
},
{
"status": "Status 2",
"erpCode": "543",
"name": "Name 3",
"statusReportDate": "24/08/2018",
"statusReportDescription": "Description 3"
}
]
My method that pull the JSON from a web repository and convert it to a List and ObservableCollection:我从 Web 存储库中提取 JSON 并将其转换为 List 和 ObservableCollection 的方法:
protected async void OnGetList()
{
if (CrossConnectivity.Current.IsConnected)
{
try
{
//Getting JSON data from the Web
var content = await _client.GetStringAsync(Url);
//We deserialize the JSON data from this line
var list = JsonConvert.DeserializeObject<List<Company>>(content);
//After deserializing , we store our data in the List called ObservableCollection
ObservableCollection<Company> collection = new ObservableCollection<Company>(list);
myList.ItemsSource = collection;
}
catch (Exception ey)
{
Debug.WriteLine("" + ey);
}
}
}
XAML ListView: XAML 列表视图:
<ListView x:Name="myList"
HasUnevenRows="True"
ItemSelected="MyList_ItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" Margin="5" HorizontalOptions="Fill">
<Button Text="{Binding erpCode}"/>
<StackLayout HorizontalOptions="Fill">
<Grid>
<Label Text="{Binding name}"/>
<Label Text="{Binding statusReportDate}"/>
</Grid>
<Label Text="{Binding statusReportDescription}"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I want to group it by "status" and print something like this:我想按“状态”对其进行分组并打印如下内容:
Status 1状态 1
Name 1姓名 1
Status 2状态 2
Name 2姓名 2
Name 3姓名 3
Status N状态 N
Name n1姓名 n1
Name n2姓名 n2
Name n3姓名 n3
... ...
Check out this article: https://xamarinhelp.com/xamarin-forms-listview-grouping/查看这篇文章: https : //xamarinhelp.com/xamarin-forms-listview-grouping/
But better to use ObservableCollection
, where the above article uses List
.但最好使用ObservableCollection
,上面的文章使用List
。
So you have to create an ObservableCollection of a type that is a subclass of ObservableCollection
.因此,您必须创建一个 ObservableCollection 类型的ObservableCollection
子类。
First create a type that subclasses ObservableCollection
that will hold one group of companies by status:首先创建一个子类ObservableCollection
的类型,该类型将按状态保存一组公司:
public class CompanyByStatusList : ObservableCollection<Company>
{
public string Status { get; set; }
public ObservableCollection<Company> Companies => this;
}
Then create an ObservableCollection
of CompanyByStatusList
.然后创建一个ObservableCollection
的CompanyByStatusList
。 This will be your ItemsSource for your ListView
.这将是您的ListView
的 ItemsSource 。
public ObservableCollection<CompanyByStatusList> CompanyList { get; set; }
Then you want to create a CompanyByStatusList
for each status that holds all of the companies in that specific status, and then add each of those CompanyByStatusList
to the CompanyList
collection.然后,您希望为每个状态创建一个CompanyByStatusList
,其中包含处于该特定状态的所有公司,然后将这些CompanyByStatusList
中的每一个添加到CompanyList
集合中。 Make sure to set the Status
property of each CompanyByStatusList
确保设置每个CompanyByStatusList
的Status
属性
And make sure to set IsGroupingEnabled="true"
on your ListView
.并确保在ListView
上设置IsGroupingEnabled="true"
。 ListView xaml:列表视图 xaml:
<ListView ItemsSource="{Binding CompanyList}"
IsGroupingEnabled="true"
HasUnevenRows="true">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<Label Text="{Binding Status}" />
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" Margin="5" HorizontalOptions="Fill">
<Button Text="{Binding erpCode}"/>
<StackLayout HorizontalOptions="Fill">
<StackLayout Orientation="Horizontal">
<Label Text="{Binding name}"/>
<Label Text="{Binding statusReportDate}"/>
</StackLayout>
<Label Text="{Binding statusReportDescription}"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.