`

Easyui tree扩展tree方法获取一级子节点

阅读更多

Easyui Tree插件获取子节点的时候用的getChildren方法,但是这个方法获取到的节点却是级联获取了子节点下的子节点,但是在有些时候,我们并不希望他返回这么多。我们只想获取目标节点的一级子节点,那么就我们就需要扩展我们自己的方法了。

这里我扩展了这个方法(getLeafChildren):

$.extend($.fn.tree.methods,{
	getLeafChildren:function(jq, params){
		var nodes = [];
		$(params).next().children().children("div.tree-node").each(function(){
			nodes.push($(jq[0]).tree('getNode',this));
		});
		return nodes;
	}
});

 

 具体的用法和getChildren方法是一样的,只是这个只返回目标节点的第一级子节点。

例把省市县下拉列表展开到市级:

 function expandNode(){
  var combotree_org=$('#admin_elecmg_activity_plan_orgNo').combotree('tree');
  combotree_org.tree('collapseAll');//折叠所有节点
  /**方法一:根据省id展开**/
//   var root=combotree_org.tree('getRoot');//获取根节点
//   combotree_org.tree('expand', root.target);//展开根节点
//   var node = combotree_org.tree('find', 41101);//找到获取国网河南省电力公司
//   combotree_org.tree('expand', node.target);//展开国网河南省电力公司
  
  /**方法二:由根开始遍历一级一级的展开,展开到市级**/
  var roots=combotree_org.tree('getRoots'),children=null,i,j;
  for(i=0;i<roots.length;i++){
   combotree_org.tree('expand', roots[i].target);
   children=combotree_org.tree('getLeafChildren',roots[i].target);
   for(j=0;j<children.length;j++){
    combotree_org.tree('expand', children[j].target);
   }
   alert(children.length);
  }
  /**展开到县级**/
//   var roots=combotree_org.tree('getRoots'),children=null,children2=null,i,j,k;
//   for(i=0;i<roots.length;i++){
//    combotree_org.tree('expand', roots[i].target);
//    children=combotree_org.tree('getLeafChildren',roots[i].target);
//    for(j=0;j<children.length;j++){
//     combotree_org.tree('expand', children[j].target);
//     children2=combotree_org.tree('getLeafChildren',children[j].target);
//     for(k=0;k<children2.length;k++){
//      combotree_org.tree('expand', children2[k].target);
//     }
//    }
//   }
 }

 

分享到:
评论

相关推荐

    easyui tree扁平化扩展,不用再为children嵌套结构烦恼

    默认情况下,EasyUI Tree支持加载JSON格式的数据,其中每个节点都可以包含一个`children`属性来表示子节点列表。这种数据结构虽然直观,但在某些情况下(例如后端返回的是扁平化的数据)并不方便处理。 #### 三、...

    jquery-easyui-tree学习

    Tree的数据可以是JSON格式的数组,每个对象代表一个树节点,包含`id`(唯一标识)、`text`(节点文本)、`children`(子节点数组)等属性。例如: ```json [ { "id": "1", "text": "父节点1", "children": [ ...

    easyui tree 改进版

    EasyUI Tree是一款基于jQuery的轻量级用户界面库,它为开发者提供了丰富的树形结构组件。在标准的EasyUI Tree基础上,“easyui tree 改进版”进行了优化和增强,特别是加入了复选框选择功能,这使得用户在操作树形...

    树节点绑定(EasyUI-Tree)内含数据库打开直接用

    - 数据绑定:将转换后的JSON数据通过JavaScript传递给前端,使用EasyUI的`$(treeSelector).tree('loadData', data)`方法将数据加载到Tree中。 3. ASP.NET框架: - ASP.NET是Microsoft开发的一种Web应用程序框架,...

    easyui datagrid 拖拽到 tree

    在IT领域,EasyUI是一个基于jQuery的前端框架,它提供了丰富的UI组件,如datagrid、tree、dialog等,用于快速构建用户界面。本文将详细讲解如何使用EasyUI实现从datagrid组件拖放到tree组件的功能,以及涉及的相关...

    easyui-datagrid&&easyui-tree实例

    EasyUI是一个基于jQuery的轻量级前端框架,它提供了一系列丰富的UI组件,包括datagrid和tree,用于快速构建用户界面。而ASP.NET是微软开发的一种Web应用程序框架,用于构建动态网站、Web应用和Web服务。 **EasyUI ...

    easyui_tree 文档及demo

    EasyUI Tree 需要的数据格式通常是 JSON 格式,包含节点 ID、父节点 ID、文本以及子节点数组。例如: ```json { "id": "1", "text": "父节点", "children": [ { "id": "11", "text": "子节点1" }, { "id...

    扩展jquery easyui tree的搜索树节点方法(推荐)

    例如,`tree.getChildren` 可以获取一个节点下的所有子节点,`tree.isLeaf` 用来判断一个节点是否是叶子节点等。 通过上述扩展方法,jQuery EasyUI Tree 组件的用户体验将得到明显提升,特别是在节点较多的情况下,...

    easyUI-springmvc-tree-demo

    EasyUI是一款基于jQuery的轻量级UI框架,提供了丰富的组件库,包括Tree组件。而SpringMVC作为后端强大的MVC框架,能够有效地处理请求和响应,提供数据支持。本文将深入探讨如何利用EasyUI的Tree组件与SpringMVC进行...

    easyui tree

    - EasyUI Tree支持懒加载,只在用户需要时加载子节点,减少了初始页面加载的时间。 - Tree组件通过触发特定的事件(如`onLoad`或`onClick`)来请求新的数据,然后更新自身以显示新加载的节点。 6. **与MySQL的...

    Easyui combotree idField扩展Demo

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

    EasyUI实现异步加载tree(整合Struts2)源码

    EasyUI是一个基于jQuery的轻量级前端框架,提供了丰富的UI组件,包括Tree,它能够方便地构建出层次结构的数据展示。而Struts2作为一款流行的MVC框架,用于处理后端业务逻辑和数据操作。 首先,我们要理解EasyUI ...

    Jquery easy ui Tree组件使用(tree11.json当数据源有bug)

    jQuery EasyUI是一个基于jQuery的轻量级UI库,它提供了一系列易于使用的组件,如对话框、表格、菜单等,其中Tree组件用于展示层次结构的数据。 首先,让我们理解jQuery EasyUI Tree组件的基本使用。Tree组件是用来...

    easyui tree带checkbox实现单选的简单实例

    在`onSelect`事件处理函数中,当用户选择一个节点时,会遍历所有已选中的节点(`getChecked`方法获取),并将除当前选中节点外的所有其他节点取消选中。这样就确保了每次只有一个节点被选中: ```javascript ...

    EasyUI tutorial 中文版 chm

    easyUI 加载parent/child节点到tree 转换tree标准格式数据 easyUI 创建一个基础的TreeGrid easyUI 创建复杂TreeGrid Form easyUI 通过ajax的方式提交Form easyUI 添加ComboTree 字段到一个 form easyui ...

    使用easyUI实现树菜单

    EasyUI是一个基于jQuery的轻量级前端开发框架,它提供了一系列组件,包括表格、对话框、菜单等,使得开发者能够快速构建用户界面。在这个场景中,我们将专注于`tree`插件,该插件用于创建交互式的树形结构,尤其适用...

    easy ui tree比较全的功能

    10. **异步加载**:对于大型数据集,可以使用异步加载(`async`属性),只在需要时加载子节点,提高页面性能。 11. **节点状态管理**:`state`属性允许你控制节点的展开、折叠、选中等状态,例如`state:'closed'`将...

    jqueryeasyui_tree_comtree.docx

    6. `children`:一个TreeNode列表,表示当前节点的子节点集合。 在给定的代码示例中,`execute()`方法展示了如何动态地从数据库获取数据并构建TreeNode对象。`sysOrgService.getChildOrgs(pid)`用于获取父ID为`pid`...

    easyui的Treegrid扩展

    在传统的TreeGrid中,数据通常是以树状结构展示,每一行都可以展开或折叠,显示或隐藏子节点。然而,通过这个扩展,我们可以实现更丰富的交互功能,比如让多个TreeGrid之间可以进行数据的拖放操作。 首先,让我们...

    实例讲解jQuery EasyUI tree中state属性慎用

    在jQuery EasyUI框架中,Tree组件是一个非常常用且功能丰富的控件,用于展示层次结构的数据。在使用Tree组件时,我们需要关注每个节点的属性来控制它们的行为和样式。本文将重点讲解`state`属性,特别是在1.4.4版本...

Global site tag (gtag.js) - Google Analytics