Extjs的Tree的部分用法_extjs tree-优快云博客

本文链接：https://blog.youkuaiyun.com/lilinjian2001/article/details/1965372

本文介绍了一个使用Extjs实现的Tree组件应用案例，包括前后端代码示例与详细解析。主要涉及如何加载数据、处理拖拽操作及保存数据等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前段时间，因为工作很忙，所以一直都没有写了。

最近因为工作上的一个任务需要用到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" %>

<%@ 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>

<LINK href="../../../../Libraries/Scripts/extjs-2.0/resources/css/ext-all.css" type="text/css"

rel="stylesheet">

type="text/javascript"></script>

</style>

</HEAD>

<body>

<TR>

<TD>

</TD>

</TR>

<TR>

<TD>

<TR>

<hr>

</div>

<hr>

</div>

</TD>

<hr>

</div>

</TD>

</TR>

</TABLE>

</TD>

</TR>

</TABLE>

</form>

<asp:Literal Runat="server" ID="LiteralScript"></asp:Literal>

</script>

Ext.onReady(function(){

//输入框样式

var textquery = new Ext.form.TextField({

allowBlank:false,

applyTo: 'TxtB_Query'

});

//搜寻事件

Ext.get('html_btnSearch').on('click', function(){

if(Ext.get('TxtB_Query').dom.value=="")

{

alert( Checktext );

Ext.get('TxtB_Query').focus();

}

else

{

Ext.get('list1').dom.style.display="none";

Ext.get('list').dom.style.display="";

var msg = Ext.get('list');

msg.load({

url: 'CorpGroupAjax.aspx', // <-- change if necessary

params: 'param1=1',

text: 'Updating...',

scripts: true

});

msg.show();

SaveList();

}

});

//初始化左侧样式

var listree1 = new Ext.tree.TreePanel({

el:'list1',

animate:true,

autoScroll:true,

enableDD:true,

containerScroll: true,

lines:false,

rootVisible:false,

dropConfig: {appendOnly:true}

});

new Ext.tree.TreeSorter(listree1, {folderSort:true});

var root = new Ext.tree.AsyncTreeNode({

draggable:false,

id:'source'

});

listree1.setRootNode(root);

listree1.render();

root.expand(true, /*no anim*/ false);

});

var tree;

var RightTreeLoad = function(){

var Tree = Ext.tree;

return {

init : function(){

tree = new Tree.TreePanel({

el:'tree',

animate:true,

autoScroll:true,

loader: new Tree.TreeLoader({dataUrl:'CorpGroupAjax.aspx?corpcode='+Ext.get('html_TxtB_corpcode').dom.value}),

enableDD:true,

containerScroll: true,

dropConfig: {appendOnly:true}

});

new Tree.TreeSorter(tree, {folderSort:true});

var root = new Tree.AsyncTreeNode({

text: corpName,

draggable:false,

id:'source'

});

tree.setRootNode(root);

tree.render();

root.expand(true, /*no anim*/ false);

tree.on('click',function(e){

SaveList();

});

tree.on('enddrag',function(Node,e){

SaveList();

FindList();

});

}

};

}();

//右侧菜单加载

Ext.EventManager.onDocumentReady(RightTreeLoad.init, RightTreeLoad, true);

//左侧列表加载

TreeShow = function(){

return {

init : function(){

var listree = new Ext.tree.TreePanel({

el:'list',

animate:true,

autoScroll:true,

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

});

new Ext.tree.TreeSorter(listree, {folderSort:true});

var root = new Ext.tree.AsyncTreeNode({

draggable:false,

id:'source'

});

listree.setRootNode(root);

listree.render();

root.expand(true, /*no anim*/ false);

listree.on('enddrag',function(Node,e){

FindList();

});

}

};

}();

</script>

result="";

function SaveList()

{

if( Ext.get('html_TxtB_OldID').dom.value == "" )

{

tradeNode(tree.getRootNode());

Ext.get('html_TxtB_OldID').dom.value=result;

result="";

}

function tradeNode(node)

{

if (node.childNodes && node.childNodes.length>0)

{

var child;

for (var i=0;i<node.childNodes.length;i++)

{

child = node.childNodes[i];

if (child!=null && child.text.length>0 )

{

tradeList(child,child.text);

}

function tradeList(prant,children)

{

if(prant.childNodes && prant.childNodes.length>0)

{

var list;

for (var i=0;i<prant.childNodes.length;i++)

{

list = prant.childNodes[i];

if (list!=null && list.text.length>0 )

{

result+= list.id +"|";

tradeList(list,list.text);

}

var Newlvl = "";

var NewRoot = "";

function FindList()

{

FindNew(tree.getRootNode());

Ext.get('html_TxtB_New').dom.value=Newlvl;

Ext.get('html_TxtB_Root').dom.value=NewRoot;

Newlvl="";

NewRoot=""

}

function FindNew(node)

{

if (node.childNodes && node.childNodes.length>0)

{

var child;

for (var i=0;i<node.childNodes.length;i++)

{

child = node.childNodes[i];

if (child!=null && child.text.length>0 )

{

NewRoot += child.text + "|";

Newlvl += "$";

FindNewList(child,child.text);

}

function FindNewList(prant,children)

{

if(prant.childNodes && prant.childNodes.length>0)

{

var list;

for (var i=0;i<prant.childNodes.length;i++)

{

list = prant.childNodes[i];

if (list!=null && list.text.length>0 )

{

Newlvl+= list.text+":"+children +"|";

FindNewList(list,list.text);

}

</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,

dropConfig: {appendOnly:true}

然后在这里给这个tree加载一个默认的根

var root = new Ext.tree.AsyncTreeNode({

draggable:false,

id:'source'

});

然后就是加载树了（关键地方我加了注释）：

var tree;//定义一个全局的 tree 变量，方便后面调用

var RightTreeLoad = function(){

var Tree = Ext.tree;

return {

init : function(){

tree = new Tree.TreePanel({

el:'tree',

animate:true,

autoScroll:true,

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,

dropConfig: {appendOnly:true}

});

new Tree.TreeSorter(tree, {folderSort:true});

var root = new Tree.AsyncTreeNode({

text: corpName, //加载公司名称

draggable:false,

id:'source'

});

tree.setRootNode(root);

tree.render();

root.expand(true, false); //加载并展开节点

tree.on('click',function(e){//在点击事件时触发的JS

SaveList();

});

tree.on('enddrag',function(Node,e){//当拖动结束后触发的JS

SaveList();

FindList();

});

//凡是tree的时间都写在这里。

}

};

下面这句话就是当页面加载的时候，并执行

Ext.EventManager.onDocumentReady(RightTreeLoad.init, RightTreeLoad, true);

下面是点击搜寻按钮后，在左边加载的方法：

//左侧列表加载

TreeShow = function(){

return {

init : function(){

var listree = new Ext.tree.TreePanel({

el:'list',

animate:true,

autoScroll:true,

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

});

new Ext.tree.TreeSorter(listree, {folderSort:true});

var root = new Ext.tree.AsyncTreeNode({

draggable:false,

id:'source'

});

listree.setRootNode(root);

listree.render();

root.expand(true, false);

listree.on('enddrag',function(Node,e){

FindList();

});

}

};

下面的JS则是在保存前取出对应的ID和文本。

result="";

function SaveList()

{

if( Ext.get('html_TxtB_OldID').dom.value == "" )

{

tradeNode(tree.getRootNode());

Ext.get('html_TxtB_OldID').dom.value=result;

result="";

}

function tradeNode(node)

{

if (node.childNodes && node.childNodes.length>0)

{

var child;

for (var i=0;i<node.childNodes.length;i++)

{

child = node.childNodes[i];

if (child!=null && child.text.length>0 )

{

tradeList(child,child.text);

}

function tradeList(prant,children)

{

if(prant.childNodes && prant.childNodes.length>0)

{

var list;

for (var i=0;i<prant.childNodes.length;i++)

{

list = prant.childNodes[i];

if (list!=null && list.text.length>0 )

{

result+= list.id +"|";

tradeList(list,list.text);

}

var Newlvl = "";

var NewRoot = "";

function FindList()

{

FindNew(tree.getRootNode());

Ext.get('html_TxtB_New').dom.value=Newlvl;

Ext.get('html_TxtB_Root').dom.value=NewRoot;

Newlvl="";

NewRoot=""

}

function FindNew(node)

{

if (node.childNodes && node.childNodes.length>0)

{

var child;

for (var i=0;i<node.childNodes.length;i++)

{

child = node.childNodes[i];

if (child!=null && child.text.length>0 )

{

NewRoot += child.text + "|";

Newlvl += "$";//得到所有第二层的根节点

FindNewList(child,child.text);

}

function FindNewList(prant,children)

{

if(prant.childNodes && prant.childNodes.length>0)

{

var list;

for (var i=0;i<prant.childNodes.length;i++)

{

list = prant.childNodes[i];

if (list!=null && list.text.length>0 )

{

Newlvl+= list.text+":"+children +"|"; //循环加载节点的文本

FindNewList(list,list.text);

}

</script>

其中值得注意到是：

1、叶子节点的属性中设置为children:[]，则可以在叶子节点下面添加节点了

2、无论在加载或者取值的时候，都需要递归遍历。

3、在网上有一种方式是通过一个json的dll，实现了DataSet与tree之间互相转换，这个dll可以到json的官方网站去下载，这个要方便得多。