通过Xamarin.Forms中JSON上的组件对ListView进行分组 [英] Group ListView by a component on a JSON in Xamarin.Forms

问题描述

我正在尝试将ListView中的JSON中的项目分组.

I'm trying to group items from a JSON in the ListView.

我的JSON存储在Web存储库中，我已经将其从服务器中拉出并列出，但未分组.

My JSON is stored in an web repository, I already pulled it from the server and listed it but ungrouped.

我已经阅读了很多有关如何对C#列表进行分组的教程，但是都没有解决我的问题.

I've read a lot of tutorials about how to group C# List but none of them solved my problem.

这是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"
  }
]

从Web存储库中提取JSON并将其转换为List和ObservableCollection的方法:

My method that pull the JSON from a web repository and convert it to a List and 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:

<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:

状态1

名称1

状态2

名称2

名称3

状态为N

名称n1

名称n2

名称n3

...

推荐答案

查看本文: https://xamarinhelp.com/xamarin-forms-listview-grouping/

但是最好使用ObservableCollection，上面的文章中使用的是List.

But better to use ObservableCollection, where the above article uses List.

因此，您必须创建类型为ObservableCollection的子类的ObservableCollection.

So you have to create an ObservableCollection of a type that is a subclass of ObservableCollection.

首先创建一个子类的类型，该类型将按状态保存一组公司:

First create a type that subclasses ObservableCollection that will hold one group of companies by status:

public class CompanyByStatusList : ObservableCollection<Company>
{
    public string Status { get; set; }
    public ObservableCollection<Company> Companies => this;
}

然后创建CompanyByStatusList的ObservableCollection.这将是您的ListView的ItemsSource.

Then create an ObservableCollection of CompanyByStatusList. This will be your ItemsSource for your ListView.

public ObservableCollection<CompanyByStatusList> CompanyList { get; set; }

然后，您要为每个状态创建一个CompanyByStatusList，以将所有公司保持在该特定状态，然后将每个CompanyByStatusList都添加到CompanyList集合中.确保设置每个CompanyByStatusList

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. Make sure to set the Status property of each CompanyByStatusList

并确保在ListView上设置IsGroupingEnabled="true". ListView xaml:

And make sure to set IsGroupingEnabled="true" on your ListView. ListView 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>

这篇关于通过Xamarin.Forms中JSON上的组件对ListView进行分组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！