新网创想网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

Element的el-tree控件后台数据结构的生成以及方法的抽取-创新互联

最近用到了el-tree控件,主要是数据的格式,按照官网的数据格式来就可以显示节点的树形结构了。
代码参考很多

裕民网站制作公司哪家好,找成都创新互联公司!从网页设计、网站建设、微信开发、APP开发、自适应网站建设等网站项目制作,到程序开发,运营维护。成都创新互联公司于2013年成立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联公司

这里给出一个比较好的链接:https://www.jb51.net/article/181990.htm


代码说明在注释里写的很详细了已经,这里不再叙述说明。至于为什么抽取成这种格式的数据,那是因为ElementUI-tree规定的数据格式,你想要用这个控件,就必须按照他们规定的这个格式 来。
数据格式如下:


Controller代码

@RequestMapping("/cateList")
  @ResponseBody
  public List cateList() {

    // 整体思路:
    // 1、取得所有数据、放入集合List1 (tbCategories)
    // 2、将List1所有数据都放入到map(treeMap)中:元素id为键,元素本身对象为值
    // 3、取得顶层节点放入集合List2中(resultList)
    // 4、遍历List1中的所有数据,通过数据的parentId为键在map中取值
    //   1)如果能取到,则说明该元素有父节点
    //      1、判断该父节点下的childList中是否有已经子节点
    //       1、若无:则创建一个集合,将子节点放入
    //       2、若有:则直接将子节点放入即可
    // 5、把放好的数据放回到map中
    // 6、返回List2(resultList)

    // 注意:整个过程将所有数据取出放入list2(resultList),返回的也是  //list2


    List tbCategories = categoryService.cateList();

    List resultList = new ArrayList(); // 存贮顶层的数据

    Map treeMap = new HashMap();
    Object itemTree;

    for(int i = 0;i());
        }
        category.getChildList().add(tbCategories.get(i)); // 添加到父节点的ChildList集合下

        // 这一步其实可以不要,因为我们修改了数据(添加了子节点,然后在将元素放入到map中,
        // 若键相同,map会自动覆盖掉相同的键值对,达到更新map集合中的数据的目的),但是我们
        // 这里只是从map中取值,而并不关心值的子节点(子节点是对象本身自己封装的。这里我们知道
        // 元素从查询后放入map,父节点放入list,然后通过键来在map中取得对象,之后再将修改过的对象重新放入map当中
        // ,我们并没有直接操作list,但是在list中对象的值却是已经修改过了,这就是对象的引用传递,同一个引用对象是通过
        // 地址值来操作对象的,即有不同的引用,但是对象中的属性是已经通过引用的操作而改变的,所以这里一旦修改过后,无论是map中还是list中,再次取值时都已经是更改过后的值了)
        treeMap.put(tbCategories.get(i).getParentId(),category); // 把放好的数据放回到map中
      }

    }


   return resultList;
  }                
当前名称:Element的el-tree控件后台数据结构的生成以及方法的抽取-创新互联
URL标题:http://wjwzjz.com/article/dedhec.html