ExtJS Tree刷新后只选择节点,不展开(二)
实例讲解:点击触发域(Ext.form.TriggerField)三角按钮,弹出树面板窗口,并将触发域中的内容在树面板中选中。
1.点击触发域获取触发域中的内容:
policyTg.onTriggerClick=policytrigFun; function policytrigFun(e){ policyWin.show();//注:窗口显示的时候,会去加载树! policys = policyTg.getValue();//获取触发域中的文字内容 var parentNodes = policy_root.childNodes;//根节点下的目录 if(parentNodes.length > 0) {//因为窗口刚刚展开的时候,树还未加载完,所以length = 0 showCheckedPolicys(parentNodes); } else { loadPolicys(); } }
2.加载树,并执行加载成功事件的方法:
function loadPolicys(){ ploader.on("load",function(treeLoader,node){//此时的node是root根节点——因为是一次性加载完的!!! showCheckedPolicys(node.childNodes); }); }
3.显示被勾选的内容:
/*显示被勾选的内容*/ function showCheckedPolicys(parentNodes){ //先展开再收缩父节点,让子节点充分显示 for (var i = 0; i < parentNodes.length; i++) { parentNodes[i].expand();//将各级进行展开 parentNodes[i].collapse(); } //再将所有节点的选择框给清楚掉 for (var i = 0; i < parentNodes.length; i++) { var childNodes = parentNodes[i].childNodes; for (var j = 0; j < childNodes.length; j++) { childNodes[j].ui.toggleCheck(false); } } //将触发域中获取的相关内容字符串分割为一个数组 var policyArr = policys.split(","); if(!policyArr || policyArr == ""){ return; } //循环对比,相对应的进行勾选 for (var i = 0; i < parentNodes.length; i++) { var childNodes = parentNodes[i].childNodes; for (var j = 0; j < childNodes.length; j++) { var policyText = childNodes[j].text;//将触发域的内容和树节点显示的内容进行对比 for (var k = 0; k < policyArr.length; k++) { if(policyArr[k] == policyText) { childNodes[j].ui.toggleCheck(true); } } } } }
注意:
1.将触发域内容和树节点显示的内容进行对比。
2.注意勾选是TreeNodeUI的功能,不是TreePanel的功能,也不是TreeNode的功能
图示:
相关推荐
如果需要在页面刷新后保持用户的展开/折叠状态,可以使用`stateful`配置,并配合`stateId`来保存和恢复状态。 9. **性能优化** 对于大型数据集,可以使用分页和懒加载来提高性能。通过配置`loadMask`可以在数据...
通过ExtJs Tree,用户可以直观地展示数据之间的层级关系,并支持多种交互操作,如展开、折叠节点等。 ### 特性与功能 #### 树形面板(Treepanel) - **自动滚动**:通过`autoScroll`属性设置为`true`,确保当内容...
ExtJS Tree 示例是一种基于ExtJS库实现的交互式树形组件,它允许用户在Web应用程序中展示层次结构数据。在本示例中,我们将探讨如何使用ExtJS来创建、访问和操作一个树形结构,特别是在数据库操作方面,如添加和删除...
完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.
其中的Tree组件可以创建具有可展开/折叠节点的多层树结构,常用于组织和展示层次化的数据。在这个示例中,Tree可能被用来展示文件系统、组织架构或者菜单结构。它支持拖放操作、异步加载以及多种节点类型和样式。 2...
4. **AJAX 技术**: 在这个项目中,ExtJS Tree 可能使用 AJAX(Asynchronous JavaScript and XML)技术异步地从服务器获取 JSON 数据,这使得用户无需刷新整个页面就能更新树视图。通过 `Ext.Ajax.request` 或者 `Ext...
Ajax(Asynchronous JavaScript and XML)是实现Web应用异步通信的技术,允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。在动态树中,使用Ajax可以实现按需加载,只请求用户当前需要查看的节点...
AJAX(异步JavaScript和XML)是一种在不刷新整个页面的情况下更新部分网页的技术。在ExtJS中,Ajax被广泛用于与服务器进行通信,如加载和保存数据。在树形视图的上下文中,Ajax可以用来动态地获取和加载树节点的数据...
在ExtJS框架中,`TreePanel`是一种非常实用且功能丰富的UI组件,它允许开发者构建复杂的树形数据结构,并提供了丰富的交互特性,例如拖拽、选择、展开与折叠等功能。相较于其他框架如Easy UI或DhtmlxTree,ExtJS的`...
在对树节点进行操作后往往需要进行reload操作刷新一下树,但是很多业务都需要在树形刷新后默认选中最后一次选中的节点。这样就必须先保存前一次选中节点的信息,在reload之后再次通过节点的信息进行expand逐层展开到...
- `itemexpand` 和 `itemcollapse`: 节点展开或折叠后触发。 4. **API 方法**: - `expandNode`: 手动展开一个节点。 - `collapseNode`: 手动折叠一个节点。 - `getSelectionModel`: 获取选择模型,用于处理...
1. **Tree组件基本概念**:Tree组件用于展示层次结构的数据,类似于操作系统中的文件系统,具有可折叠/展开节点的功能。 2. **节点操作**:创建、添加、删除、移动和更新树节点是常见的操作,可以通过API轻松实现。 ...
ExtJS Combobox Tree,通常被称为Combotree,是ExtJS框架中的一个组件,它结合了下拉列表(Combobox)和树形结构(Tree),提供了一种用户友好的选择方式,尤其适用于展示层级关系的数据。在ExtJS 4.x版本中,这个...
- 示例还提供了增加树节点的功能,删除和修改的操作与之类似,主要涉及更新数据库记录,然后刷新受影响的树节点。 通过以上步骤,我们可以构建一个动态的、基于SSH和ExtJS的树形结构,其中JSON数据作为数据交换...
通过树实现动态加载以及实现添加节点、删除节点、修改节点文本已经通过拖动移动节点等功能。先创建树的表结构:插入以下数据:首先创建基本页面:代码中已包含了样式、ExtJS的脚本文件和语言包。其实bootstrap.js会...
ExtJS的树组件支持这种加载方式,只在需要时请求服务器获取节点数据。 接下来,我们关注树形结构(Tree)。在ExtJS中,树是一种可扩展的数据结构,用于展示层次关系的数据。每个节点可以有子节点,形成一个层级结构...
10.树状结构可以选择出现在某一列,不一定要在第一列 11.支持theme,纯css定制表格树,可以自由定制theme,包括图标/节点大小等 12.表格树从右到左显示 13.本地节点搜索,服务器端节点搜索(未实现待完成) 14.无变化重新...
- **Expanding and Collapsing**:节点可以展开或折叠,显示或隐藏子节点。 - **Tree Column**:特有列类型,用于显示和操作树形结构的节点。 4. **数据加载和交互**: - **Ajax Loading**:通过Ajax异步加载...
TreeStore的proxy用于获取和存储数据,加载节点可以调用`treeStore.load({node: 节点})`或`treeStore.reload({node: 节点})`,前者从根节点开始刷新,后者重新加载最近加载的节点。 实现多选功能,可以在Model定义...
树状结构可以选择出现在某一列,不一定要在第一列 11.支持theme,纯css定制表格树,可以自由定制theme,包括图标/节点大小等 12.表格树从右到左显示 13.本地节点搜索,服务器端节点搜索(未实现待完成) 14.无变化...