2023年6月22日发(作者：)

easyuitreeTreeGrid使⽤：逐级加载、指定节点刷新、全部展开1、逐级加载：逐级加载对于数据量⽐较⼤的tree，逐级加载可以有效的缓解服务器压⼒，提升⽤户体验。逐级加载发送的请求参数：当前节点id，该参数是客户端⾃动发送的；接收的响应数据：通过当前节点id，查询的直属⼦级所有数据；所以在逐级加载与全部加载获取tree数据的代码⽅⾯，前端easyui⽅法调⽤的代码是相同的，⽽服务端⽅法不同，逐级加载需要接收当前展开节点id来获取⼦级数据(⾸次加载id为空)，全部加载⽆需参数，服务器返回的数据逐级加载只有⼦级数据，⽽全部加载⼦级、孙⼦级数据。

2、刷新，刷新指定节点：刷新分为刷新整个树和刷新指定节点，如果是刷新整个树，调⽤代码为(“#tree”).tree(“reload”,)，传⼊需要刷新节点的⽗节点的target属性作为参数(刷新当前节点传⼊当前节点的target属性结果当前节点并未刷新，⽽是刷型了⼦节点)。使⽤过程中，对树节点执⾏新增和修改操作，都需要获取当前选中节点的⽗节点进⾏刷新；对树节点执⾏删除操作，需要获取当前选中节点⽗节点的⽗节点(即爷爷节点)进⾏刷新，否则可能有些效果⽆法体现。3、全部展开：分为展开整个树和展开指定节点下所有节点，调⽤⽅法分别为(“#tree”).tree(“expandAll”,)，两者之间没有什么可注意。这⾥想说的是另外⼀个问题，是与全部加载和逐级加载相关联的⼀个问题。

(1)、先对expandAll全部展开动作进⾏⼀下剖析：

第⼀：只对当前页⾯已经获取的即已经加载出来的节点执⾏展开动作，

第⼆：全部展开expandAll实际执⾏的是expand的循环操作，如果当前节点可展开但还没有加载⼦节点，则向服务器发送id请求⼦节点数据，

(2)、下⾯⽤⼀个⽰例看看在逐级加载的树中执⾏全部展开存在的问题以及解决⽅案，完整的tree如下图：

加载tree的⽅式为逐级加载，展开全树的过程：⾸次加载显⽰【顶级A】，然后点击展开箭头，⾃动向服务器发送【顶级A】的id作为参数，获取【⼆级A】、【⼆级B】，再点击【⼆级B】展开箭头发送【⼆级B】的id，获取【三级A】，点击【三级A】展开箭头发送【三级A】的id获取【四级A】、【四级B】

注：点击展开箭头与执⾏expand⽅法(expandAll实际也是expand⽅法)过程相同，都会触发onBeforeExpand事件(3)、执⾏expandAll过程及问题：⾸次加载获取了【顶级A】，执⾏expandAll，因为【顶级A】的⼦节点还没有被加载，则向服务器请求⼦节点数据，因为服务器端返回数据⽅式为逐级返回(逐级加载)，拿到的数据只有【⼆级A】、【⼆级B】，之后并不会⾃动对【⼆级B】执⾏expandAll，⽽此时我们希望获取【顶级A】下⾯所有⼦级、孙⼦级数据(4)、我们希望发送⼀个新的请求地址来获取⼦级、孙⼦级数据，或者通过传递参数，让服务器端逐级获取数据的⽅法通过参数判断此时应该返回当前节点下的全部数据，⽽不是只有⼦级数据，那么怎么来做呢？其实很简单，如下：客户端⽅法： //加载tree初始化⽅法 function loadTree(){ function loadTree(){ //⾸先在loadTree时，定义⼀个声明是否请求所有数据的全局变量isAll，默认值为false，代表逐级加载 isAll = false; $('#tree').tree({

url: '/tree/son/ajax',

queryParams:{isAll:isAll},//传递请求参数，与下⾯的⽅式⼀相对应 //添加onBeforeExpand展开前事件处理函数，通过isAll参数，让前端或者后台知道此时应该获取的是全部数据还是逐级加载数据 onBeforeExpand:function(node){ //⽅式⼀：重置请求参数，让服务器端判断是否获取全部数据 $('#tree').tree('options').queryParams = {id:,isAll:isAll}; //⽅式⼆：重置请求地址，前端进⾏判断，是否发送到请求全部数据的地址 if(isAll == true){ $('#tree').tree('options').url = '/tree/all/ajax'; } } }); } //定义⼀个全部展开触发⽅法 function openAllChildren(){ //将是否请求所有数据的全局变量值设置为true，代表加载全部 isAll = true; var selectNode = $("#tree").tree('getSelected'); //执⾏全部展开expandAll $("#orgTree").tree("expandAll",); } 服务端⽅法： //⽅式⼀对应的服务端⽅法 public String getTreeList(String id,boolean isAll){ List treeList = new ArrayList(); if(!isAll){ if("".equals(id)){ //加载根节点 treeList = ldrenTreeNode(); }else{ //按照id逐级加载⼦级 treeList = ldrenTreeNodeById(id); } }else{ if("".equals(id)){ //加载整个树的全部 treeList = ChildrenTreeNode(); }else{ //加载指定节点下的全部 treeList = ChildrenTreeNodeById(id); } } return String(treeList); } //⽅式⼆对应的服务端⽅法，对应url:'/tree/son/ajax'的处理⽅法，逐级加载 public String getChildrenTreeList(String id){ List treeList = new ArrayList(); if("".equals(id)){ //加载根节点 treeList = ldrenTreeNode(); }else{ //按照id逐级加载⼦级 treeList = ldrenTreeNodeById(id); } return String(treeList); return String(treeList); } //⽅式⼆对应的服务端⽅法，对应url:'/tree/all/children/ajax'的处理⽅法，加载全部或指定节点下全部 public String getAllChildrenTreeList(String id){ List treeList = new ArrayList(); if("".equals(id)){ //加载整个树的全部 treeList = ChildrenTreeNode(); }else{ //加载指定节点下的全部 treeList = ChildrenTreeNodeById(id); } return String(treeList); } 总结：解决这个问题的关键就是通过onBeforeExpand事件重置请求参数或请求路径，⽽对于⾮逐级加载的⽅式，不存在这样的问题。