在iOS中通过AUCascadePicker实现级联选择器_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

AUCascadePicker 为多级级联选择器控件，最多支持三级。

效果图

接口说明

// 设置选择器的选中项
@interface AUCascadePickerSelectedRowItem : NSObject

@property (nonatomic, strong) NSString *selectedLeftTitle;    //  当前第一子列表选中的 title
@property (nonatomic, strong) NSString *selectedMiddleTitle;  //  当前第二子列表选中的 title
@property (nonatomic, strong) NSString *selectedRightTitle;   //  当前第三子列表选中的 title

@end

@interface  AUCascadePickerRowItemModel : NSObject

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

@end

// 联动效果所需要的数据模型
@interface AUCascadePickerModel : NSObject

@property (nonatomic,strong) AUCascadePickerSelectedRowItem            *preSelected;   // 业务方传进来的选中项
@property (nonatomic, strong) AUCascadePickerSelectedRowItem           *selectedItem;  // 当前组件内记录的选中数据列表
@property (nonatomic, strong) NSArray<AUCascadePickerRowItemModel *>   *dataList ;     // 数据列表
@property (nonatomic, strong) NSString *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

// 顶部“取消” & “完成” 的回调
@protocol AUCascadePickerDelegate <AUPickerBaseViewDelegate>
/*
 * 点取消时回调
 */
- (void)cancelPickerView:(AUCustomDatePicker *)pickerView;

/*
 * 点完成时回调，选中项可通过 selectedRowInComponent 返回
 */
- (void)selectedPickerView:(AUCustomDatePicker *)pickerView

@end

JSAPI 说明

接口：antUIGetCascadePicker

使用示例：

AlipayJSBridge.call('antUIGetCascadePicker',
{
    title: 'nihao',//级联选择标题
    selectedList:[{"name":"杭州市",subList:[{"name":"上城区"}]}],
    list: [
        {
            name: "杭州市",//条目名称
            subList: [
                {
                    name: "西湖区",
                    subList: [
                        {
                            name: "古翠街道"
                        },
                        {
                            name: "文新街道"
                        }
                    ]
                },
                {
                    name: "上城区",
                    subList: [
                        {
                            name: "延安街道"
                        },
                        {
                            name: "龙翔桥街道"
                        }
                    ]
                }
            ]//级联子数据列表
        }
    ]//级联数据列表
},
function(result){
    console.log(result);
});

入参

属性	类型	描述	必选	版本
title	String	级联控件标题。	NO	10.1.2
selectedList	Json	选中态，指定选中的子项，格式与入参一致，如 `[{"name":"杭州市",subList:[{"name":"上城区"}]}]`。	NO	10.1.2
list	Json	选择器数据列表。	YES	10.1.2
name	String	list 内的条目名称。	YES	10.1.2
subList	Json	子条目列表，list 内的子列表。	NO	10.1.2
fn	Function	选择完成后的回调函数。	NO	10.1.2

出参

属性	类型	描述	版本
success	bool	是否选择完成，取消返回 false。	10.1.2
result	Json	选择的结果，如 `[{"name":"杭州市",subList:[{"name":"上城区"}]}]`。	10.1.2

代码示例

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

    model.selectedItem = item;

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