`
阅读更多

 

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/

 

 

 

 

 

 

 

  • 大小: 881 Bytes
  • 大小: 4.7 KB
1
0
分享到:
评论
1 楼 蕃薯耀 2018-05-11  
Jquery EasyUI Combotree展开所有父节点
Jquery EasyUI Combotree获取树完整路径
Jquery EasyUI tree展开所有父节点
Jquery EasyUI tree获取完整路径


==============
蕃薯耀

相关推荐

    Easyui combotree idField扩展Demo

    Combotree 是 Easyui 提供的一个组件,它结合了下拉框(combobox)和树形结构(tree),常用于展示具有层级关系的数据,并允许用户进行选择。在这个"Easyui combotree idField扩展Demo"中,我们主要探讨的是如何...

    jquery-easyui-tree学习

    《jQuery EasyUI Tree组件深度解析与实践应用》 在Web开发中,为了构建用户友好的交互界面,我们经常需要使用到各种UI库。jQuery EasyUI就是这样一个强大的前端框架,它基于jQuery,提供了丰富的组件,包括今天我们...

    Java>jquery-easyui_combotree异步树的生成代码示例(NEW)

    - Combotree是jQuery EasyUI框架中的一个组合控件,它结合了Tree和Combobox的功能。 - 通常用于显示具有层次结构的数据集合,用户可以选择树中的某个节点作为输入值。 2. **异步树**: - 异步树是指在用户操作时...

    EasyUi combotree 实现动态加载树节点

    总结一下,EasyUi combotree 实现动态加载树节点的关键在于利用 `onBeforeExpand` 事件和修改 Tree 控件的 `options.url`,以及服务器端需提供根据父节点ID返回子节点数据的接口。通过这种方式,可以有效地优化用户...

    JQuery EasyUI combotree

    Combotree 需要的数据通常是一个 JSON 对象,包含父节点和子节点信息,例如: ```json [ {"id": "1", "text": "父节点1", "children": [ {"id": "11", "text": "子节点1.1"}, {"id": "12", "text": "子节点1.2...

    jquery easyui 帮助文档

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它简化了网页用户界面开发,提供了丰富的组件和功能。这个“jQuery EasyUI 帮助文档”包含了全面的API参考和使用指南,对于开发者来说是极具价值的资源。 jQuery ...

    jqueryEasyUI

    **jQuery EasyUI 知识点详解** jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列的 UI 组件,使得开发者能够快速构建出美观且功能丰富的 Web 应用程序。这个框架大大简化了网页界面的设计工作,使得...

    初试JqueryEasyUI(附Demo)

    在初试 Jquery EasyUI 的 Demo 中,你可以通过阅读 `初试JqueryEasyUI.docx` 和 `初试JqueryEasyUI.mht` 文件了解详细步骤和示例代码。`EasyUIDemo` 文件可能是包含实际演示的 HTML 和 JavaScript 代码,可以运行...

    jQuery EasyUI tree增加搜索功能的实现方法

    扩展jQuery EasyUI tree搜索树节点的方法,使其支持节点名称的模糊匹配,将不匹配的节点隐藏。 /** * 1)扩展jquery easyui tree的节点检索方法。使用方法如下: * $("#treeId").tree("search", searchText); * ...

    jquery easyui tree 树形列表节点异步加载

    在本文中,我们将深入探讨jQuery EasyUI中的Tree组件以及如何实现树形列表节点的异步加载。EasyUI是一个基于jQuery的轻量级前端框架,它提供了丰富的UI组件,包括我们这里关注的Tree组件。异步加载是提升用户体验的...

    jQuery EasyUI 1.5.1 版 API 中文版

    3. **API 参考**:文档中包含了一个完整的 API 参考,列出了所有可用的 jQuery EasyUI 函数、方法和属性。开发者可以通过查阅这个部分来了解如何操作和定制组件,比如改变组件的属性、触发或响应特定事件等。 4. **...

    Easyui Tree获取当前选择节点的所有顶级父节点

    这种方式同样通过循环获取所有父节点,并在每次循环中更新`parentAll`。 总结来说,获取Easyui Tree当前选择节点的所有顶级父节点的关键在于递归地调用`tree('getParent'...)`方法,直到达到根节点或达到预设的深度...

    jquery-easyui_combotree异步树的生成代码

    在jQuery EasyUI框架中,Combotree组件是一个非常实用的功能组件,它结合了下拉列表(Combobox)与树形结构(Tree)的特点,能够实现动态加载数据并以树形结构展示。这在很多场景下都非常有用,例如产品分类、部门...

    jQueryEasyUI 1.1完整源代码

    **jQueryEasyUI 1.1 完整源代码详解** ...通过学习和使用jQueryEasyUI 1.1的完整源代码,开发者不仅可以快速构建功能丰富的Web应用,还能提升自己的前端开发技能,更好地理解和掌握JavaScript库的构建方式。

    Jquery EasyUI 异步树,适合大数据量无限级加载

    异步树则通过按需加载(或称为懒加载)技术解决了这个问题,只在用户展开特定节点时才请求并加载其子节点,从而提高了性能和用户体验。 jQuery EasyUI 提供的 `tree` 组件支持异步加载,这对于处理大数据量的无限级...

    jQuery easyui 全套文件

    jQuery EasyUI 是一个基于 jQuery 的前端开发框架,它简化了网页界面的构建,提供了一...这个压缩包中的所有文件,包括 jQuery 库和 EasyUI 组件,都为开发者提供了一个完整的开发环境,使得快速上手和应用变得简单。

    jquery-easyui资料和文档

    jQuery EasyUI是一个强大的JavaScript库,它是基于jQuery设计的,旨在简化和加速Web开发过程中用户界面(UI)的构建。这个库包含了一系列精心设计的UI组件,使得开发者无需深入CSS和HTML的细节,就能创建出功能完备...

    jQuery EasyUI 1.3.6 离线简体中文API文档

    最新版本的jQuery EasyUI 1.3.6版全中文API汉化文档火热出炉,由于很多人和我要chm格式的,所以本次API我提供了2种版本的API,一个还是以前的EXE格式,另外一个就是人气颇高的chm格式。本次还将EasyUI 1.3.6版直接...

    JqueryEasyUI Tree 动态加载,稍作修改就可以用了

    本篇文章将深入探讨如何实现jQuery EasyUI Tree的动态加载,并根据提供的标题和描述,分享一些可能的实现方法。 动态加载是一种优化技术,可以提高用户体验,避免一次性加载大量数据导致页面响应变慢。对于Tree组件...

    jquery-easyui-1.4.5_easyuiapi_

    - **Tree(树形结构)**:Tree组件用于展示层次结构的数据,支持展开、折叠、选择节点等操作,常用于目录结构的展示。 - **Menu(菜单)**:提供下拉菜单功能,可方便地创建多级菜单,适用于导航栏或工具栏。 - *...

Global site tag (gtag.js) - Google Analytics