ExtJS Tree刷新后自动展开并选择节点(二)
实例讲解:输入文件号查找文件,并将查找到的文件展示出来。
1.输入文件号点击查找:
tbar: [ { xtype:'label', text: '文件号:' },{ xtype : 'textfield', id: 'searchFor', allowBlank: true, width: 120 },{ text: '查找', iconCls: 'filter', handler : function(){ var searchFor = Ext.getCmp("searchFor").getValue(); if(searchFor==''){ return; } //调用服务端查找 Ext.Ajax.request({ url : 'getIndustry.base?doType=searchPolicy', params : {searchFor: searchFor}, success : onSearchSuccessCallback, failure : function(response,option) { Ext.Msg.alert("失败","查找过程发生错误!"); } }); } } ] });
2.通过返回的Path路径,展开树目录,并选中节点:
//通过Path展开树 function onSearchSuccessCallback(response,option){ var result = Ext.util.JSON.decode(response.responseText); if(result.match=='no'){ Ext.Msg.alert( "查找结果","没有匹配节点!"); }else{//展开路径,注意Path是以节点id加上"/"来间隔的。 tree.expandPath('tree/tree-root/' + result.path, 'id', onExpandPathComplete); } } //通过Path展开完成后的方法 function onExpandPathComplete(bSuccess, oLastNode) { if(!bSuccess){ return; } selectNode(oLastNode); } //选中节点 function selectNode(node){ if(node){ node.ensureVisible();//确保节点已显示出来。 node.select();//选中节点——相当于单击该节点。 //node.fireEvent('click', node);//此处与node.select()功能相同。 } }
返回的Path示例:
{match:'yes',path:'01/2961'}
注意:
1.选中节点——相当于单击了该节点
方式一:node.select();
方式二:node.fireEvent("click",node);
2.通过path展开树:
注:没有后面的onExpandPathComplete也是可以的,如下:
tree.expandPath('tree/tree-root/' + result.path, 'id')
Servlet:
else if("searchPolicy".equals(action)){ String searchFor = request.getParameter("searchFor"); String searchType = request.getParameter("sType"); int stype = 0; //查找的匹配字段。1:和IBM匹配,0:默认,和名称匹配 try{ stype = Integer.parseInt(searchType); }catch(Exception e){ } PolicyDao pdao =new PolicyDao(); String path = pdao.searchPolicyNode(searchFor, stype, year); if(path ==null||"".equals(path)){ oStream = "{match:'no'}"; }else{ oStream = "{match:'yes',path:'"+path+"'}"; } response.setContentType("text/json;charset=UTF-8"); PrintWriter out=response.getWriter(); out.print(oStream); out.close(); return; }
Dao:
public String searchPolicyNode(String cont,int matchType,int year){ String path = null; String findBm=""; //树的组织sql,始终是按固定顺序的。 StringBuffer treeView = new StringBuffer("SELECT rownum AS R,O.* FROM ("); treeView.append(" SELECT BM,MC,TITLE,FILENO,PID,ISLEAF,LEVEL FROM("); treeView.append(" SELECT BM,MC,'' AS TITLE,MC AS FILENO,PID,0 AS ISLEAF FROM BM_CONT WHERE TABLE_BM='BM_GRADE' AND YEAR=").append(year); treeView.append(" UNION SELECT TO_CHAR(ID) AS BM,FILENO AS MC,TITLE,FILENO,GID AS PID,1 AS ISLEAF FROM POLICY "); treeView.append(" )CONNECT BY PRIOR BM=PID START WITH PID IS NULL )O "); //查找 StringBuffer sql = new StringBuffer("select b.r,b.bm,b.pid,b.mc,b.isleaf,b.title,b.fileno from( "); sql.append(treeView); sql.append(") b where "); sql.append((matchType ==0)?"fileno":"title"); sql.append(" like '%").append(cont); sql.append("%' and rownum=1"); Session s = null; try{ s = HibernateUtil.getSession(); s.beginTransaction(); SQLQuery squery = s.createSQLQuery(sql.toString()); List lst =squery.list(); if(lst!=null&&lst.size()>0){ Object[] flds=(Object[])lst.get(0); findBm =(String)flds[1]; } if(findBm!=null&&!"".equals(findBm)){ sql = new StringBuffer("SELECT GID,ID FROM POLICY WHERE ID=").append(findBm); squery = s.createSQLQuery(sql.toString()); lst =squery.list(); if(lst!=null&&lst.size()>0){ StringBuffer sp =new StringBuffer(""); Object[] flds=(Object[])lst.get(0); sp.append((String)flds[0]).append("/"); sp.append(((BigDecimal)flds[1]).intValue()); path = sp.toString(); } s.getTransaction().commit(); } }catch (Throwable e) { logger.error(e.toString()); HibernateUtil.endSession(s); }finally{ HibernateUtil.endSession(s); } return path; }
获取的树的Json数据示例:
[ { "id": "01", "text": "国家级", "cls": "folder", "children": [ { "id": "2961", "text": "财建[2012]616号", "cls": "file", "pid": "01", "leaf": true, "autoid": 0, "expanded": false }, { "id": "2962", "text": "财建[2012]1111号", "cls": "file", "pid": "01", "leaf": true, "autoid": 0, "expanded": false }, ... ... ... ], "leaf": false, "autoid": 0, "expanded": false } ]
操作图示:
1.查找前:
2.查找后:(通过path展开目录,并选中查找到的节点)
相关推荐
通过ExtJs Tree,用户可以直观地展示数据之间的层级关系,并支持多种交互操作,如展开、折叠节点等。 ### 特性与功能 #### 树形面板(Treepanel) - **自动滚动**:通过`autoScroll`属性设置为`true`,确保当内容...
ExtJS Tree 示例是一种基于ExtJS库实现的交互式树形组件,它允许用户在Web应用程序中展示层次结构数据。在本示例中,我们将探讨如何使用ExtJS来创建、访问和操作一个树形结构,特别是在数据库操作方面,如添加和删除...
如果需要在页面刷新后保持用户的展开/折叠状态,可以使用`stateful`配置,并配合`stateId`来保存和恢复状态。 9. **性能优化** 对于大型数据集,可以使用分页和懒加载来提高性能。通过配置`loadMask`可以在数据...
完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.
其中的Tree组件可以创建具有可展开/折叠节点的多层树结构,常用于组织和展示层次化的数据。在这个示例中,Tree可能被用来展示文件系统、组织架构或者菜单结构。它支持拖放操作、异步加载以及多种节点类型和样式。 2...
4. **AJAX 技术**: 在这个项目中,ExtJS Tree 可能使用 AJAX(Asynchronous JavaScript and XML)技术异步地从服务器获取 JSON 数据,这使得用户无需刷新整个页面就能更新树视图。通过 `Ext.Ajax.request` 或者 `Ext...
例如,当用户展开一个节点时,可以通过Ajax发送新的请求获取子节点数据。 7. **优化性能**:为了提高用户体验,可以使用分页、懒加载等策略。只在需要时加载树的子层级,降低初始加载时间和后续交互的网络负担。 8...
Ajax(Asynchronous JavaScript and XML)是实现Web应用异步通信的技术,允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。在动态树中,使用Ajax可以实现按需加载,只请求用户当前需要查看的节点...
在对树节点进行操作后往往需要进行reload操作刷新一下树,但是很多业务都需要在树形刷新后默认选中最后一次选中的节点。这样就必须先保存前一次选中节点的信息,在reload之后再次通过节点的信息进行expand逐层展开到...
在ExtJS框架中,`TreePanel`是一种非常实用且功能丰富的UI组件,它允许开发者构建复杂的树形数据结构,并提供了丰富的交互特性,例如拖拽、选择、展开与折叠等功能。相较于其他框架如Easy UI或DhtmlxTree,ExtJS的`...
1. **Tree组件基本概念**:Tree组件用于展示层次结构的数据,类似于操作系统中的文件系统,具有可折叠/展开节点的功能。 2. **节点操作**:创建、添加、删除、移动和更新树节点是常见的操作,可以通过API轻松实现。 ...
- `itemexpand` 和 `itemcollapse`: 节点展开或折叠后触发。 4. **API 方法**: - `expandNode`: 手动展开一个节点。 - `collapseNode`: 手动折叠一个节点。 - `getSelectionModel`: 获取选择模型,用于处理...
ExtJS Combobox Tree,通常被称为Combotree,是ExtJS框架中的一个组件,它结合了下拉列表(Combobox)和树形结构(Tree),提供了一种用户友好的选择方式,尤其适用于展示层级关系的数据。在ExtJS 4.x版本中,这个...
- 示例还提供了增加树节点的功能,删除和修改的操作与之类似,主要涉及更新数据库记录,然后刷新受影响的树节点。 通过以上步骤,我们可以构建一个动态的、基于SSH和ExtJS的树形结构,其中JSON数据作为数据交换...
通过树实现动态加载以及实现添加节点、删除节点、修改节点文本已经通过拖动移动节点等功能。先创建树的表结构:插入以下数据:首先创建基本页面:代码中已包含了样式、ExtJS的脚本文件和语言包。其实bootstrap.js会...
在这个例子中,我们创建了一个`TreeStore`,配置了AJAX代理来获取数据,并在`TreePanel`中监听了`itemexpand`事件,当用户展开节点时,动态加载其子节点。通过这种方式,我们可以构建一个高效的、响应式的树形结构,...
1.完整的包命名空间 2.自定义header footer 3.动态添加节点/动态删除节点/动态...15.支持插件开发,可以为树添加更多功能,例如下拉框树,选择框树,可编辑内容的树,拖动节点等都可以很容易自己实现或者根据第三方js实现
- **Expanding and Collapsing**:节点可以展开或折叠,显示或隐藏子节点。 - **Tree Column**:特有列类型,用于显示和操作树形结构的节点。 4. **数据加载和交互**: - **Ajax Loading**:通过Ajax异步加载...
TreeStore的proxy用于获取和存储数据,加载节点可以调用`treeStore.load({node: 节点})`或`treeStore.reload({node: 节点})`,前者从根节点开始刷新,后者重新加载最近加载的节点。 实现多选功能,可以在Model定义...
例如,当用户展开树的一个节点时,DWRTreeLoader会自动调用DWR服务获取子节点数据,然后通过DWRProxy将结果返回给客户端,更新树的显示。 总结,ExtJS的DWRProxy和DWRTreeLoader提供了一种强大且高效的方式来利用...