ExtJS Tree刷新后自动展开并选择节点
实例讲解:通过点击岗位,将岗位对应的模块菜单给展开。
1.点击岗位获取对应模块菜单ID:
function check(node,checked){ if(checked == true){ //得到岗位对应的功能 Ext.Ajax.request({ url : 'user.up?doType=getModuleById', params : {postID : node.id}, success : function(response, options) { checkModuleid = response.responseText; module_root.reload();//这是个根节点,此处不用treeLoader.reload() } }); } }
结果示例:{03,0302,0305,05,0504}
2.通过获取到的ID获取对应的Path路径:
moduleloader.on("load",function(treeLoader, node){ var ids = checkModuleid?checkModuleid.split(","):null; if(!ids){//||ids.length==0 return; } for(var i = 0;i<ids.length;i++){ Ext.Ajax.request({ url: "user.up?doType=moduleExpandTo", params: { id:ids[i]}, success:function(response,option){ var result = Ext.util.JSON.decode(response.responseText); if(result.math=="no")return; module_tree_node.expandPath('module_tree/module_root/' + result.path, 'id', onExpandPathComplete); } }); } });
Servlet:
if("moduleExpandTo".equals(action)){ response.setContentType("text/json;charset=UTF-8"); out=response.getWriter(); String id = request.getParameter("id"); String path = uDao.getPathOfModuleNode(id); if(path ==null||"".equals(path)){ json = "{match:'no'}"; }else{ json = "{match:'yes',path:'"+path+"'}"; } out.print(json); out.close(); return; }
Dao:
public String getPathOfModuleNode(String id) { String path = null; StringBuffer sql = new StringBuffer( "select moduleid,name from modules where enable = 1 connect by prior pid = moduleid start with moduleid='") .append(id); sql.append("' order by LEVEL DESC"); Session s = null; try { s = HibernateUtil.getSession(); s.beginTransaction(); SQLQuery query = s.createSQLQuery(sql.toString()); List lst = query.list(); if (lst != null && lst.size() > 0) { StringBuffer sp = new StringBuffer(""); for (int i = 0; i < lst.size(); i++) { Object[] flds = (Object[]) lst.get(i); sp.append((String) flds[0]); if (i < lst.size() - 1) { sp.append("/"); } } path = sp.toString(); } s.getTransaction().commit(); } catch (Throwable e) { log.error(e.toString()); HibernateUtil.endSession(s); } finally { HibernateUtil.endSession(s); } return path; }
3.展开树的方法:
function onExpandPathComplete(flag, node) { if(!flag) { return; } if(node){ node.ensureVisible();//确保该节点可见——即不可见时将展开其父目录使其可见。 node.select() ; //选中该节点!——即底纹变浅蓝色(相当于对该节点做了单击!!!) //方式二:treePanel.getSelectionModel().select(node); if(node.leaf){ node.ui.toggleCheck(true); //选中复选框 } } }
注意:
1.被选中项显示勾的方式——即复选框勾选的方式:
2.展开树——即展开选中节点的父节点的方式:
2.选中节点——相当于鼠标单击了该节点:
(1).
(2).
图示:
相应例子:http://atian25.iteye.com/blog/724092
相关推荐
通过ExtJs Tree,用户可以直观地展示数据之间的层级关系,并支持多种交互操作,如展开、折叠节点等。 ### 特性与功能 #### 树形面板(Treepanel) - **自动滚动**:通过`autoScroll`属性设置为`true`,确保当内容...
4. **同步更新**:添加或删除节点后,需确保客户端的树结构与数据库保持一致。可以通过重新加载树店或仅刷新受影响的子树来实现。 5. **错误处理**:添加错误处理机制,当数据库操作失败时,能够通知用户并恢复树的...
如果需要在页面刷新后保持用户的展开/折叠状态,可以使用`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...
在对树节点进行操作后往往需要进行reload操作刷新一下树,但是很多业务都需要在树形刷新后默认选中最后一次选中的节点。这样就必须先保存前一次选中节点的信息,在reload之后再次通过节点的信息进行expand逐层展开到...
Ajax(Asynchronous JavaScript and XML)是实现Web应用异步通信的技术,允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。在动态树中,使用Ajax可以实现按需加载,只请求用户当前需要查看的节点...
在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异步加载...
例如,当用户展开树的一个节点时,DWRTreeLoader会自动调用DWR服务获取子节点数据,然后通过DWRProxy将结果返回给客户端,更新树的显示。 总结,ExtJS的DWRProxy和DWRTreeLoader提供了一种强大且高效的方式来利用...
TreeStore的proxy用于获取和存储数据,加载节点可以调用`treeStore.load({node: 节点})`或`treeStore.reload({node: 节点})`,前者从根节点开始刷新,后者重新加载最近加载的节点。 实现多选功能,可以在Model定义...