如何使用RadListView分组功能捕获类别标题上的单击? (本语)

本文介绍了如何使用RadListView分组功能捕获类别标题上的单击? (本语)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我之前曾问过一些有关以下事项的信息:​​RadListView的分组功能这里.我没有得到答案，所以想尝试着眼于最简单的部分:如何在类别标题上捕获click事件?

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讨论，我找到了答案此处.关键是RadListView中的tkGroupTemplate.对于NativeScript(和iOS-可能也适用于Android)，如果要在下面具有类别标题和条目的列表，并且希望能够单击类别标题，则本方法是使用tkGroupTemplate.

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).