All Products
Search
Document Center

Cascade picker

Last Updated: May 25, 2021

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

Sample image

cascade

API description

 
  1. // Set the selected item for the picker.
  2. @interface AUCascadePickerSelectedRowItem : NSObject
  3. @property (nonatomic, strong) NSString *selectedLeftTitle; // The title selected for the sublist on the left.
  4. @property (nonatomic, strong) NSString *selectedMiddleTitle; // The title selected for the sublist in the middle.
  5. @property (nonatomic, strong) NSString *selectedRightTitle; // The title selected for the sublist on the right.
  6. @end
  7. @interface AUCascadePickerRowItemModel : NSObject
  8. @property (nonatomic, strong) NSString *rowTitle;
  9. @property (nonatomic, strong) NSArray<AUCascadePickerRowItemModel *> *rowSubList;
  10. @end
  11. // The data model required for the linkage effect.
  12. @interface AUCascadePickerModel : NSObject
  13. @property (nonatomic,strong) AUCascadePickerSelectedRowItem *preSelected; // The selected item transferred from the client.
  14. @property (nonatomic, strong) AUCascadePickerSelectedRowItem *selectedItem; // The selected data list that is automatically recorded in the current component.
  15. @property (nonatomic, strong) NSArray<AUCascadePickerRowItemModel *> *dataList; // The data list.
  16. @property (nonatomic, strong) NSString *title; // The picker title.
  17. @end
  18. @interface AUCascadePicker : AUPickerBaseView <UIPickerViewDataSource, UIPickerViewDelegate>
  19. @property (nonatomic, strong) AUCascadePickerModel *dataModel;
  20. @property (nonatomic, assign) NSInteger numberOfComponents;
  21. @property (nonatomic, weak) id <AUCascadePickerDelegate> linkageDelegate;
  22. - (instancetype)initWithPickerModel:(AUCascadePickerModel *)model;
  23. @end
  24. // The callback for the Cancel and Completed buttons at the top.
  25. @protocol AUCascadePickerDelegate <AUPickerBaseViewDelegate>
  26. /*
  27. * Callback is performed when Cancel is clicked.
  28. */
  29. - (void)cancelPickerView:(AUCustomDatePicker *)pickerView;
  30. /*
  31. * Callback is performed when Completed is clicked. The selected items can be returned through selectedRowInComponent.
  32. */
  33. - (void)selectedPickerView:(AUCustomDatePicker *)pickerView
  34. @end

JSAPI description

API

antUIGetCascadePicker

Usage

 
  1. AlipayJSBridge.call('antUIGetCascadePicker',
  2. {
  3. title: 'nihao',// The cascade option title.
  4. selectedList:[{"name":"Hangzhou",subList:[{"name":"Shangcheng district"}]}],
  5. list: [
  6. {
  7. name: "Hangzhou",// The entry name.
  8. subList: [
  9. {
  10. name: "Xihu district",
  11. subList: [
  12. {
  13. name: "Gucui Street"
  14. },
  15. {
  16. name: "Wenxin Street"
  17. }
  18. ]
  19. },
  20. {
  21. name: "Shangcheng district",
  22. subList: [
  23. {
  24. name: "Yan'an Street"
  25. },
  26. {
  27. name: "Longxiangqiao Street"
  28. }
  29. ]
  30. }
  31. ]// The cascade sub-data list.
  32. }
  33. ]// The cascade data list.
  34. },
  35. function(result){
  36. console.log(result);
  37. });

Input parameters

Name Type Description Required Default value 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

 
  1. model = [[AULinkagePickerModel alloc] init];
  2. NSMutableArray *modelList = [[NSMutableArray alloc] init];
  3. for (int i=0; i<6; i++)
  4. {
  5. AULinkagePickerRowItemModel *item = [[AULinkagePickerRowItemModel alloc] init];
  6. item.rowTitle = [NSString stringWithFormat:@"Level-1 %d", i];
  7. NSMutableArray *array = [[NSMutableArray alloc] init];
  8. for (int j=0; j<7; j++)
  9. {
  10. if (i == 0)
  11. {
  12. break;
  13. }
  14. AULinkagePickerRowItemModel *item1 = [[AULinkagePickerRowItemModel alloc] init];
  15. item1.rowTitle = [NSString stringWithFormat:@"Level-2 %d", j];
  16. NSMutableArray *array1 = [[NSMutableArray alloc] init];
  17. for (int k=0; k<5; k++) {
  18. AULinkagePickerRowItemModel *item2 = [[AULinkagePickerRowItemModel alloc] init];
  19. item2.rowTitle = [NSString stringWithFormat:@"Level-3 %d", k];
  20. [array1 addObject:item2];
  21. if (j == 1 || j== 2) {
  22. break;
  23. }
  24. }
  25. item1.rowSubList = array1;
  26. [array addObject:item1];
  27. if (i == 3 || i== 5) {
  28. break;
  29. }
  30. }
  31. item.rowSubList = array;
  32. [modelList addObject:item];
  33. }
  34. model.dataList = modelList;
  35. AULinkagePickerSelectedRowItem *item = [[AULinkagePickerSelectedRowItem alloc] init];
  36. item.selectedLeftTitle = @"Level-1 0";
  37. item.selectedMiddleTitle = @"Level-2 0";
  38. item.selectedRightTitle = @"Level-3 0";
  39. model.selectedItem = item;
  40. self.linkagePickerView = [[AULinkagePickerView alloc] initWithPickerModel:model];
  41. self.linkagePickerView.linkageDelegate = self;
  42. [self.linkagePickerView show];