Cascade picker

Preview

API reference

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

@property (nonatomic, strong) NSString *selectedLeftTitle;    // The title of the selected item in the first sublist.
@property (nonatomic, strong) NSString *selectedMiddleTitle;  // The title of the selected item in the second sublist.
@property (nonatomic, strong) NSString *selectedRightTitle;   // The title of the selected item in the third sublist.

@end

@interface  AUCascadePickerRowItemModel : NSObject

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

@end

// The data model required for the filter interaction.
@interface AUCascadePickerModel : NSObject

@property (nonatomic,strong) AUCascadePickerSelectedRowItem            *preSelected;   // The pre-selected item.
@property (nonatomic, strong) AUCascadePickerSelectedRowItem           *selectedItem;  // The list of selected data recorded within 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

// Callback for the "Cancel" & "Done" buttons at the top.
@protocol AUCascadePickerDelegate <AUPickerBaseViewDelegate>
/*
 * Callback for when Cancel is tapped.
 */
- (void)cancelPickerView:(AUCustomDatePicker *)pickerView;

/*
 * Callback for when Done is tapped. The selected item can be returned through selectedRowInComponent.
 */
- (void)selectedPickerView:(AUCustomDatePicker *)pickerView

@end

JSAPI reference

API: antUIGetCascadePicker

Example

AlipayJSBridge.call('antUIGetCascadePicker',
{
    title: 'nihao',// The title of the cascade picker.
    selectedList:[{"name":"Hangzhou",subList:[{"name":"Shangcheng District"}]}],
    list: [
        {
            name: "Hangzhou",// The item name.
            subList: [
                {
                    name: "Xihu District",
                    subList: [
                        {
                            name: "Gucui Street"
                        },
                        {
                            name: "Wenxin Street"
                        }
                    ]
                },
                {
                    name: "Shangcheng District",
                    subList: [
                        {
                            name: "Yanan Street"
                        },
                        {
                            name: "Longxiangqiao Street"
                        }
                    ]
                }
            ]// The cascaded sublist of data.
        }
    ]// The cascaded data list.
},
function(result){
    console.log(result);
});

Input parameters

Property	Type	Description	Required	Version
title	String	Title displayed at the top of the cascade picker.	No	10.1.2
selectedList	Json	The pre-selected state. Specifies which sub-item is selected by default. Uses the same format as the list parameter. Example: [{"name":"Hangzhou",subList:[{"name":"Shangcheng District"}]}].	No	10.1.2
list	Json	Data source for the picker.	Yes	10.1.2
name	String	Name of the list item.	Yes	10.1.2
subList	Json	Nested child items for this list entry.	No	10.1.2
fn	Function	Callback invoked after a selection is made.	No	10.1.2

Output parameters

Property	Type	Description	Version
success	bool	Whether the selection was completed. Returns false if the user canceled.	10.1.2
result	Json	The selected items. Example: [{"name":"Hangzhou",subList:[{"name":"Shangcheng District"}]}].	10.1.2

Code example

    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:@"Layer 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:@"Layer 2: %d", j];
            NSMutableArray *array1 = [[NSMutableArray alloc] init];
            for (int k=0; k<5; k++) {
                AULinkagePickerRowItemModel *item2 = [[AULinkagePickerRowItemModel alloc] init];
                item2.rowTitle = [NSString stringWithFormat:@"Layer 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 = @"Layer 1: 0";
    item.selectedMiddleTitle = @"Layer 2: 0";
    item.selectedRightTitle = @"Layer 3: 0";

    model.selectedItem = item;

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