All Products
Search
Document Center

Cascade picker

Last Updated: Feb 22, 2022

AUCascadePicker is a multi-level cascade picker control that supports up to three levels.

Sample image

yan'an street

API description

// Set the selected item for the picker.
@interface AUCascadePickerSelectedRowItem : NSObject

@property (nonatomic, strong) NSString *selectedLeftTitle;    // The title selected for the sublist on the left.
@property (nonatomic, strong) NSString *selectedMiddleTitle;  // The title selected for the sublist in the middle.
@property (nonatomic, strong) NSString *selectedRightTitle;   // The title selected for the sublist on the right.

@end

@interface  AUCascadePickerRowItemModel : NSObject

@property (nonatomic, strong) NSString *rowTitle;
@property (nonatomic, strong) NSArray<AUCascadePickerRowItemModel *> *rowSubList;

@end

// The data model required for the linkage effect.
@interface AUCascadePickerModel : NSObject

@property (nonatomic,strong) AUCascadePickerSelectedRowItem            *preSelected;   // The selected item transferred from the client.
@property (nonatomic, strong) AUCascadePickerSelectedRowItem           *selectedItem;  // The selected data list that is automatically recorded in the current component.
@property (nonatomic, strong) NSArray<AUCascadePickerRowItemModel *>   *dataList;      // The data list.
@property (nonatomic, strong) NSString *title;                                         // The picker title.

@end


@interface AUCascadePicker : AUPickerBaseView <UIPickerViewDataSource, UIPickerViewDelegate>

@property (nonatomic, strong) AUCascadePickerModel *dataModel;
@property (nonatomic, assign) NSInteger numberOfComponents;
@property (nonatomic, weak) id <AUCascadePickerDelegate> linkageDelegate;

- (instancetype)initWithPickerModel:(AUCascadePickerModel *)model;

@end

// The callback for the Cancel and Completed buttons at the top.
@protocol AUCascadePickerDelegate <AUPickerBaseViewDelegate>
/*
 * Callback is performed when Cancel is clicked.
 */
- (void)cancelPickerView:(AUCustomDatePicker *)pickerView;

/*
 * Callback is performed when Completed is clicked. The selected items can be returned through selectedRowInComponent.
 */
- (void)selectedPickerView:(AUCustomDatePicker *)pickerView

@end

JSAPI description

API

antUIGetCascadePicker

Usage

AlipayJSBridge.call('antUIGetCascadePicker',
{
    title: 'nihao',// The cascade option title.
    selectedList:[{"name":"Hangzhou",subList:[{"name":"Shangcheng district"}]}],
    list: [
        {
            name: "Hangzhou",// The entry name.
            subList: [
                {
                    name: "Xihu district",
                    subList: [
                        {
                            name: "Gucui Street"
                        },
                        {
                            name: "Wenxin Street"
                        }
                    ]
                },
                {
                    name: "Shangcheng district",
                    subList: [
                        {
                            name: "Yan'an Street"
                        },
                        {
                            name: "Longxiangqiao Street"
                        }
                    ]
                }
            ]// The cascade sub-data list.
        }
    ]// The cascade data list.
},
function(result){
    console.log(result);
});

Input parameters

Name

Type

Description

Required

Version

title

String

The cascade control title.

NO

10.1.2

selectedList

Json

The selected sub-items, in the same format as Input parameters. ([{"name":"Hangzhou",subList:[{"name":"Shangcheng District"}]}])

NO

10.1.2

list

Json

The selector data list.

YES

10.1.2

name

String

The entry name in list.

YES

10.1.2

subList

Json

The sub-list in list.

NO

10.1.2

fn

function

The callback function after selection is complete.

NO

10.1.2

Output parameters

Name

Type

Description

Version

success

Bool

Whether selection is complete. If selection is canceled, false is returned.

10.1.2

result

Json

The selected items, for example, [{"name":"Hangzhou",subList:[{"name":"Shangcheng District"}]}]

10.1.2

Sample code

model = [[AULinkagePickerModel alloc] init];

    NSMutableArray *modelList = [[NSMutableArray alloc] init];
    for (int i=0; i<6; i++)
    {
        AULinkagePickerRowItemModel *item = [[AULinkagePickerRowItemModel alloc] init];
        item.rowTitle = [NSString stringWithFormat:@"Level-1 %d", i];
        NSMutableArray *array = [[NSMutableArray alloc] init];
        for (int j=0; j<7; j++)
        {
            if (i == 0)
            {
                break;
            }
            AULinkagePickerRowItemModel *item1 = [[AULinkagePickerRowItemModel alloc] init];
            item1.rowTitle = [NSString stringWithFormat:@"Level-2 %d", j];
            NSMutableArray *array1 = [[NSMutableArray alloc] init];
            for (int k=0; k<5; k++) {
                AULinkagePickerRowItemModel *item2 = [[AULinkagePickerRowItemModel alloc] init];
                item2.rowTitle = [NSString stringWithFormat:@"Level-3 %d", k];
                [array1 addObject:item2];
                if (j == 1 || j== 2) {
                    break;
                }
            }
            item1.rowSubList = array1;
            [array addObject:item1];
            if (i == 3 || i== 5) {
                break;
            }
        }
        item.rowSubList = array;
        [modelList addObject:item];
    }

    model.dataList = modelList;


    AULinkagePickerSelectedRowItem *item = [[AULinkagePickerSelectedRowItem alloc] init];
    item.selectedLeftTitle = @"Level-1 0";
    item.selectedMiddleTitle = @"Level-2 0";
    item.selectedRightTitle = @"Level-3 0";

    model.selectedItem = item;

self.linkagePickerView = [[AULinkagePickerView alloc] initWithPickerModel:model];
self.linkagePickerView.linkageDelegate = self;
[self.linkagePickerView show];