ajax请求数据 ztree_一种使用zTree加载大量数据的方法与流程

本发明涉及JAVA开发技术领域，特别是一种使用zTree加载大量数据的方法。

背景技术：

目前在JAVA开发项目的应用中,程序员经常会使用到zTree的插件在页面上实现树状图的展示或者操作。以往主要用于菜单栏，权限配置，地区配置，部门配置等少量数据的范畴里面。但是如果遇到大量数据的等级分类；直接封装成JSON格式让zTree.node去解析；就会导致页面崩溃报错等现象。这样不但会影响项目进度，还会影响功能的完整性等。如果使用分级加载的解决方案，会确保zTree.node能正确解析出JSON格式数据；还可以减轻页面的加载压力和避免缓存溢出等严重技术问题，有利于线上平台给客户反馈满意的体验效果。

技术实现要素：

本发明解决的技术问题在于提供一种使用zTree加载大量数据的方法；解决zTree加载大量数据时存在的问题。

本发明解决上述技术问题的技术方案是：

所述的方法是：

首先根据数据量的大小初始化加载的树节点级别，然后根据对树的操作，获取展开的父节点ID，写一个noExpand回调事件的ajax异步方法，获取该父节点下面所对应的子节点信息，再封装到treeNode里面；最终展示出子节点的所有信息。

所述的方法具体包括以下步骤：

(1)、分析树节点数据，用SQL语句查询有效的节点总数是多少，用于后面的方法选择；

(2)、生成父节点，先把第一级父节点集合封装到list<treeNode>里面，用json格式传到前端；页面用zTree的jquery插件，把list<treeNode>放到zNode里，编写好zTree的setting配置，setting里面必须配置callback函数noExpand触发事件，再写一个js的触发事件方法expandNode，获取点击展开的父节点的ID，level封装到ajax的方法里面，传到后台java代码运行，根据父节点ID查询出下一个level父ID为父节点ID的树节点集合，再把集合addNode到treeObj上面，添加一个属性值到节点上，用getNodeByParam或者当前父节点位置，updateNode属性flag＝true，防止下一次点击展开父节点时会重覆生成树节点出来；后面级别的节点也是按照这样操作；

(3)、生成子节点，后台获取所有对应父ID的子节点集合，封装到list<treeNode>，传到页面上，添加到treeObj；每次点开节点时都会触发noexpand回调事件，根据flag！＝true触发ajax方法生成新的树节点。

所述的步骤可以分为：

第1步、准备一张树节点的数据库表；

第2步、在后台的action里写一个树节点的生成方法，设计的逻辑方向是，当传进来的父节点ID为空时,生成前三级的树节点集合；

当传入来的第三级父节点ID不为空,根据父节点ID生成对应的第四级子节点集合,把集合封装到JSON里面；

第3步、在页面上添加zTree的初始化js方法,配置好setting的属性和回调事件,再写一个回调事件noExpand的方法,获取展开任意父节点时传递ID到ajax方法里；

第4步、编辑ajax方法,根据父节点ID传到action里,返回第四级的子节点的JSON集合,添加到对应的父节点下面,然后更新第三级父节点node.flag＝“true”。

本发明的有益效果是：

可以防止zTree加载大量JSON数据时异常导致树节点功能失效的情况出现，而且大大改善了页面初始化的响应速度和避免页面卡顿，减轻了服务器的压力和防止内存溢出。

附图说明

下面结合附图对本发明进一步说明：

图1为本发明的实现流程图；

图2为本发明zTree加载数据流程图；

图3为本发明的页面代码截图举例。

具体实施方式

下面将结合附图，对本发明实施例中的技术方案进行清楚、完整的描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出实质性创造获得的方案，都属于本发明保护的范围。

如图1所示，本发明基本实现流程如下：

第1步、准备一张树节点的数据库表，以《国民经济行业分类标准GB/T 4754-2016》的数据信息表为例，总共有1642条数据,总共分为4级类别，其中子节点总数1094条。

第2步、在后台的action里写一个树节点的生成方法，设计的逻辑方向是，当传进来的父节点ID为空时,生成前三级的树节点集合。

当传入来的第三级父节点ID不为空,根据父节点ID生成对应的第四级子节点集合,把集合封装到JSON里面.

第3步、在页面上添加zTree的初始化js方法,配置好setting的属性和回调事件,再写一个回调事件noExpand的方法,获取展开任意父节点时传递ID到ajax方法里.

第4步、编辑ajax方法,根据父节点ID传到action里,返回第四级的子节点的JSON集合,添加到对应的父节点下面,然后更新第三级父节点node.flag＝“true”.

第5步、结束。

见图2，本发明zTree加载数据方法如下步骤：

1：分析树节点数据。一个标准的树节点数据库必须有的几个字段：ID，节点名称，节点code，父节点ID，等级，enable，sort。有了这些字段的数据后，便可快捷准确地构建和查找你想要的zTree出来。首先用SQL语句查询有效的节点总数是多少，用于后面的方法选择，例如：select count(*)form表名where enable＝1；假如count＝2000多条，再找到最后的节点的level是多少，例如level总共有4级，查询SQL则：select count(*)form表名where enable＝1and level！＝4；假如count＝1000，则我们可以使用分级来获取各层的树节点信息。

2：生成父节点。先把第一级父节点集合封装到list<treeNode>里面，用json格式传到前端。页面用zTree的jquery插件，把list<treeNode>放到zNode里，编写好zTree的setting配置，setting里面必须配置callback函数noExpand触发事件，再写一个js的触发事件方法expandNode，获取点击展开的父节点的ID，level封装到ajax的方法里面，传到后台java代码运行，根据父节点ID查询出下一个level父ID为父节点ID的树节点集合，再把集合addNode到treeObj上面，添加一个属性值到节点上，用getNodeByParam或者当前父节点位置，updateNode属性flag＝true，防止下一次点击展开父节点时会重覆生成树节点出来.这样整个解决方法就实现了，后面的三级节点也是按照这样操作，主要把后台的java代码逻辑梳理好，根据level和节点id来获取对应的树节点集合.

3：生成子节点。到了子节点也是同理，后台获取所有对应父ID的子节点集合，封装到list<treeNode>，传到页面上，添加到treeObj.这样每次点开节点时都会触发noexpand回调事件，根据flag！＝true触发ajax方法生成新的树节点，

4：结束。

本方法主要利用zTree的callback中的noExpand回调事件，onExpand用于捕获节点被展开的事件回调函数，主要在父节点展开时触发中使用。解决的步骤：首先根据数据量的大小初始化加载的树节点级别，例如父节点总数1000条以下的可以先从后台直接加载封装到treeNode下，这样可以减少后面的代码量和节省开发时间。然后根据对树的操作，获取展开的父节点ID，写一个noExpand回调事件的ajax异步方法，获取该父节点下面所对应的子节点信息。这样的方法可以减少zTree生成时的负担，可以针对解决加载所有数据而导致崩溃的根本原因。假如父节点的总数也超过1000以上，为了zTree的稳定性可以分级来获取树节点，实现方法利用noExpand回调事件获取上一级父节点ID，从后台获取该父节点下一级的节点信息，再封装到treeNode里面，重覆以上步骤，最终展示出子节点的所有信息，虽然这样的处理方法有点繁琐，但是能确保整个树功能的正常使用，避免因为数据量太大导致zTree崩溃的情况出现。

本发明实现的代码可以参考附图3。