级联选择器

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

效果图

cascade

接口说明

// 设置选择器的选中项
@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];
阿里云首页 移动开发平台 mPaaS 相关技术圈