本文共 2199 字,大约阅读时间需要 7 分钟。
YUI.ext中的Tree组件可以用来在页面实现树型布局的效果,包括常见的树型菜单等,那么我们怎样才能生成一个Tree呢,主要有以下四个步骤; 1.定义一个Tree对象: var tree = new Ext.tree.TreePanel('tree', { animate:true, loader: new Ext.tree.TreeLoader({ dataUrl:'get-nodes.jsp', baseParams: {lib:'yui'} }), enableDD:true, containerScroll: true, dropConfig: {appendOnly:true} }); 定义一个Tree对象时要声明该对象的ID以及相关的参数,如上所示,这个Tree对象的ID为tree,相关的参数包括是否有动画效果(animate:true),树节点的数据来源(loader: new Ext.tree.TreeLoader({dataUrl:'get-nodes.txt',baseParams: {lib:'yui'}})),是否可以拖放节点(enableDD:true),是否包含滚动条(containerScroll: true)以及节点拖放的配置(dropConfig: {appendOnly:true})等。 2.生成Tree的根节点: var root = new Ext.tree.AsyncTreeNode({ text: 'yui-ext', draggable:false, id:'source' }); tree.setRootNode(root); 首先生成一个节点,生成时可以定义该节点显示的文本(text属性),是否可以拖动(draggable属性,根节点需要定义为false),以及节点ID,这个ID使得我们可以在页面上用document.getElementById来获取该节点,然后调用tree.setRootNode(root)将该节点设置为树tree的根节点。 3.生成Tree的其他节点: Tree的其他节点都需要从数据源中加载进来,创建Tree对象时就定义了获取数据源的路径--loader: new Ext.tree.TreeLoader({dataUrl:'get-nodes.jsp',baseParams: {lib:'yui'}}),其中get-nodes.jsp就是生成数据源的路径,而baseParams属性则定义了访问该路径时传入的HTTP请求参数(可以有多个),页面在生成树时会调用XMLHttpRequest来访问该路径并将返回的数据解析成节点。除了可以使用WEB服务动态生成数据源以外,你还可以使用静态文件做为数据源,YUI.ext只要求返回的数据格式类似下面这样即可: [{'text':'welcome.html','id':'welcome.html','cls':'file',myPara:'myValue'}, {'text':'welcome2.html','id':'welcome2.html','leaf':true,'cls':'file','href':'welcome2.html'}] 这些数据是存储到一个数组中的,数组中的每一项代表一个节点,每一个节点都包含以下几个主要属性: text:定义该节点显示的名称; id:定义该节点的页面ID,便于document.getElementById方法获取该节点; leaf:true或者false,定义该节点是否是叶子节点; cls:定义该节点的class(显示的样式); href:定义点击该节点后链接的页面; 另外你还可以为节点增加自定义的属性,方法如上面的myPara:'myValue'一样。 YUI.ext会自动将返回的数据解析成节点并正确显示到页面上。 4.为Tree添加事件处理: a.当加入某个节点时,为其增加事件 tree.on('append', function(tree, node){ if(node.id == 'foo'){ // 这里加入你对该事件的处理 } }); b.针对某个节点的单击事件 tree.on('click', function(node){ if(node.id == 'foo'){ // 这里加入你对click事件的处理 } }); c.针对某个区域(集合)的事件 tree.getSelectionModel().on('selectionchange', function(sm, node){ if(node && node.id == 'foo'){ // 这里加入你对该事件的处理 } }); 经过以上四步我们就可以生成一个比较完整的Tree对象了。附: JS源代码,该代码中生成了两棵树,一棵是YUI Tree,一棵是YUI.ext Tree,并且一棵是用静态文件作为数据源,一棵是动态生成的数据源: Code 本文转自温景良博客园博客,原文链接: http://www.cnblogs.com/wenjl520/archive/2008/11/04/1326232.html ,如需转载请自行联系原作者 |