reactjs省市县三级联动

yuri-li 发布于 2016/10/14 17:14
阅读 1K+
收藏 1
 如何使用ReactJs+Relay+GraphQL,实现省市县三级联动的组件?
1、使用json模拟服务器端的数据
[
    {
        "id": "1001",
        "name": "北京市",
        "children": [
            {
                "id": "1001001",
                "name": "北京市",
                "children": [
                    {
                        "id": "1001001001",
                        "name": "东城区"
                    },
                    {
                        "id": "1001001002",
                        "name": "西城区"
                    }
                ]
            }
        ]
    },
    {
        "id": "1002",
        "name": "天津市",
        "children": [
            {
                "id": "1002001",
                "name": "天津市",
                "children": [
                    {
                        "id": "1002001001",
                        "name": "红桥区"
                    },
                    {
                        "id": "1002001002",
                        "name": "大港区"
                    }
                ]
            }
        ]
    },
    {
        "id": "1003",
        "name": "山西省",
        "children": [
            {
                "id": "1003001",
                "name": "太原市",
                "children": [
                    {
                        "id": "1003001001",
                        "name": "市辖区"
                    },
                    {
                        "id": "1003001002",
                        "name": "双桥区"
                    }
                ]
            },
            {
                "id": "1003002",
                "name": "临汾市",
                "children": [
                    {
                        "id": "1003002001",
                        "name": "洪洞县"
                    },
                    {
                        "id": "1003002002",
                        "name": "霍县"
                    }
                ]
            }
        ]
    }
]
2、数据分server端与client端。根据IP,返回client端的数据不同。
模拟方式:在浏览器的地址栏中,携带参数area.其中,area=0,返回北京市的数据,依次类推
3、地址联动的样式,允许动态改变。即,输入Map形式的参数,效果不同。
比如:
1)输入参数[0:"省",1:"市",2:"县"],显示正常的三级联动
2)输入参数[1:"市",2:"县"],仅显示市县两级的下拉框
其中,key代表数据的层级,value代表下拉框的名称
4、根据窗口大小,改变样式。建议使用flexbox布局
仅考虑屏幕宽度width:(0,320],(320,640],(640,1024],(1024,1600],(1600,+∞)
5、修改数据源,也可以用作其他联动的下拉框,比如:书籍分类、章节等
加载中
返回顶部
顶部