6.apicloud 省市区三级地区选择

WeChat013b0f55ff5c0f5c351134b73ae8533a.png

json数据

[{
    "name": "北京市",
    "sub": [{
        "name": "东城区"
    }, {
        "name": "西城区"
    }]
}, {
    "name": "河南省",
    "sub": [{
        "name": "郑州市",
        "sub": [{
            "name": "中原区"
        }, {
            "name": "金水区"
        }]
    }, {
        "name": "驻马店市",
        "sub": [{
            "name": "西平县"
        }, {
            "name": "泌阳县"
        }]
    }]
},
{
    "name": "河北省",
    "sub": [{
        "name": "石家庄市",
        "sub": [{
            "name": "裕华区"
        }, {
            "name": "长安区"
        }]
    }, {
        "name": "唐山市",
        "sub": [{
            "name": "路南区"
        }, {
            "name": "路北区"
        }]
    }]
}]

js代码

  //选择地区
    function selectArea() {
        var UIActionSelector = api.require('UIActionSelector');
        UIActionSelector.open({
            datas: 'widget://res/city.json',
            layout: {
                row: 5,
                col: 3,
                height: 30,
                size: 12,
                sizeActive: 14,
                rowSpacing: 5,
                colSpacing: 10,
                maskBg: 'rgba(0,0,0,0.2)',
                bg: '#fff',
                color: '#888',
                colorActive: '#f00',
                colorSelected: '#f00'
            },
            animation: true,
            cancel: {
                text: '取消',
                size: 12,
                w: 90,
                h: 35,
                bg: '#fff',
                bgActive: '#ccc',
                color: '#888',
                colorActive: '#fff'
            },
            ok: {
                text: '确定',
                size: 12,
                w: 90,
                h: 35,
                bg: '#fff',
                bgActive: '#ccc',
                color: '#888',
                colorActive: '#fff'
            },
            title: {
                text: '请选择',
                size: 12,
                h: 44,
                bg: '#eee',
                color: '#888'
            },
            fixedOn: api.frameName
        }, function(ret, err) {
            if (ret) {
                var area = $api.byId('area');
                area.innerHTML = ret.level1 + ret.level2 + (ret.level3 ? ret.level3 : '');
            } else {
                alert(JSON.stringify(err));
            }
        });
    }