前段时间,因为工作很忙,所以一直都没有写了。
最近因为工作上的一个任务需要用到Extjs的Tree,所以现在把我在任务中用到的方法,和遇到的问题,在这里写一下。
任务平台是asp.net 2003 + sqlserver 2005
任务需求是这样的:界面上方左右两个tree,然后通过URL地址栏传入一个参数corpcode,并在右边的tree加载该公司和与该公司有关系的公司(上下级关系和平级关系),然后通过一个文本框,查询一些公司加载到左边的tree,然后通过左右tree的拖动,来调整右边tree公司的关系,最后保存。
这里,我们先建2个页面,其中一个名为CorpGroupRelation,用于加载tree,另一页面为CorpGroupAjax,用于传递ajax。
这里我先把两个文件的代码贴出来:
CorpGroupRelation.aspx
<%
...
@ Page language="c#" Codebehind="CorpGroupRelation.aspx.cs" AutoEventWireup="false" Inherits="CECERP.IE.CRM.ExtCorp.CorpGroupRelation.CorpGroupRelation"
%>
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
<%
...
@ Register TagPrefix="eventapproval" Namespace="CECERP.IE.Libraries.Controls.EventApproval" Assembly="CECERP.IE.Libraries"
%>
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
>
<
HTML
>
<
HEAD
>
<
title
></
title
>
<
meta
content
="Microsoft Visual Studio .NET 7.1"
name
="GENERATOR"
>
<
meta
content
="C#"
name
="CODE_LANGUAGE"
>
<
meta
content
="JavaScript"
name
="vs_defaultClientScript"
>
<
meta
content
="http://schemas.microsoft.com/intellisense/ie5"
name
="vs_targetSchema"
>
<
LINK
href
="../../../../Libraries/Scripts/extjs-2.0/resources/css/ext-all.css"
type
="text/css"
rel
="stylesheet"
>
<
script
language
="javascript"
src
="../../../../Libraries/Scripts/extjs-2.0/adapter/ext/ext-base.js"
type
="text/javascript"
></
script
>
<
script
language
="javascript"
src
="../../../../Libraries/Scripts/extjs-2.0/ext-all.js"
type
="text/javascript"
></
script
>
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
<
style
type
="text/css"
>
...
HR {...}{ clear: both; visibility: hidden }
</
style
>
</
HEAD
>
<
body
>
<
form
id
="Form1"
method
="post"
runat
="server"
>
<
input
id
="html_TxtB_corpcode"
type
="hidden"
name
="html_TxtB_corpcode"
>
<
input
id
="html_TxtB_OldID"
type
="hidden"
name
="html_TxtB_OldID"
runat
="server"
>
<
input
id
="html_TxtB_New"
type
="hidden"
name
="html_TxtB_New"
runat
="server"
>
<
input
id
="html_TxtB_Root"
type
="hidden"
name
="html_TxtB_Root"
runat
="server"
>
<
TABLE
id
="html_tableHead"
cellSpacing
="0"
cellPadding
="0"
width
="100%"
border
="0"
>
<
TR
>
<
TD
>
<
P
align
="center"
><
INPUT
id
="TxtB_Query"
type
="text"
size
="31"
name
="TxtB_Query"
>
<
INPUT
id
="html_btnSearch"
type
="button"
name
="html_btnSearch"
></
P
>
</
TD
>
</
TR
>
<
TR
>
<
TD
>
<
TABLE
id
="html_tabletree"
cellSpacing
="0"
cellPadding
="0"
width
="100%"
border
="0"
>
<
TR
>
<
TD
width
="50%"
>
<
div
id
="list1"
style
="HEIGHT: 300px"
>
<
hr
>
</
div
>
<
div
id
="list"
style
="DISPLAY: none; HEIGHT: 300px"
>
<
hr
>
</
div
>
</
TD
>
<
TD
vAlign
="top"
>
<
div
id
="tree"
style
="HEIGHT: 300px"
>
<
hr
>
</
div
>
</
TD
>
</
TR
>
</
TABLE
>
</
TD
>
</
TR
>
</
TABLE
>
</
form
>
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
<
script
language
="javascript"
>
...
<asp:Literal Runat="server" ID="LiteralScript"></asp:Literal>
</
script
>
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
<
script
type
="text/javascript"
>
...
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
Ext.onReady(function()...{
//输入框样式
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
var textquery = new Ext.form.TextField(...{
allowBlank:false,
applyTo: 'TxtB_Query'
});
//搜寻事件
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
Ext.get('html_btnSearch').on('click', function()...{
if(Ext.get('TxtB_Query').dom.value=="")
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
alert( Checktext );
Ext.get('TxtB_Query').focus();
}
else
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
Ext.get('list1').dom.style.display="none";
Ext.get('list').dom.style.display="";
var msg = Ext.get('list');
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
msg.load(...{
url: 'CorpGroupAjax.aspx', // <-- change if necessary
params: 'param1=1',
text: 'Updating...',
scripts: true
});
msg.show();
SaveList();
}
});
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
//初始化左侧样式
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
var listree1 = new Ext.tree.TreePanel(...{
el:'list1',
animate:true,
autoScroll:true,
enableDD:true,
containerScroll: true,
lines:false,
rootVisible:false,
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
dropConfig: ...{appendOnly:true}
});
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
new Ext.tree.TreeSorter(listree1, ...{folderSort:true});
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
var root = new Ext.tree.AsyncTreeNode(...{
draggable:false,
id:'source'
});
listree1.setRootNode(root);
listree1.render();
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
root.expand(true, /**//*no anim*/ false);
});
var tree;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
var RightTreeLoad = function()...{
var Tree = Ext.tree;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
return ...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
init : function()...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
tree = new Tree.TreePanel(...{
el:'tree',
animate:true,
autoScroll:true,
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
loader: new Tree.TreeLoader(...{dataUrl:'CorpGroupAjax.aspx?corpcode='+Ext.get('html_TxtB_corpcode').dom.value}),
enableDD:true,
containerScroll: true,
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
dropConfig: ...{appendOnly:true}
});
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
new Tree.TreeSorter(tree, ...{folderSort:true});
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
var root = new Tree.AsyncTreeNode(...{
text: corpName,
draggable:false,
id:'source'
});
tree.setRootNode(root);
tree.render();
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
root.expand(true, /**//*no anim*/ false);
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
tree.on('click',function(e)...{
SaveList();
});
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
tree.on('enddrag',function(Node,e)...{
SaveList();
FindList();
});
}
};
}();
//右侧菜单加载
Ext.EventManager.onDocumentReady(RightTreeLoad.init, RightTreeLoad, true);
//左侧列表加载
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
TreeShow = function()...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
return ...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
init : function()...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
var listree = new Ext.tree.TreePanel(...{
el:'list',
animate:true,
autoScroll:true,
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
loader: new Ext.tree.TreeLoader(...{dataUrl:'CorpGroupAjax.aspx?Search='+escape(Ext.get('TxtB_Query').dom.value)}),
enableDD:true,
containerScroll: true,
lines:false,
title:corpName,
rootVisible:false
});
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
new Ext.tree.TreeSorter(listree, ...{folderSort:true});
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
var root = new Ext.tree.AsyncTreeNode(...{
draggable:false,
id:'source'
});
listree.setRootNode(root);
listree.render();
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
root.expand(true, /**//*no anim*/ false);
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
listree.on('enddrag',function(Node,e)...{
FindList();
});
}
};
}();
</
script
>
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
<
script
language
="javascript"
>
...
result="";
function SaveList()
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if( Ext.get('html_TxtB_OldID').dom.value == "" )
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
tradeNode(tree.getRootNode());
Ext.get('html_TxtB_OldID').dom.value=result;
result="";
}
}
function tradeNode(node)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if (node.childNodes && node.childNodes.length>0)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
var child;
for (var i=0;i<node.childNodes.length;i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
child = node.childNodes[i];
if (child!=null && child.text.length>0 )
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
tradeList(child,child.text);
}
}
}
}
function tradeList(prant,children)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if(prant.childNodes && prant.childNodes.length>0)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
var list;
for (var i=0;i<prant.childNodes.length;i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
list = prant.childNodes[i];
if (list!=null && list.text.length>0 )
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
result+= list.id +"|";
tradeList(list,list.text);
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
}
}
var Newlvl = "";
var NewRoot = "";
function FindList()
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
FindNew(tree.getRootNode());
Ext.get('html_TxtB_New').dom.value=Newlvl;
Ext.get('html_TxtB_Root').dom.value=NewRoot;
Newlvl="";
NewRoot=""
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
}
function FindNew(node)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if (node.childNodes && node.childNodes.length>0)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
var child;
for (var i=0;i<node.childNodes.length;i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
child = node.childNodes[i];
if (child!=null && child.text.length>0 )
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
NewRoot += child.text + "|";
Newlvl += "$";
FindNewList(child,child.text);
}
}
}
}
function FindNewList(prant,children)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if(prant.childNodes && prant.childNodes.length>0)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
var list;
for (var i=0;i<prant.childNodes.length;i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
list = prant.childNodes[i];
if (list!=null && list.text.length>0 )
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
Newlvl+= list.text+":"+children +"|";
FindNewList(list,list.text);
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
}
}
</
script
>
</
body
>
</
HTML
>
在这里我只把前台代码贴出来了,因为后台代码毕竟业务很复杂,而且没有必要全部贴出,所以就不贴了。只是这个ajax页面用于返还tree加载时候的字符串。
现在我来具体说明一下里面的代码。
Extjs加载时候 是在 Ext.onReady进行的。
从
var
listree1
=
new
Ext.tree.TreePanel
这句话开始 则是加载右边的tree。先是设定右边tree的属性。
el:
'
list1
'
,
animate:
true
,
autoScroll:
true
,
enableDD:
true
,
containerScroll:
true
,
lines:
false
,
rootVisible:
false
,
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
dropConfig:
...
{appendOnly:true}
然后在这里给这个tree加载一个默认的根
var
root
=
new
Ext.tree.AsyncTreeNode(
...
{
draggable:false,
id:'source'
}
);
然后就是加载树了(关键地方我加了注释):
var
tree;
//
定义一个全局的 tree 变量,方便后面调用
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
var
RightTreeLoad
=
function
()
...
{
var Tree = Ext.tree;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
return ...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
init : function()...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
tree = new Tree.TreePanel(...{
el:'tree',
animate:true,
autoScroll:true,
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
loader: new Tree.TreeLoader(...{dataUrl:'CorpGroupAjax.aspx?corpcode='+Ext.get('html_TxtB_corpcode').dom.value}),//Ext.get('html_TxtB_corpcode').dom.value是搜寻的文本框的值
enableDD:true,
containerScroll: true,
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
dropConfig: ...{appendOnly:true}
});
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
new Tree.TreeSorter(tree, ...{folderSort:true});
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
var root = new Tree.AsyncTreeNode(...{
text: corpName, //加载公司名称
draggable:false,
id:'source'
});
tree.setRootNode(root);
tree.render();
root.expand(true, false); //加载并展开节点
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
tree.on('click',function(e)...{//在点击事件时触发的JS
SaveList();
});
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
tree.on('enddrag',function(Node,e)...{//当拖动结束后触发的JS
SaveList();
FindList();
});
//凡是tree的时间都写在这里。
}
};
下面这句话就是当页面加载的时候,并执行
Ext.EventManager.onDocumentReady(RightTreeLoad.init, RightTreeLoad,
true
);
下面是点击搜寻按钮后,在左边加载的方法:
//
左侧列表加载
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
TreeShow
=
function
()
...
{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
return ...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
init : function()...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
var listree = new Ext.tree.TreePanel(...{
el:'list',
animate:true,
autoScroll:true,
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
loader: new Ext.tree.TreeLoader(...{dataUrl:'CorpGroupAjax.aspx?Search='+escape(Ext.get('TxtB_Query').dom.value)}),
enableDD:true,
containerScroll: true,
lines:false,
title:corpName,
rootVisible:false
});
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
new Ext.tree.TreeSorter(listree, ...{folderSort:true});
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
var root = new Ext.tree.AsyncTreeNode(...{
draggable:false,
id:'source'
});
listree.setRootNode(root);
listree.render();
root.expand(true, false);
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
listree.on('enddrag',function(Node,e)...{
FindList();
});
}
};
下面的JS则是在保存前取出对应的ID和文本。
<
script language
=
"
javascript
"
>
result
=
""
;
function
SaveList()
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
if( Ext.get('html_TxtB_OldID').dom.value == "" )
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
tradeNode(tree.getRootNode());
Ext.get('html_TxtB_OldID').dom.value=result;
result="";
}
}
function
tradeNode(node)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
if (node.childNodes && node.childNodes.length>0)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
var child;
for (var i=0;i<node.childNodes.length;i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
child = node.childNodes[i];
if (child!=null && child.text.length>0 )
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
tradeList(child,child.text);
}
}
}
}
function
tradeList(prant,children)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
if(prant.childNodes && prant.childNodes.length>0)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
var list;
for (var i=0;i<prant.childNodes.length;i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
list = prant.childNodes[i];
if (list!=null && list.text.length>0 )
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
result+= list.id +"|";
tradeList(list,list.text);
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
}
}
var
Newlvl
=
""
;
var
NewRoot
=
""
;
function
FindList()
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
FindNew(tree.getRootNode());
Ext.get('html_TxtB_New').dom.value=Newlvl;
Ext.get('html_TxtB_Root').dom.value=NewRoot;
Newlvl="";
NewRoot=""
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
}
function
FindNew(node)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
if (node.childNodes && node.childNodes.length>0)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
var child;
for (var i=0;i<node.childNodes.length;i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
child = node.childNodes[i];
if (child!=null && child.text.length>0 )
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
NewRoot += child.text + "|";
Newlvl += "$";//得到所有第二层的根节点
FindNewList(child,child.text);
}
}
}
}
function
FindNewList(prant,children)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
if(prant.childNodes && prant.childNodes.length>0)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
var list;
for (var i=0;i<prant.childNodes.length;i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
list = prant.childNodes[i];
if (list!=null && list.text.length>0 )
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
Newlvl+= list.text+":"+children +"|"; //循环加载节点的文本
FindNewList(list,list.text);
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
}
}
</
script
>
其中值得注意到是:
1、叶子节点的属性中设置为children:[],则可以在叶子节点下面添加节点了
2、无论在加载或者取值的时候,都需要递归遍历。
3、在网上有一种方式是通过一个json的dll,实现了DataSet与tree之间互相转换,这个dll可以到json的官方网站去下载,这个要方便得多。