如何使用RadListView分组功能捕获类别标题上的单击? (本语) [英] How to catch click on category header with RadListView grouping function? (Nativescript)

问题描述

我之前曾问过一些有关以下事项的信息:​​RadListView的分组功能

I had previously asked about a few items re: RadListView's grouping function here. I didn't get an answer, so wanted to try to focus on hopefully the simplest part: how do I catch the click event on a category header?

通常，这很容易，例如<Label text="group.category" (tap)="youClickedTheCategory()"></Label>.

Normally, this would be pretty easy, like <Label text="group.category" (tap)="youClickedTheCategory()"></Label>.

但是将分组功能与RadListView一起使用时，类别没有html条目，那么如何知道用户是否单击类别标题而不是组中的其他地方?

But using the grouping function with RadListView, the category does not have an html entry, so how do I know if the user clicks on the category header instead of somewhere else in the group?

如果示例代码有帮助:

html:

<GridLayout>
    <RadListView [items]="places" [groupingFunction]="myGroupingFunc">
        <ng-template let-place="item" >
            <StackLayout>
                <Label [text]="place.city"></Label>
            </StackLayout>
        </ng-template>
    </RadListView>
</GridLayout>

ts:

   public places = [
        {country: 'US', city: 'New York'}, 
        {country: 'US', city: 'Los Angeles'},     
        {country: 'Canada', city: 'Toronto'},
        {country: 'England', city: 'London'}
        ]

    constructor() {
    }

    myGroupingFunc(value) {
      return value.country;
    }

结果将是:

Canada
--Toronto

England
--London

US
--New York
--Los Angeles

目标:知道用户是否单击国家类别标题(在这里是加拿大，英国或美国)，而不是用户单击整个组.

Goal: know if the user clicks on the country category header (here, Canada , England, or US)--instead of the user clicking on the whole group.

使用Nativescript Angular(适用于iOS).

Using Nativescript Angular (for iOS).

推荐答案

基于这个github讨论，我找到了答案

I have found the answer, based on this github discussion here. The key is the tkGroupTemplate in RadListView. For NativeScript (and iOS--probably works for Android too), if you want to have a list that has category headers and entries below, and you want to be able to click on the category headers, the present method is to use tkGroupTemplate.

这里是一个例子:

$ tns plugin add nativescript-ui-listview

组件html:

<GridLayout>
    <RadListView [items]="places" [groupingFunction]="myGroupingFunc">
        <ng-template tkListItemTemplate let-place="item">
            <StackLayout>
                <Label [text]="place.city" (tap)="listEntryTap(place.city)"></Label>
            </StackLayout>
        </ng-template>
        <ng-template tkGroupTemplate let-country="category">
            <StackLayout ios:height="25">
                <Label [text]="country" (tap)="headerTap(country)"></Label>
            </StackLayout>
        </ng-template>
    </RadListView>
</GridLayout>

ts :(组件ts文件)

ts: (component ts file)

public places = [
         {country: 'US', city: 'New York'}, 
         {country: 'US', city: 'Los Angeles' },     
         {country: 'Canada', city: 'Toronto'},
         {country: 'England', city: 'London'},
         {country: 'US', city: 'Chicago'},
         {country: 'Canada', city: 'Calgary'}      
]
...
constructor(){}
...
myGroupingFunc(value) {
   return value.country;
}

headerTap(country){
    console.log('you tapped this country header: ' + country)
}

listEntryTap(city){
    console.log('you tapped this city entry: ' + city)
}

module.ts :(用于组件的模块-如果使用组件的延迟加载.如果不使用延迟加载，则可能会放在主app.module.ts文件中)

module.ts: (module for the component--if using lazy loading of components. If not using lazy loading, this probably would go in the main app.module.ts file)

import { NativeScriptUIListViewModule } from "nativescript-ui-listview/angular";

@NgModule({
  imports: [
  ...
   NativeScriptUIListViewModule 
  ]
...

这将产生以下内容，分别单击标题(国家)和条目(城市):

And that should produce the following, with headers (countries) and entries (cities) separately clickable:

Canada
Toronto
Calgary

England
London

US
New York
Los Angeles
Chicago

这看起来像是带有一些默认格式(标题自动具有不同的背景色)-但您可以使用自己的样式来覆盖它.

It looks like this comes with some default formatting (the headers have a different background color automatically)--but you can override that with your own styles.

在没有ios:height="25"(或任何高度)的情况下，某些类别标题会越过条目.

Without the ios:height="25"(or whatever height) some of the category headers go over the entries.

不过，否则，这似乎适用于iOS和NativeScript 5.0+(我也认为是早期版本).

Otherwise, though, this seems to work for iOS and NativeScript 5.0+ (and, I assume, earlier versions too).

这篇关于如何使用RadListView分组功能捕获类别标题上的单击? (本语)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！