Jquery EasyUI Combotree展开所有父节点
Jquery EasyUI Combotree获取树完整路径
Jquery EasyUI tree展开所有父节点
Jquery EasyUI tree获取完整路径
================================
©Copyright 蕃薯耀 2018年5月11日
http://fanshuyao.iteye.com/
效果如下:
1、默认显示完整路径
2、默认根据叶子节点的值赋值,并从该子结点逐层向上展开所有父结点
使用方法见:http://fanshuyao.iteye.com/blog/2420530 中的方式四
/** * 根据叶子节点展开所有父节点 * @param treeObj 树对象,(combotree的树对象获取:var treeObj = comboObj.combotree("tree");) * @param node 叶子节点 */ function expandParent(treeObj, node){ var parentNode = treeObj.tree("getParent", node.target); if(parentNode != null && parentNode != "undefined"){ treeObj.tree("expand", parentNode.target); expandParent(treeObj, parentNode); } }; /** * tree初始化赋值并展开所有父节点 * @param treeObj 树对象 * @param leafValue 叶子节点的值 */ function treeInitValueAndExpand(treeObj, leafValue){ var nodesChecked = treeObj.tree("getChecked");//获取选中的值 if(nodesChecked.length > 0){ for(var i=0; i<nodesChecked.length; i++){ expandParent(treeObj, nodesChecked[i]); } } }; /** * 根据叶子节点选中的值,获取树整个路径的名称 * @param treeObj 树对象,(combotree的树对象获取:var treeObj = comboObj.combotree("tree");) * @param node 叶子节点 */ function getTreePathNames(treeObj, node){ var pathName = node.text; var parentNode = treeObj.tree("getParent", node.target); if(parentNode != null && parentNode != "undefined"){ //此处为父节点的名称 + 子节点名称 pathName = getTreePathNames(treeObj, parentNode) + " > " + pathName; } return pathName; }; /** * 根据叶子节点选中的值,获取树整个路径的名称 * @param combotreeId 唯一ID * @param leafValue 叶子节点的值 */ function getCombotreePathNames(combotreeId, leafValue){ var combotreeObj = $("#"+combotreeId); var treeObj = combotreeObj.combotree("tree"); var nodesChecked = treeObj.tree("getChecked");//获取选中的值 var pathName = ""; if(nodesChecked.length > 0){ for(var i=0; i<nodesChecked.length; i++){ pathName += getTreePathNames(treeObj, nodesChecked[i]); } } return pathName; }; /** * combotree初始化赋值并展开所有父节点 * @param combotreeId 唯一ID * @param leafValue 叶子节点的值 */ function combotreeInitValueAndExpand(combotreeId, leafValue){ var combotreeObj = $("#"+combotreeId); var treeObj = combotreeObj.combotree("tree"); combotreeObj.combotree("setValue", leafValue);//赋值 treeInitValueAndExpand(treeObj, leafValue); };
(如果你觉得文章对你有帮助,欢迎捐赠,^_^,谢谢!)
================================
©Copyright 蕃薯耀 2018年5月11日
http://fanshuyao.iteye.com/
相关推荐
Combotree 是 Easyui 提供的一个组件,它结合了下拉框(combobox)和树形结构(tree),常用于展示具有层级关系的数据,并允许用户进行选择。在这个"Easyui combotree idField扩展Demo"中,我们主要探讨的是如何...
《jQuery EasyUI Tree组件深度解析与实践应用》 在Web开发中,为了构建用户友好的交互界面,我们经常需要使用到各种UI库。jQuery EasyUI就是这样一个强大的前端框架,它基于jQuery,提供了丰富的组件,包括今天我们...
- Combotree是jQuery EasyUI框架中的一个组合控件,它结合了Tree和Combobox的功能。 - 通常用于显示具有层次结构的数据集合,用户可以选择树中的某个节点作为输入值。 2. **异步树**: - 异步树是指在用户操作时...
总结一下,EasyUi combotree 实现动态加载树节点的关键在于利用 `onBeforeExpand` 事件和修改 Tree 控件的 `options.url`,以及服务器端需提供根据父节点ID返回子节点数据的接口。通过这种方式,可以有效地优化用户...
Combotree 需要的数据通常是一个 JSON 对象,包含父节点和子节点信息,例如: ```json [ {"id": "1", "text": "父节点1", "children": [ {"id": "11", "text": "子节点1.1"}, {"id": "12", "text": "子节点1.2...
jQuery EasyUI 是一个基于 jQuery 的前端框架,它简化了网页用户界面开发,提供了丰富的组件和功能。这个“jQuery EasyUI 帮助文档”包含了全面的API参考和使用指南,对于开发者来说是极具价值的资源。 jQuery ...
**jQuery EasyUI 知识点详解** jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列的 UI 组件,使得开发者能够快速构建出美观且功能丰富的 Web 应用程序。这个框架大大简化了网页界面的设计工作,使得...
在初试 Jquery EasyUI 的 Demo 中,你可以通过阅读 `初试JqueryEasyUI.docx` 和 `初试JqueryEasyUI.mht` 文件了解详细步骤和示例代码。`EasyUIDemo` 文件可能是包含实际演示的 HTML 和 JavaScript 代码,可以运行...
扩展jQuery EasyUI tree搜索树节点的方法,使其支持节点名称的模糊匹配,将不匹配的节点隐藏。 /** * 1)扩展jquery easyui tree的节点检索方法。使用方法如下: * $("#treeId").tree("search", searchText); * ...
在本文中,我们将深入探讨jQuery EasyUI中的Tree组件以及如何实现树形列表节点的异步加载。EasyUI是一个基于jQuery的轻量级前端框架,它提供了丰富的UI组件,包括我们这里关注的Tree组件。异步加载是提升用户体验的...
3. **API 参考**:文档中包含了一个完整的 API 参考,列出了所有可用的 jQuery EasyUI 函数、方法和属性。开发者可以通过查阅这个部分来了解如何操作和定制组件,比如改变组件的属性、触发或响应特定事件等。 4. **...
这种方式同样通过循环获取所有父节点,并在每次循环中更新`parentAll`。 总结来说,获取Easyui Tree当前选择节点的所有顶级父节点的关键在于递归地调用`tree('getParent'...)`方法,直到达到根节点或达到预设的深度...
在jQuery EasyUI框架中,Combotree组件是一个非常实用的功能组件,它结合了下拉列表(Combobox)与树形结构(Tree)的特点,能够实现动态加载数据并以树形结构展示。这在很多场景下都非常有用,例如产品分类、部门...
**jQueryEasyUI 1.1 完整源代码详解** ...通过学习和使用jQueryEasyUI 1.1的完整源代码,开发者不仅可以快速构建功能丰富的Web应用,还能提升自己的前端开发技能,更好地理解和掌握JavaScript库的构建方式。
异步树则通过按需加载(或称为懒加载)技术解决了这个问题,只在用户展开特定节点时才请求并加载其子节点,从而提高了性能和用户体验。 jQuery EasyUI 提供的 `tree` 组件支持异步加载,这对于处理大数据量的无限级...
jQuery EasyUI 是一个基于 jQuery 的前端开发框架,它简化了网页界面的构建,提供了一...这个压缩包中的所有文件,包括 jQuery 库和 EasyUI 组件,都为开发者提供了一个完整的开发环境,使得快速上手和应用变得简单。
jQuery EasyUI是一个强大的JavaScript库,它是基于jQuery设计的,旨在简化和加速Web开发过程中用户界面(UI)的构建。这个库包含了一系列精心设计的UI组件,使得开发者无需深入CSS和HTML的细节,就能创建出功能完备...
最新版本的jQuery EasyUI 1.3.6版全中文API汉化文档火热出炉,由于很多人和我要chm格式的,所以本次API我提供了2种版本的API,一个还是以前的EXE格式,另外一个就是人气颇高的chm格式。本次还将EasyUI 1.3.6版直接...
本篇文章将深入探讨如何实现jQuery EasyUI Tree的动态加载,并根据提供的标题和描述,分享一些可能的实现方法。 动态加载是一种优化技术,可以提高用户体验,避免一次性加载大量数据导致页面响应变慢。对于Tree组件...
- **Tree(树形结构)**:Tree组件用于展示层次结构的数据,支持展开、折叠、选择节点等操作,常用于目录结构的展示。 - **Menu(菜单)**:提供下拉菜单功能,可方便地创建多级菜单,适用于导航栏或工具栏。 - *...