Extjs 树的动态更改加载地址,以及动态加载已有子节点其他节点问题!

 要完成下图所示的效果,要涉及到很多问题,一:后台的数据是分到两个表里面的,一个部门表一个员工表!

如果员工上千,这样一次全部加载会使得数据特别的慢!所以采用异步加载,比较合理!

但是异步加载因为数据是放在两个表里面的,所以涉及到,数据加载源的问题!

我的思路是这样的,展开根节点的时候一次性加载完所有部门,然后展开每个部门的时候再加载所属员工!

这就有一个问题,加载部门是一个地方,加载员工又是另外一个地方!这就要求,数据加载源必须动态更改!

经过本人的3小时努力终于搞定了!

 

{ xtype : "treepanel", id:'stafftreepanel', animate : true, autoScroll : true, containerScroll : true, loader : new Ext.tree.TreeLoader( { dataUrl : ServerLoadAllDeptTreeUrl }), listeners : { "click" : function(node,e) { debugger; if(node.attributes.strrealname) { nownode=node; nownode.id=node.id.replace(/staff-/,""); loadStaffPay(); } }, "beforeload": function(node) { if(node.attributes.id==-1)//根节点的id为-1 { //node.ownerTree.loader.baseParams node.loader=new Ext.tree.TreeLoader( { baseParams:{id:node.id}, dataUrl : ServerLoadAllDeptTreeUrl }) } else { node.loader=new Ext.tree.TreeLoader( { baseParams:{id:node.id}, dataUrl : ServerLoadStaffByDeptIdUrl });//逐个加载某部门员工 } } }, root : new Ext.tree.AsyncTreeNode( { id : "-1", text : "所有部门",// 节点名称 iconCls:'bumen', expanded : true,// 展开 leaf : false// 是否为叶子节点 }), dropConfig : { appendOnly : true }, height : 446 }

 

treeload.js文件必须更改方法,否则会出现问题

 

Ext.tree.TreeLoader.prototype.load = function(node, callback){ if(this.clearOnLoad){ while(node.firstChild){ node.removeChild(node.firstChild); } } if(this.doPreload(node)){ // preloaded json children if(typeof callback == "function"){ callback(); } } if(this.dataUrl||this.url){ this.requestData(node, callback); } },

 

 

这样就万事大吉了,对了还有个问题,部门的id和员工的id都相同的时候,就要出问题了,这个怎么解决就劳烦老大你自己想办法吧!