`
sony-soft
  • 浏览: 1105266 次
文章分类
社区版块
存档分类
最新评论

Extjs的Tree的部分用法

 
阅读更多

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

最近因为工作上的一个任务需要用到Extjs的Tree，所以现在把我在任务中用到的方法，和遇到的问题，在这里写一下。

任务平台是asp.net 2003 + sqlserver 2005

任务需求是这样的：界面上方左右两个tree，然后通过URL地址栏传入一个参数corpcode，并在右边的tree加载该公司和与该公司有关系的公司（上下级关系和平级关系），然后通过一个文本框，查询一些公司加载到左边的tree，然后通过左右tree的拖动，来调整右边tree公司的关系，最后保存。

这里，我们先建2个页面，其中一个名为CorpGroupRelation，用于加载tree，另一页面为CorpGroupAjax，用于传递ajax。

这里我先把两个文件的代码贴出来：

CorpGroupRelation.aspx

<%...@Pagelanguage="c#"Codebehind="CorpGroupRelation.aspx.cs"AutoEventWireup="false"Inherits="CECERP.IE.CRM.ExtCorp.CorpGroupRelation.CorpGroupRelation"%>
<%...@RegisterTagPrefix="eventapproval"Namespace="CECERP.IE.Libraries.Controls.EventApproval"Assembly="CECERP.IE.Libraries"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
<HTML>
<HEAD>
<title></title>
<metacontent="MicrosoftVisualStudio.NET7.1"name="GENERATOR">
<metacontent="C#"name="CODE_LANGUAGE">
<metacontent="JavaScript"name="vs_defaultClientScript">
<metacontent="http://schemas.microsoft.com/intellisense/ie5"name="vs_targetSchema">
<LINKhref="../../../../Libraries/Scripts/extjs-2.0/resources/css/ext-all.css"type="text/css"
rel="stylesheet">
<scriptlanguage="javascript"src="../../../../Libraries/Scripts/extjs-2.0/adapter/ext/ext-base.js"
type="text/javascript"></script>
<scriptlanguage="javascript"src="../../../../Libraries/Scripts/extjs-2.0/ext-all.js"type="text/javascript"></script>
<styletype="text/css">...HR{...}{clear:both;visibility:hidden}
</style>
</HEAD>
<body>
<formid="Form1"method="post"runat="server">
<inputid="html_TxtB_corpcode"type="hidden"name="html_TxtB_corpcode"><inputid="html_TxtB_OldID"type="hidden"name="html_TxtB_OldID"runat="server">
<inputid="html_TxtB_New"type="hidden"name="html_TxtB_New"runat="server"><inputid="html_TxtB_Root"type="hidden"name="html_TxtB_Root"runat="server">
<TABLEid="html_tableHead"cellSpacing="0"cellPadding="0"width="100%"border="0">
<TR>
<TD>
<Palign="center"><INPUTid="TxtB_Query"type="text"size="31"name="TxtB_Query">&nbsp;
<INPUTid="html_btnSearch"type="button"name="html_btnSearch"></P>
</TD>
</TR>
<TR>
<TD>
<TABLEid="html_tabletree"cellSpacing="0"cellPadding="0"width="100%"border="0">
<TR>
<TDwidth="50%">
<divid="list1"style="HEIGHT:300px">
<hr>
</div>
<divid="list"style="DISPLAY:none;HEIGHT:300px">
<hr>
</div>
</TD>
<TDvAlign="top">
<divid="tree"style="HEIGHT:300px">
<hr>
</div>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</form>
<scriptlanguage="javascript">...
<asp:LiteralRunat="server"ID="LiteralScript"></asp:Literal>
</script>
<scripttype="text/javascript">...
Ext.onReady(function()...{
//输入框样式
vartextquery=newExt.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="";
varmsg=Ext.get('list');
msg.load(...{
url:'CorpGroupAjax.aspx',//<--changeifnecessary
params:'param1=1',
text:'Updating...',
scripts:true
});
msg.show();
SaveList();
}
});



//初始化左侧样式
varlistree1=newExt.tree.TreePanel(...{
el:'list1',
animate:true,
autoScroll:true,
enableDD:true,
containerScroll:true,
lines:false,

rootVisible:false,
dropConfig:...{appendOnly:true}
});
newExt.tree.TreeSorter(listree1,...{folderSort:true});

varroot=newExt.tree.AsyncTreeNode(...{
draggable:false,
id:'source'
});
listree1.setRootNode(root);
listree1.render();
root.expand(true,/**//*noanim*/false);
});
vartree;
varRightTreeLoad=function()...{
varTree=Ext.tree;
return...{
init:function()...{
tree=newTree.TreePanel(...{
el:'tree',
animate:true,
autoScroll:true,
loader:newTree.TreeLoader(...{dataUrl:'CorpGroupAjax.aspx?corpcode='+Ext.get('html_TxtB_corpcode').dom.value}),
enableDD:true,
containerScroll:true,
dropConfig:...{appendOnly:true}
});
newTree.TreeSorter(tree,...{folderSort:true});
varroot=newTree.AsyncTreeNode(...{
text:corpName,
draggable:false,
id:'source'
});
tree.setRootNode(root);
tree.render();
root.expand(true,/**//*noanim*/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()...{
varlistree=newExt.tree.TreePanel(...{
el:'list',
animate:true,
autoScroll:true,
loader:newExt.tree.TreeLoader(...{dataUrl:'CorpGroupAjax.aspx?Search='+escape(Ext.get('TxtB_Query').dom.value)}),
enableDD:true,
containerScroll:true,
lines:false,
title:corpName,
rootVisible:false
});
newExt.tree.TreeSorter(listree,...{folderSort:true});
varroot=newExt.tree.AsyncTreeNode(...{
draggable:false,
id:'source'
});
listree.setRootNode(root);
listree.render();
root.expand(true,/**//*noanim*/false);
listree.on('enddrag',function(Node,e)...{
FindList();
});
}
};
}();
</script>
<scriptlanguage="javascript">...
result="";
functionSaveList()
...{
if(Ext.get('html_TxtB_OldID').dom.value=="")
...{
tradeNode(tree.getRootNode());
Ext.get('html_TxtB_OldID').dom.value=result;
result="";
}
}
functiontradeNode(node)
...{
if(node.childNodes&&node.childNodes.length>0)
...{
varchild;
for(vari=0;i<node.childNodes.length;i++)
...{

child=node.childNodes[i];
if(child!=null&&child.text.length>0)
...{
tradeList(child,child.text);
}
}
}
}
functiontradeList(prant,children)
...{
if(prant.childNodes&&prant.childNodes.length>0)
...{
varlist;
for(vari=0;i<prant.childNodes.length;i++)
...{

list=prant.childNodes[i];
if(list!=null&&list.text.length>0)
...{

result+=list.id+"|";
tradeList(list,list.text);
}
}

}
}

varNewlvl="";
varNewRoot="";

functionFindList()
...{
FindNew(tree.getRootNode());
Ext.get('html_TxtB_New').dom.value=Newlvl;
Ext.get('html_TxtB_Root').dom.value=NewRoot;
Newlvl="";
NewRoot=""

}
functionFindNew(node)
...{
if(node.childNodes&&node.childNodes.length>0)
...{
varchild;
for(vari=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);
}
}
}
}
functionFindNewList(prant,children)
...{
if(prant.childNodes&&prant.childNodes.length>0)
...{
varlist;
for(vari=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进行的。

从

varlistree1=newExt.tree.TreePanel

这句话开始 则是加载右边的tree。先是设定右边tree的属性。

el:'list1',
animate:true,
autoScroll:true,
enableDD:true,
containerScroll:true,
lines:false,

rootVisible:false,
dropConfig:...{appendOnly:true}

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

varroot=newExt.tree.AsyncTreeNode(...{
draggable:false,
id:'source'
});

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

vartree;//定义一个全局的tree变量，方便后面调用
varRightTreeLoad=function()...{
varTree=Ext.tree;
return...{
init:function()...{
tree=newTree.TreePanel(...{
el:'tree',
animate:true,
autoScroll:true,
loader:newTree.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}
});
newTree.TreeSorter(tree,...{folderSort:true});
varroot=newTree.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()...{
varlistree=newExt.tree.TreePanel(...{
el:'list',
animate:true,
autoScroll:true,
loader:newExt.tree.TreeLoader(...{dataUrl:'CorpGroupAjax.aspx?Search='+escape(Ext.get('TxtB_Query').dom.value)}),
enableDD:true,
containerScroll:true,
lines:false,
title:corpName,
rootVisible:false
});
newExt.tree.TreeSorter(listree,...{folderSort:true});
varroot=newExt.tree.AsyncTreeNode(...{
draggable:false,
id:'source'
});
listree.setRootNode(root);
listree.render();
root.expand(true,false);
listree.on('enddrag',function(Node,e)...{
FindList();
});
}
};

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

<scriptlanguage="javascript">
result="";
functionSaveList()
...{
if(Ext.get('html_TxtB_OldID').dom.value=="")
...{
tradeNode(tree.getRootNode());
Ext.get('html_TxtB_OldID').dom.value=result;
result="";
}
}
functiontradeNode(node)
...{
if(node.childNodes&&node.childNodes.length>0)
...{
varchild;
for(vari=0;i<node.childNodes.length;i++)
...{

child=node.childNodes[i];
if(child!=null&&child.text.length>0)
...{
tradeList(child,child.text);
}
}
}
}
functiontradeList(prant,children)
...{
if(prant.childNodes&&prant.childNodes.length>0)
...{
varlist;
for(vari=0;i<prant.childNodes.length;i++)
...{

list=prant.childNodes[i];
if(list!=null&&list.text.length>0)
...{

result+=list.id+"|";
tradeList(list,list.text);
}
}

}
}

varNewlvl="";
varNewRoot="";

functionFindList()
...{
FindNew(tree.getRootNode());
Ext.get('html_TxtB_New').dom.value=Newlvl;
Ext.get('html_TxtB_Root').dom.value=NewRoot;
Newlvl="";
NewRoot=""

}
functionFindNew(node)
...{
if(node.childNodes&&node.childNodes.length>0)
...{
varchild;
for(vari=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);
}
}
}
}
functionFindNewList(prant,children)
...{
if(prant.childNodes&&prant.childNodes.length>0)
...{
varlist;
for(vari=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的官方网站去下载，这个要方便得多。

分享到：
| Linux下环境变量的设置
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    extjs的tree的使用

    在深入探讨ExtJS中Tree组件的使用之前，我们先来了解一下ExtJS本身。ExtJS是一个用JavaScript编写的开源前端框架，旨在帮助开发者构建复杂、高性能的Web应用程序。它提供了丰富的UI组件库，其中包括Tree（树形）组件...

    带复选框的 ExtJs tree

    通过对标题、描述、标签和部分内容的分析，我们可以看到这是一个关于ExtJS TreePanel高级用法的案例，涉及到了动态加载数据、事件监听、状态同步等多个方面，对于希望提升Web应用交互性和功能性的开发者来说，具有很...

    ExtJs_TreeDemo

    ExtJs 是一个强大的JavaScript库，专门用于构建富客户端应用程序，特别是复杂的、数据驱动的Web界面。...通过深入研究这个示例，开发者能够更好地理解和掌握ExtJs中树形菜单的用法，进而构建更复杂的应用场景。

    Extjs4的TreeGrid例子

    这些示例可能涵盖了基本用法到高级特性的全面演示。 7. **Grid和Styles**：`Grid`目录可能包含与数据网格相关的代码，而`Styles`可能包含了CSS样式文件，用于定制TreeGrid的外观。 8. **Doc**：`Doc`目录通常包含...

    ExtJS4官方指南翻译：DragandDrop拖放/Grid组件/Tree组件/容器与布局

    通过以上四个主题的学习，开发者可以掌握ExtJS4的基本用法，从而创建出功能丰富、用户体验优秀的Web应用。这个官方指南的翻译文档将帮助中国开发者更好地理解ExtJS4的API和最佳实践，从而提高开发效率。对于希望深入...

    extjs4 入门基础，form、grid、tree

    在ExtJS中，表单是数据输入和验证的重要部分。表单组件包括文本框、复选框、单选按钮、下拉列表等。你可以使用`Ext.form.Panel`创建一个基本的表单，通过`items`配置项添加表单字段。每个字段可以通过` xtype`属性...

    Extjs4使用要点个人整理

    2. **按钮（Button）的用法**：`EXTjs button用法.doc`将详细介绍如何创建和使用ExtJS 4的按钮组件，包括设置按钮文本、图标、事件监听器以及使用不同类型的按钮，如工具栏按钮、菜单按钮等。 3. **表单（Form）...

    ExtJS静态使用示例

    开发者可以通过查看和学习这些代码，了解ExtJS的基本用法，如何将组件整合到页面中，以及如何处理用户交互。 7. **学习资源**：对于初学者来说，理解和掌握ExtJS的使用，可以参考官方文档、教程、论坛讨论以及在线...

    基于ExtJS3的后台管理系统模板

    3、通过实现角色管理、用户管理、部门管理三个基础的功能模块，演示了Viewport、Container、Panel、Grid、Window、Form、Tree等常用组件的用法，以及border、column、form、fit、accordion、hbox等常用布局方式；...

    extjs实现jbpm工作流流程设计

    在设计过程中，EXTJS的图表组件如Ext.chart系列可以用来展示工作流状态和进度，而EXTJS的树形组件（Ext.tree.Panel）则适合用来表示流程的层次结构。例如，"zTreeStandard.gif"和"zTreeStandard.png"可能就是用于...

    ExtJS4中文教程2 开发笔记 chm

    Extjs4 带复选框的树（Checkbox tree） Extjs4 新的布局方式 Extjs4 锁定表头(Locking Grid)功能 Extjs4.0 MVC实例 Extjs4.0动态填充combobox数据 Extjs4中up()和down()的用法 ExtJS4学习笔记(一)---window的创建 ...

    extjs资料打包

    EXTJS的核心在于其强大的组件库，如Grid、Tree、Form等，这些组件能够帮助开发者快速构建用户界面。教程可能会详细介绍每个组件的用法、配置选项以及如何自定义组件，是初学者掌握EXTJS的必备资料。 再来看“ExtJs...

    extjs学习案例， 例子有 panel ,widow,tree,grid,form, store……

    它提供了一整套组件化的用户界面元素，包括Panel、Window、Tree、Grid、Form和Store等，这些都是ExtJS的核心组件。本文将详细讲解这些知识点，帮助无论是初学者还是有一定基础的学习者提升在ExtJS开发中的技能。 ...

    extjs+asp例子

    学习如何结合使用ExtJS和ASP，你可以参考ExtJS的官方文档，了解其组件和API的用法；同时，熟悉ASP.NET的教程，理解如何在服务器端处理数据和响应前端请求。 6. **最佳实践** - **模块化开发**：利用ExtJS的Ext....

    EXTJS3.0中文API (离线)

    1. **组件系统**：EXTJS的核心是其组件模型，包括窗口（Window）、面板（Panel）、表单（Form）、表格（Grid）、树（Tree）等。这些组件都是可重用的，可以组合起来构建复杂的用户界面。 2. **数据绑定**：EXTJS...

    基于ExtJS5的后台管理系统案例 - 源码

    通过学习这个基于ExtJS5的后台管理系统案例，开发者不仅可以掌握ExtJS5的基本用法，还能了解到如何将这些技术应用于实际项目，提高开发效率。案例中的源码分析和实践将加深对框架的理解，为后续的Web开发工作打下...

    extjs2----关于extjs 的使用，操作

    4. **数据绑定**：阐述ExtJS的数据模型（Store）和数据显示组件（Grid、Tree）之间的数据绑定机制，包括XML、JSON数据源的加载。 5. **表单元素**：深入探讨表单（Form）的创建，包括各种表单字段（TextField、...

    extjs4官方示例以及api文档html版

    这些示例涵盖了EXTJS4的各种组件和功能，包括表格（Grid）、面板（Panel）、表单（Form）、菜单（Menu）、工具栏（Toolbar）、树形视图（Tree）、图表（Charts）等。通过运行示例，你可以直观地看到组件的外观和交互...

    ExtJs3.0中文文档

    通过阅读这份文档，开发者不仅可以了解框架的基本用法，还能深入理解其内部机制，从而更高效地开发出功能强大且用户体验优秀的Web应用程序。无论是新手还是经验丰富的开发者，都可以从中受益匪浅。

    ExtJS4 doc文档

    ExtJS4的API文档详细阐述了每个组件的用法、配置项和事件，是开发者解决问题和实现功能的重要参考。 通过深入学习并掌握这些文档，开发者不仅能理解ExtJS4的基础概念，还能熟练地运用到实际项目中，构建出功能丰富...

Magicbox
Global site tag (gtag.js) - Google Analytics