easyUi combotree 实现动态加载树节点

转载的文章：

1、easyui 1.2.4

2、按官方说明编写如下代码：

< select id = "cc" style = "width:200px ;" ></ select >

< input id = "cc" value = "01" >  

3、现在我们来实现动态加载：

  首先，以行政区划为例，combotree，假如我们每次访问都需要传入一个上级代码的areaId，easyui tree，现在我们来设置首次访问的url。combotree。

   $( '#cc' ).combotree ({

url:"areaTree.ajax?areaId=0",  

onBeforeExpand:function(node) {

      $('#cc').combotree("tree").tree("options").url = "areaTree.ajax?areaId=" + node.id;

}

   }); 

 分析：

      1、url:"areaTree.ajax?areaId=0", 这个ajax表示ajax到后台取数据，easyui tree， areaId = 0，这个表示首先应该是加载 全国 这个根节点

      2、 onBeforeExpand ：这个是监听我每次点击非末级节点，展开其下级子节点时，easyui numberbox，展开前做什么事。combotree。查看comboxtree的源码，easyui tree，我们可以发现如下这段：

可以看出combotree 是继承 combo  和  tree 两个控件。因此，easyui，我们在监听这个事件时，easyui numberbox，才做了如上写的代码，把combotree内置的tree的options选项的url重置成一个动态取选择值的url。easyui numberbox。

注意：这里不能写成： $('#cc').combotree("tree").tree（{URL： "areaTree.ajax?areaId=" + node.id }），combotree， 如果这样写，combotree，combotree会执行两次调用，并且把你原来的值给清除，用新的获取到的值替换，extjs combotree，相当于做了reload的操作。这个可以从combotree的源码的reload方法里面看出来：

从上面代码可以看出了，easyui tree，combotree在做reload的时候，是把其内置的tree的url直接改变，combotree，而不是改变tree的options。

所以，我在监听展开节点时，直接改变其内置tree的options，combotree，这样在tree数据加载的时候调用的时候我们改变后的url，easyui numberbox，但是在combotree自身的url仍然是我们一开始设置的加载  全国 这个根节点的url。这点可以通过onloadsuccess方法进行监听查看。easyui。

评论

4 楼 TheMatrix 2014-08-29  

进入编辑页面时，如果之前保存的值是第三级或者更深的叶子节点，就没办法正常显示了，因为那一级数据还没加载。

3 楼 matry521 2014-03-28  

大神可否把你写的代码贴出来看一下啊。。。不知道怎么改变options啊

2 楼 zhoujiamail 2013-01-09  

非常感谢，果然可以

1 楼 syx278250658 2012-04-04  

mark
$('#cc').combotree("tree").tree