easyUi combotree 实现动态加载树节点

按官方说明编写如下代码:

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

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

3、现在我们来实现动态加载:
  首先,以行政区划为例,假如我们每次访问都需要传入一个上级代码的areaId,现在我们来设置首次访问的url。

  $('#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到后台取数据, areaId = 0,这个表示首先应该是加载 全国 这个根节点
      2、 onBeforeExpand :这个是监听我每次点击非末级节点,展开其下级子节点时,展开前做什么事。查看comboxtree的源码,我们可以发现如下这段:
easyUi <wbr>combotree <wbr>实现动态加载树节点
可以看出combotree 是继承 combo  和  tree 两个控件。因此,我们在监听这个事件时,才做了如上写的代码,把combotree内置的tree的options选项的url重置成一个动态取选择值的url。
注意:这里不能写成:  $('#cc').combotree("tree").tree({URL: "areaTree.ajax?areaId=" + node.id }),如果这样写,combotree会执行两次调用,并且把你原来的值给清除,用新的获取到的值替换,相当于做了reload的操作。这个可以从combotree的源码的reload方法里面看出来:
easyUi <wbr>combotree <wbr>实现动态加载树节点
从上面代码可以看出了,combotree在做reload的时候,是把其内置的tree的url直接改变,而不是改变tree的options。
所以,我在监听展开节点时,直接改变其内置tree的options,这样在tree数据加载的时候调用的时候我们改变后的url,但是在combotree自身的url仍然是我们一开始设置的加载  全国 这个根节点的url。这点可以通过onloadsuccess方法进行监听查看。具体的大家自己摸索吧。
最后的效果如下:
easyUi <wbr>combotree <wbr>实现动态加载树节点

easyUi <wbr>combotree <wbr>实现动态加载树节点

easyUi <wbr>combotree <wbr>实现动态加载树节点

easyUi <wbr>combotree <wbr>实现动态加载树节点
 

猜你喜欢

转载自blog.csdn.net/u010664947/article/details/80347023