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

问题描述

我正在尝试对 ListView 中的 JSON 中的项目进行分组.

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

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

这是 JSON:

<预><代码>[{"状态": "状态 1","erpCode": "1901","name": "姓名 1","statusReportDate": "24/08/2018","statusReportDescription": "说明 1"},{"状态": "状态 2","erpCode": "2160","name": "姓名 2","statusReportDate": "24/08/2018","statusReportDescription": "说明 2"},{"状态": "状态 2","erpCode": "543","name": "姓名 3","statusReportDate": "24/08/2018","statusReportDescription": "说明 3"}]

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

protected async void OnGetList(){如果(CrossConnectivity.Current.IsConnected){尝试{//从Web获取JSON数据var content = await _client.GetStringAsync(Url);//我们从这一行反序列化JSON数据var list = JsonConvert.DeserializeObject>(content);//反序列化后，我们将数据存储在名为 ObservableCollection 的列表中ObservableCollection<公司>collection = new ObservableCollection(list);myList.ItemsSource = 集合；}捕获(异常 ey){Debug.WriteLine("" + ey);}}}

XAML 列表视图:

<ListView.ItemTemplate><数据模板><ViewCell><StackLayout Orientation="Horizo​​ntal" Margin="5" Horizo​​ntalOptions="Fill"><Button Text="{Binding erpCode}"/><StackLayout Horizo​​ntalOptions="填充"><网格><Label Text="{绑定名称}"/><Label Text="{Binding statusReportDate}"/></网格><Label Text="{Binding statusReportDescription}"/></StackLayout></StackLayout></ViewCell></数据模板></ListView.ItemTemplate></ListView>

我想按状态"对其进行分组并打印如下内容:

状态 1

名称 1

状态 2

名称 2

名称 3

状态 N

名称 n1

名称 n2

名称 n3

...

解决方案

查看这篇文章:https://xamarinhelp.com/xamarin-forms-listview-grouping/

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

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

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

public class CompanyByStatusList : ObservableCollection{公共字符串状态 { 获取；放;}公共 ObservableCollection<Company>公司 =>这;}

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

public ObservableCollection公司列表 { 获取；放;}

然后，您要为每个状态创建一个 CompanyByStatusList，其中包含处于该特定状态的所有公司，然后将每个 CompanyByStatusList 添加到 CompanyList 集合.确保设置每个 CompanyByStatusList

的 Status 属性

并确保在您的 ListView 上设置 IsGroupingEnabled="true".列表视图 xaml:

<ListView.GroupHeaderTemplate><数据模板><ViewCell><Label Text="{绑定状态}"/></ViewCell></数据模板></ListView.GroupHeaderTemplate><ListView.ItemTemplate><数据模板><ViewCell><StackLayout Orientation="Horizo​​ntal" Margin="5" Horizo​​ntalOptions="Fill"><Button Text="{Binding erpCode}"/><StackLayout Horizo​​ntalOptions="填充"><StackLayout Orientation="水平"><Label Text="{绑定名称}"/><Label Text="{Binding statusReportDate}"/></StackLayout><Label Text="{Binding statusReportDescription}"/></StackLayout></StackLayout></ViewCell></数据模板></ListView.ItemTemplate></ListView>

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

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

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

Here's the 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:

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:

<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

Name 1

Status 2

Name 2

Name 3

Status N

Name n1

Name n2

Name n3

...

解决方案

Check out this article: https://xamarinhelp.com/xamarin-forms-listview-grouping/

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

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;
}

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

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

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屋！