easyui tree/TreeGrid使用：逐级加载、指定节点刷新、全部展开

1、逐级加载：逐级加载对于数据量比较大的tree，逐级加载可以有效的缓解服务器压力，提升用户体验。逐级加载发送的请求参数：当前节点id，该参数是客户端自动发送的；接收的响应数据：通过当前节点id，查询的直属子级所有数据；所以在逐级加载与全部加载获取tree数据的代码方面，前端easyui方法调用的代码是相同的，而服务端方法不同，逐级加载需要接收当前展开节点id来获取子级数据(首次加载id为空)，全部加载无需参数，服务器返回的数据逐级加载只有子级数据，而全部加载子级、孙子级数据。



2、刷新，刷新指定节点：刷新分为刷新整个树和刷新指定节点，如果是刷新整个树，调用代码为("#tree").tree("reload")此时无需，如果刷新指定节点，调用代码为("#tree").tree("reload")此时无需，如果刷新指定节点，调用代码为(“#tree”).tree(“reload”,parentNode.target)，传入需要刷新节点的父节点的target属性作为参数(刷新当前节点传入当前节点的target属性结果当前节点并未刷新，而是刷型了子节点)。使用过程中，对树节点执行新增和修改操作，都需要获取当前选中节点的父节点进行刷新；对树节点执行删除操作，需要获取当前选中节点父节点的父节点(即爷爷节点)进行刷新，否则可能有些效果无法体现。

3、全部展开：分为展开整个树和展开指定节点下所有节点，调用方法分别为("#tree").tree("expandAll")和("#tree").tree("expandAll")和(“#tree”).tree(“expandAll”,selectedNode.target)，两者之间没有什么可注意。这里想说的是另外一个问题，是与全部加载和逐级加载相关联的一个问题。

(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(){
//首先在loadTree时，定义一个声明是否请求所有数据的全局变量isAll，默认值为false，代表逐级加载
isAll = false;
$('#tree').tree({
url: '/tree/son/ajax',
queryParams:{isAll:isAll},//传递请求参数，与下面的方式一相对应

//添加onBeforeExpand展开前事件处理函数，通过isAll参数，让前端或者后台知道此时应该获取的是全部数据还是逐级加载数据
onBeforeExpand:function(node){

//方式一：重置请求参数，让服务器端判断是否获取全部数据
$('#tree').tree('options').queryParams = {id:node.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",selectNode.target);
}

服务端方法：
//方式一对应的服务端方法
public String getTreeList(String id,boolean isAll){
List<Tree> treeList = new ArrayList<Tree>();
if(!isAll){
if("".equals(id)){
//加载根节点
treeList = service.getChildrenTreeNode();
}else{
//按照id逐级加载子级
treeList = service.getChildrenTreeNodeById(id);
}
}else{
if("".equals(id)){
//加载整个树的全部
treeList = service.getAllChildrenTreeNode();
}else{
//加载指定节点下的全部
treeList = service.getAllChildrenTreeNodeById(id);
}
}
return JsonMapper.toJsonString(treeList);
}

//方式二对应的服务端方法，对应url:'/tree/son/ajax'的处理方法，逐级加载
public String getChildrenTreeList(String id){
List<Tree> treeList = new ArrayList<Tree>();
if("".equals(id)){
//加载根节点
treeList = service.getChildrenTreeNode();
}else{
//按照id逐级加载子级
treeList = service.getChildrenTreeNodeById(id);
}
return JsonMapper.toJsonString(treeList);
}

//方式二对应的服务端方法，对应url:'/tree/all/children/ajax'的处理方法，加载全部或指定节点下全部
public String getAllChildrenTreeList(String id){
List<Tree> treeList = new ArrayList<Tree>();
if("".equals(id)){
//加载整个树的全部
treeList = service.getAllChildrenTreeNode();
}else{
//加载指定节点下的全部
treeList = service.getAllChildrenTreeNodeById(id);
}
return JsonMapper.toJsonString(treeList);
}

总结：解决这个问题的关键就是通过onBeforeExpand事件重置请求参数或请求路径，而对于非逐级加载的方式，不存在这样的问题。