重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
最近用到了el-tree控件,主要是数据的格式,按照官网的数据格式来就可以显示节点的树形结构了。
代码参考很多
创新互联专注于掇刀企业网站建设,响应式网站设计,成都商城网站开发。掇刀网站建设公司,为掇刀等地区提供建站服务。全流程定制开发,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务
这里给出一个比较好的链接:https://www.jb51.net/article/181990.htm
代码说明在注释里写的很详细了已经,这里不再叙述说明。至于为什么抽取成这种格式的数据,那是因为ElementUI-tree规定的数据格式,你想要用这个控件,就必须按照他们规定的这个格式 来。
数据格式如下:
Controller代码
@RequestMapping("/cateList") @ResponseBody public ListcateList() { // 整体思路: // 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
实体类:
private Long nodeId; private String categoryName; private Long parentId; private Long childId; private ListchildList;
以上数据都在后台封装好了,前台直接获取数据显示即可
js:
defaultProps:{ children: 'childList', label: 'categoryName' // 这里的名字要和你封装的数据中的节点的名字一样 } // 点击事件 handleNodeClick: function (data) { console.log("没做处理"); }
方法抽取
上面的方法虽然也能用,但是想把这个方法抽取成一个通用的方法,以后再写的时候就可以直接调取该方法了。抽取的过程中还是遇到了很多的问题的。
例如实体类A是对应数据库中存储节点的表的实体类,但是,实体类中是不存在setChildList、getChildList集合这些方法的。我就把这些存贮信息的字段写在了一个工具类里面,然后方法也在该工具类里。这样返回的时候就要返回一个装有该工具类的一个集合了。还有一个问题就是该工具类中都需要那些字段?因为是一棵树,所以我们需要节点id,几点的父id,节点的名称,以及存储子节点的集合,如果想要更多的数据,可以添加一个 T data泛型,该泛型直接将原本存储节点的实体类对象存储进来。这样所有的数据就都整齐了,数据结构也就完整了。
contrell代码:
因为我们想抽取一个公用的方法,那么参数的类型就是不确定的,即传入的list中元素的类型是不固定的,所以要用到泛型。上面说过了,我们要拿到节点id,父id,以及节点的名称赋值给工具类中对应的字段。但是既然是用泛型,所以就不知道对象类型,所以我们在工具类中是点不出相应的方法来取到值的,我们就要用到反射,反射的知道类中具体的字段或者方法的名字来取值,所以我们在controller来调用工具类的时候就要,将节点id、父id和节点名称传入。当然了还要传入从后台查询到了装有数据的list集合。
contreller代码如下所示:
@RequestMapping("/cateList") @ResponseBody public ListcateList() throws Exception{ List tbCategories = categoryService.cateList(); List treeList = TreeUtils.getTreeList(tbCategories,"nodeId", "parentId", "categoryName"); return treeList; }
工具类:
// 抽取方法的时候要考虑一个问题,即,返回一个集合,集合中有父节点和字节点,父节点和字节点的类型一定要统一, // 即这里返回的是一个装有TreeUtils类型的集合,那么集合里的父节点和子节点一定都得是TreeUtils类型的 public class TreeUtils{ private Integer id; // 节点id private Integer parentId; // 父节点 private String name; // 节点名称 ,返回给前台的是一个装有TreeUtils的集合的数据,所以在前台显示数据的时候,el-tree的lable的名字的和这个一样 private List childList; // 父节点中存放子节点的集合 private T data; // 节点数据
方法
/** * @param listData // 从数据库中查询的数据 * @return */ public static ListgetTreeList(List<?> listData ,String id,String parentId,String categoryName) throws Exception{ List resultList = new ArrayList (); // 最终返回的结果 Map map = new HashMap (); for(int i =0;i
反射的方法
/** * 通过反射得到的数据类型的也是不一定的,所以这里我们返回值为Object * Object是无法直接转为Integer,现将Object转为String,然后再将String转为Integer * @param item * @param fileName * @return */ public static Object getFileValue(Object item,String fileName) throws Exception { Class<?> aClass = item.getClass(); Field file = aClass.getDeclaredField(fileName); // 得到所有字段包括私有字段 file.setAccessible(true); // 取消访问限制 return file.get(item); // 这里就体现出反射的意思了,我们通常都是通过对象拿到字段,这里是通过字段,将类的字节码对象为参数传入,来得到值 }
ps:抽取方法遇到了很多的问题,其中的T,?等泛型还只是会简单的用,并不熟练,以后要多加学习。
到此这篇关于Element的el-tree控件后台数据结构的生成以及方法的抽取的文章就介绍到这了,更多相关Element el-tree生成及方法抽取内容请搜索创新互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持创新互联!