在应用程序中,我们经常需要显示或处理树状结构的对象信息,比如部门信息和地区信息,树是一种非常典型的数据结构,这些信息都可以用树来表示。对于传统的HTML页面来说,完全依靠手动编码来实现树是比较困难的,因为需要写很多的JS代码,对基于AJAX异步加载来说尤其如此,不但涉及AJAX数据异步加载,还需要考虑跨浏览器支持,处理起来非常麻烦,EXT中提供了现成的树控件,通过这些控件,可以在B/S应用中快速开发出包含树形信息结构的应用。
本文就是详细介绍树形结构的使用过程和实例。
一、创建一棵树
树控件由Ext.tree.TreePanel类定义,控件的名称为TreePanel,TreePanel类继承自Panel面板,在EXT中使用树控件非常简单,我们先来看一下代码(包含配置信息)。
- <htmlxmlns="http://www.w3.org/1999/xhtml">
- <headid="Head1"runat="server">
- <title>简单的树形</title>
- <linkrel="stylesheet"type="text/css"href="../resources/css/ext-all.css"/>
- <scripttype="text/javascript"src="../adapter/ext/ext-base.js"</script>
- <scripttype="text/javascript"src="../ext-all.js"></script>
- <scripttype="text/javascript"><!--
- Ext.onReady(function(){
- vartree=newExt.tree.TreePanel({
- el:'tree'
- });
- varroot=newExt.tree.TreeNode({text:'我是根'});
- tree.setRootNode(root);
- tree.render();
- });
- </script>
- </head>
- <body>
- <divid="tree"></div>
- </body>
- </html>
这里的参数tree表示渲染的DOM的id.HTML中应该要要有<div id="tree"></div>相对应,最后这棵树就出现在这个div的位置上。
在获得了树形面板后,就必须要设置根,因为必须有了根才可以生长枝节,最后生成完整的树,所以根是必须的。具体实现的效果如图1所示。
图1 只有根的树
二、为树生枝展叶
上面的实例代码生成一棵没有根的树,下面的代码就为树添加枝和叶,代码清单如下:
- <scripttype="text/javascript">
- Ext.onReady(function(){
- vartree=newExt.tree.TreePanel({
- el:'tree',
- autoHeight:true
- });
- varroot=newExt.tree.TreeNode({text:'区域信息'});
- varnode1=newExt.tree.TreeNode({text:'湖南省'});
- varnode3=newExt.tree.TreeNode({text:'广东省'});
- varnode2=newExt.tree.TreeNode({text:'广州市'});
- node3.appendChild(node2);
- root.appendChild(node1);
- root.appendChild(node3);
- tree.setRootNode(root);
- tree.render();
- });
- </script>
效果图如图2所示:
图2 完整的树控件
注意:我们一方面可以通过修改<div id="tree" style="height:300px;"></div>来设置div高度;同时也可以设置treePanel的autoHeight属性为tree,则可以自动计算高度,否则展开的树形控件看不到枝叶。
三、使用TreeLoader获得数据
使用上面的录入方式来获取数据不仅麻烦,而且还容易出错,Ext.tree.TreeLoader可以利用从后台获取的数据为我们组装出一棵树来,我们只需要提供数据,让treeLoader完成数据转换和装配节点的操作。
(1)我们要为TreePanel配置一个TreeLoader,如下面代码所示:
- vartree=newExt.tree.TreePanel({
- el:'tree',
- loader:newExt.tree.TreeLoader({dataUrl:'data.txt'}),
- autoHeight:true
- });
(2)这里的TreeLoader仅包含一个参数{dataUrl:'data.txt'},这个dataUrl表示在树完成渲染后从何处读取数据。data.txt内容如下:
- [
- {text:'notleaf'},
- {text:'isleaf',leaf:true}
- ]
(3) 现在查看页面依然只能看到根,没有读取数据并显示到页面上,因为我们使用的TreeNode不支持Ajax,我们需要将其改成AsyncTreeNode,这样才可以实现我们想要的异步加载效果,如下面的代码所示:
- varroot=newExt.tree.AsyncTreeNode({text:'区域信息'});
注意:必须将root.expand(true,true)修改成root.expand()避免无限循环展开树枝。
四、读取本地JSON数据
读取本地JSON其实是一种是用使用TreeLoader的另类方法。因为有时候树形的数据并不多,为了获取少量的数据而是用AJAX访问后台实在不划算。首先为TreePanel设置一个参数为空的TreeLoader,如下面代码所示:
- vartree=newExt.tree.TreePanel({
- el:'tree',
- loader:newExt.tree.TreeLoader(),
- autoHeight:true
- });
然后,设置一个根节点,并为这个根节点设置children属性,如下面代码所示:
- varroot=newExt.tree.AsyncTreeNode({
- text:'我是根',
- children:[
- {text:'LeafNo.1',leaf:true},
- {text:'LeafNo.1',leaf:true}
- ]
- });
- tree.setRootNode(root);
这里需要注意几点:
(1) 必须设置TreeLoader,否则根节点会一直处于在读取状态,无法获得children中定义的子节点
(2) 根节点必须是AsyncTreeNode,如果是TreeNode,也无法生成子节点
(3) 子节点中的叶子节点必须都加上leaf:true,否则会一直显示读取状态。
五、右键菜单
树形弹出的右键菜单效果图如图3所示:
图3 右键菜单效果
具体实现步骤如下:
(1) 制作自定义菜单,如下面的代码所示:
- varcontextmenu=newExt.menu.Menu({
- id:'theContextMenu',
- items:[{
- text:'点击',
- handler:function(){
- alert('我被点中了');
- }
- }]
- });
(2) 绑定contextmenu时间,如下面代码所示:
- tree.on("contextmenu",function(node,e){
- e.preventDefault();
- node.select();
- contextmenu.showAt(e.getXY());
- });
六、修改节点的默认图标
实际上,每个树形节点都有icon和iconCls属性,他们负责制定节点的图标,现在我们来修改树种节点的图标,无论是通过new手工创建的节点,还是通过JSON读取到的节点,设置方式都是一样,如下面代码所示:
- varroot1=newExt.tree.TreeNode({
- text:'icon',
- icon:'user_female.png'
- });
七、从节点弹出对话框
下面的代码可以让对话框看起来像是从标题上飞出来的:
- tree.on("click",function(node){
- Ext.Msg.show({
- title:'提示',
- msg:"你单击了"+node,
- animEl:node.ui.textNode
- });
- });
八、节点提示信息
当我们把鼠标停留在某个节点的上方时,便会出现提示信息,为了实现这种效果,我们需要对提供的JSON数据做一些修改,在JSON中添加对应的节点提示信息,我们给每个节点数据都加上qtip:'xxx'参数,这个节点就可以显示提示信息了。
不过,仅仅为JSON添加这个参数还不能在页面上显示提示信息,需要先在JS中对EXT的提示功能进行初始化。
上面这行代码必须在其他功能加载前完成,建议写在onReady函数的第一行。具体代码如下:
- <scripttype="text/javascript">
- Ext.onReady(function(){
- Ext.QuickTips.init();
- vartree=newExt.tree.TreePanel({
- el:'tree',
- loader:newExt.tree.TreeLoader(),
- autoHeight:true
- });
- varroot=newExt.tree.AsyncTreeNode({
- text:'我是根',
- children:[
- {text:'LeafNo.1',qtip:'No1',leaf:true},
- {text:'LeafNo.1',qtip:'No2',leaf:true}
- ]
- });
- varroot1=newExt.tree.TreeNode({
- text:'icon',
- icon:'user_female.png'
- });
- tree.setRootNode(root);
- varcontextmenu=newExt.menu.Menu({
- id:'theContextMenu',
- items:[{
- text:'点击',
- handler:function(){
- alert('我被点中了');
- }
- }]
- });
- tree.on("contextmenu",function(node,e){
- e.preventDefault();
- node.select();
- contextmenu.showAt(e.getXY());
- });
- tree.on("click",function(node){
- Ext.Msg.show({
- title:'提示',
- msg:"你单击了"+node,
- animEl:node.ui.textNode
- });
- });
- tree.render();
- });
- </script>
九、为节点设置超链接
虽然我们完全可以监听click事件,但是直接在节点树形中设置超链接的地址也是一个好主意,这是很多人想实现的功能,具体的代码如下:
- varroot=newExt.tree.AsyncTreeNode({
- text:'我是根',
- children:[
- {text:'新浪网',qtip:'新浪网',leaf:true,href:'http://www.sina.com.cn'},
- {text:'百度中国',qtip:'搜索引擎',leaf:true,href:'http://www.baidu.cn',hrefTarget:'_blank'}
- ]
- });
分享到:
相关推荐
目录: 一 Extjs 基础 EXTJS4自学手册——EXT文件目录,本地加载文档,命名规范 EXTJS4自学手册——EXT基本方法、属性(onReady、...EXTJS4自学手册——页面控件(树形控件) EXTJS4自学手册——页面控件(表单控件)
ExtJs树形结构 ext的简单应用ExtJs树形结构 ext的简单应用ExtJs树形结构 ext的简单应用ExtJs树形结构 ext的简单应用ExtJs树形结构 ext的简单应用
extjs 树形下拉列表框,可以进行数据选择,数据回显。
easyui或extjs构建动态树形结构,程序详细解析了怎么构建、组织树形结构,代码简单明了,有相应的注释说明,真正的授人予渔.只要你明白程序的逻辑,相信上面两种组件的树形结构,将不会有任何问题。
extjs实现动态树
extjs实现简单的树状结构级联Ext onReady function { Ext QuickTips init ; Ext BLANK IMAGE URL "extjs resources images default s gif"; var mytree new Ext tree TreePanel { el : "...
使用extjs+ibatis+spring+struts开发的权限系统 数据库mysql 数据库文件在开发文档目录下 动态树形菜单的加载 ,用户角色权限菜单的维护 jar文件删了一些,需要用的自己加包
使用ExtJs2.0+SSH开发的结构,可以进行文件上传,以及数据的管理,用户的登录,通过数据库数据操行操作树形结构等功能
ExtJS4.0图文实例——数据组件介绍及简单应用
主要是Ext JS 深入浅出 树形结构博客源代码实现,树形结构的节点实现,展开子叶设置等功能
extjs增删改查分页树
extjs属性方法集中方便你查看学习,赶快来下载吧!学习extjs
配置和表格控件使用 表单与输入控件 树形结构 拖放以及弹出窗口
一个关于extjs的动态树demo 好久没裸写(不用框架)过了,都不记得关闭数据连接的语句写在哪里了。 这个demo至少要你懂得一些extjs语法,否则,你会看着很费劲。 里面提供了需要的表结构和mysql驱动 如果你不会mysql...
extjs树形结构实现系统主界面功能框架借鉴.pdf
ExtJs3下拉树 分两种方式调用:第一种: xtype : 'combotree', name : 'dm', fieldLabel : 'dm', tree : this.ct this.ct = new Ext.tree.TreePanel({ autoScroll : true, height : 250, border : false, ...
使用ExtJs构建树形菜单功能,很实用的东西。
extjs例子,结合oracle数据库,iBATIS,struts开发的一个extjs登录简单框架的例子
用Extjs 实现的 树形结构,仅供参考。
ExtJs 连接数据库并且生成动态树 ExtJs 连接数据库并且生成动态树 ExtJs 连接数据库并且生成动态树