2020-11-10

最新推荐文章于 2022-09-19 16:42:30 发布

原创最新推荐文章于 2022-09-19 16:42:30 发布 · 178 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java

笔记专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种将大量下拉选项通过树状结构组织的方法，以简化用户的选择过程。通过分级展示城市等地理信息，提高了用户体验。提供了具体的实现代码示例。

区域树下拉列表的简单实现

前言

在做输入页面时，为了简化用户的输入，以及避免错误数据的录入，往往提供各种下拉框供用户选择，但是，有时候可供下拉的数据选项非常多，导致下拉选择也非常麻烦，要靠眼睛去寻找合适的选项，并不容易。

为了解决这个问题，把下拉选项按照一定的逻辑进行分级分类，采用树状的方式下拉是个好办法。

举例来说，城市的下拉选项，如果把全国的城市全部列出来，实在太多了，让用户从如此多的选项中选择，显然不现实，因此如果按照地区分类，先按照华东、华北、华南…等地区分类，然后再按照省份分类，然后再按照市分类，再按照县分类，如此一级一级地往下分，查找起来非常容易，下拉选择方便多了。

提示：以下是本篇文章正文内容，下面案例可供参考

1.@RestController层

代码如下（示例）：

@ApiOperation("获取区域信息列表")
@GetMapping("/list")
public AjaxResult list(Area area) {
    List<Area> list = areaService.getAreaList(area);
    return AjaxResult.success(list);
}

@ApiOperation("获取区域下拉树列表")
@GetMapping("/treeselect")
public AjaxResult treeselect(Area area)
{
    List<Area> areas = areaService.getAreaList(area);
    return AjaxResult.success(areaService.buildAreaTreeSelect(areas));
}

2.@Service

代码如下（示例）：

/**
     * 构建前端所需要下拉树结构
     *
     * @param areas 区域列表
     * @return 下拉树结构列表
     */
    @Override
    public List<TreeSelect> buildAreaTreeSelect(List<Area> areas)
    {
        List<Area> areaTrees = buildAreaTree(areas);
        return areaTrees.stream().map(TreeSelect::new).collect(Collectors.toList());
    }

/**
     * 构建前端所需要树结构
     *
     * @param regions 区域列表
     * @return 树结构列表
     */
    @Override
    public List<Area> buildAreaTree(List<Area> regions) {
        List<Area> tree = new ArrayList<Area>();
        List<String> tempList = new ArrayList<String>();
        for (Area area : regions) {
            tempList.add(area.getAreaCode());
        }
        for (Iterator<Area> it = regions.iterator(); it.hasNext(); ) {
            Area region = (Area) it.next();
            // 如果是顶级节点, 遍历该父节点的所有子节点
            if (!tempList.contains(region.getParentCode())) {
                recursionFn(regions, region);  //递归列表
                tree.add(region);
            }
        }
        if (tree.isEmpty()) {
            tree = regions;
        }
        return tree;
    }
    
    /**
     * 递归列表
     * @param list
     * @param region
     */
    private void recursionFn(List<Area> list, Area region){
        // 得到子节点列表
        List<Area> childList = getChildList(list, region);
        region.setChildren(childList);
        for(Area child : childList){
            if(hasChild(list, child)){
                //判断是否有子节点
                Iterator<Area> it = childList.iterator();
                while (it.hasNext()){
                    Area n = (Area) it.next();
                    recursionFn(list, n);
                }
            }
        }
    }
/**
     * 得到子节点列表
     * @param list
     * @param area
     * @return
     */
    private List<Area> getChildList(List<Area> list, Area area){
        List<Area> tlist = new ArrayList<Area>();
        Iterator<Area> it = list.iterator();
        while (it.hasNext()){
            Area region = (Area) it.next();
            if(StringUtils.isNotNull(region.getParentCode()) && region.getParentCode().equals(area.getAreaCode())) {
                tlist.add(region);
            }
        }
        return tlist;
    }