地址下拉级联数据的组装与展示，AreaSplitUtil用着非常方便

有时候，我们用js写地址的下拉级联，每次选择都要查数据库定下一级，非常繁琐不方便，而且还要多次请求后台。今天给大家推荐一下iView的cascader下拉级联，地址数据一次请求，后台组装好格式，用着非常方便清爽。

 

Vue代码如下：

<i-row>

  <i-col span="24">

    <i-form-item label="地址:">

      <i-cascader palceholder="请选择国家/省份/城市/区域" :data="areaSplitList" v-model="selectAreaData"></i-cascader>

    </i-form-item>

  </i-col>

</i-row>

Cascader是iView的组件，绑定的data是从后台获取的组装数据，用于页面下拉展示，可以放到页面缓存中。双向绑定的v-model是本次选择的数据。

后台代码如下：

package cn.com.dhc.ec.web.admin.util;

import cn.com.dhc.ec.rpc.system.em.GradeEnum;
import cn.com.dhc.ec.rpc.system.vo.AreaVo;
import cn.com.dhc.ec.web.admin.model.member.AreaCollectionModel;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * @author Jintao
 */
public class AreaSplitUtil {

    /**
     * 获取地址
     */
    public static List<AreaCollectionModel> getSortedAreas(List<AreaVo> allAreas) {
        System.out.println("---------------------  所有地址数据组装，用于下拉级联  ------------------ ");
        long startTime=System.currentTimeMillis();
        System.out.println("地址数据组装开始:"+startTime);

        List<AreaVo> nationList = new ArrayList<>();
        List<AreaVo> proList = new ArrayList<>();
        List<AreaVo> cityList = new ArrayList<>();
        List<AreaVo> areaList = new ArrayList<>();
        //按级别拆分地址
        for (AreaVo areas:allAreas) {
            if(GradeEnum.NATION.equals(areas.getGradeEnum()) ){
                nationList.add(areas);
            }else if(GradeEnum.PROVINCE.equals(areas.getGradeEnum())){
                proList.add(areas);
            }else if(GradeEnum.CITY.equals(areas.getGradeEnum())){
                cityList.add(areas);
            }else if(GradeEnum.COUNTRY.equals(areas.getGradeEnum())){
                areaList.add(areas);
            }
        }
        //按级别分别组装数据List
        Map<String ,AreaCollectionModel> nationMap=groupedAreaAsMap(nationList,proList,cityList,areaList);
        System.out.println("地址数据组装结束:"+System.currentTimeMillis()+"。耗时："+(System.currentTimeMillis()-startTime));
        return new ArrayList<>(nationMap.values());
    }

    private static Map<String ,AreaCollectionModel> groupedAreaAsMap(List<AreaVo> nationList,List<AreaVo> proList,List<AreaVo> cityList, List<AreaVo> areaList) {
        //组装model
        List<AreaCollectionModel> nationAreaList = new ArrayList<>();
        List<AreaCollectionModel> proAreaList = new ArrayList<>();
        List<AreaCollectionModel> cityAreaList = new ArrayList<>();
        List<AreaCollectionModel> areaAreaList = new ArrayList<>();
        for (AreaVo area:areaList) {
            AreaCollectionModel areaModel = new AreaCollectionModel();
            areaModel.setLabel(area.getName());
            areaModel.setValue(area.getCode());
            areaModel.setParentCode(area.getParentCode());
            areaAreaList.add(areaModel);
        }
        for (AreaVo city:cityList) {
            AreaCollectionModel cityModel = new AreaCollectionModel();
            cityModel.setLabel(city.getName());
            cityModel.setValue(city.getCode());
            cityModel.setParentCode(city.getParentCode());
            cityModel.setChildren(new ArrayList<AreaCollectionModel>());
            cityAreaList.add(cityModel);
        }
        for (AreaVo pro:proList) {
            AreaCollectionModel proModel = new AreaCollectionModel();
            proModel.setLabel(pro.getName());
            proModel.setValue(pro.getCode());
            proModel.setParentCode(pro.getParentCode());
            proModel.setChildren(new ArrayList<AreaCollectionModel>());
            proAreaList.add(proModel);
        }
        for (AreaVo nation:nationList) {
            AreaCollectionModel nationModel = new AreaCollectionModel();
            nationModel.setLabel(nation.getName());
            nationModel.setValue(nation.getCode());
            nationModel.setChildren(new ArrayList<AreaCollectionModel>());
            nationAreaList.add(nationModel);
        }

        //按级别分别组装数据Map
        Map<String ,AreaCollectionModel> nationMap=new HashMap<>(nationAreaList.size());
        Map<String ,AreaCollectionModel> proMap=new HashMap<>(proAreaList.size());
        Map<String ,AreaCollectionModel> cityMap=new HashMap<>(cityAreaList.size());
        Map<String ,AreaCollectionModel> areaMap=new HashMap<>(areaAreaList.size());
        for(AreaCollectionModel nation:nationAreaList){
            if(!nationMap.containsKey(nation.getValue())){
                nationMap.put(nation.getValue(),nation);
            }
        }
        for(AreaCollectionModel pro:proAreaList){
            if(!proMap.containsKey(pro.getValue())){
                proMap.put(pro.getValue(),pro);
            }
        }
        for(AreaCollectionModel city:cityAreaList){
            if(!cityMap.containsKey(city.getValue())){
                cityMap.put(city.getValue(),city);
            }
        }
        for(AreaCollectionModel area:areaAreaList){
            if(!areaMap.containsKey(area.getValue())){
                areaMap.put(area.getValue(),area);
            }
        }

        //按级别拼接组装
        for(AreaCollectionModel area:areaAreaList){
            if(cityMap.containsKey(area.getParentCode())){
                cityMap.get(area.getParentCode()).getChildren().add(area);
            }
        }
        for(AreaCollectionModel city:cityAreaList){
            if(proMap.containsKey(city.getParentCode())){
                proMap.get(city.getParentCode()).getChildren().add(city);
            }
        }
        for(AreaCollectionModel pro:proAreaList){
            if(nationMap.containsKey(pro.getParentCode())){
                nationMap.get(pro.getParentCode()).getChildren().add(pro);
            }
        }
        return nationMap;
    }
}

 

由于数据隐私问题，我就不调用api获取数据了，写个测试数据试试Util好不好用。

测试代码如下：

package cn.com.dhc.ec.web.admin.controller.test;

import cn.com.dhc.ec.fw.rpc.controller.BaseController;
import cn.com.dhc.ec.rpc.system.em.GradeEnum;
import cn.com.dhc.ec.rpc.system.vo.AreaVo;
import cn.com.dhc.ec.web.admin.model.member.AreaCollectionModel;
import cn.com.dhc.ec.web.admin.util.AreaSplitUtil;
import com.alibaba.fastjson.JSON;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.ArrayList;
import java.util.List;

/**
 * @author Jintao
 */
@Controller
@RequestMapping(value = "/JintaoTest")
public class JintaoTestController extends BaseController {

	public static void main(String[] args) {
		System.out.println("this is a test content");
		List<AreaVo> areaVos = generateTestData();
		List<AreaCollectionModel> list= AreaSplitUtil.getSortedAreas(areaVos);
		System.out.println(JSON.toJSONString(list));

	}

	private static List<AreaVo> generateTestData() {
		List<AreaVo> allAreas =new ArrayList<>();
		AreaVo v;
		for(int i=0;i<10;i++){
			v=new AreaVo();
			v.setId((long) i);
			v.setCode(i+"");
			v.setName(i+"name");
			v.setGradeEnum(GradeEnum.NATION);
			allAreas.add(v);
		}
		for(int i=10;i<20;i++){
			v=new AreaVo();
			v.setCode(i+"");
			v.setName(i+"name");
			v.setParentCode((i-10)+"");
			v.setParentId((long) (i - 10));
			v.setGradeEnum(GradeEnum.PROVINCE);
			allAreas.add(v);
		}
		for(int i=20;i<30;i++){
			v=new AreaVo();
			v.setCode(i+"");
			v.setName(i+"name");
			v.setParentCode((i-10)+"");
			v.setParentId((long) (i - 10));
			v.setGradeEnum(GradeEnum.CITY);
			allAreas.add(v);
		}
		for(int i=30;i<40;i++){
			v=new AreaVo();
			v.setCode(i+"");
			v.setName(i+"name");
			v.setParentCode((i-10)+"");
			v.setParentId((long) (i - 10));
			v.setGradeEnum(GradeEnum.COUNTRY);
			allAreas.add(v);
		}
		return allAreas;
	}
}

 

非常好用。结果如下：